Add error boundary components and exception logging

.buildkite/commands/publish-react-native-bridge-android-artifacts.sh

@@ -5,6 +5,7 @@ set -euo pipefail
 # Retrieve data from previous steps
 PUBLISHED_AZTEC_VERSION=`buildkite-agent meta-data get "PUBLISHED_REACT_NATIVE_AZTEC_ANDROID_VERSION"`
 buildkite-agent artifact download bundle/android/App.js .
+buildkite-agent artifact download bundle/android/App.composed.js.map .
 
 # Copy the JavaScript bundle and all local static assets referenced within the
 # bundle to the appropriate locations for inclusion in the bridge bundle

.buildkite/commands/publish-react-native-ios-artifacts.sh

@@ -2,6 +2,7 @@
 
 echo "--- :arrow_down: Download iOS JS bundle"
 buildkite-agent artifact download bundle/ios/App.js .
+buildkite-agent artifact download bundle/ios/App.composed.js.map .
 buildkite-agent artifact download ios-assets.tar.gz .
 mkdir -p ios-xcframework/Gutenberg/Resources
 tar -xzvf ios-assets.tar.gz -C ios-xcframework/Gutenberg/Resources/

.buildkite/pipeline.yml

@@ -143,29 +143,19 @@ steps:
         echo "--- :android: Build Android bundle"
         npm run bundle:android
 
-        echo "--- :arrow_up: Upload Android bundle artifact"
+        echo "--- :arrow_up: Upload Android bundle and source map artifacts"
         buildkite-agent artifact upload bundle/android/App.js
-
-        if [[ -n "$BUILDKITE_TAG" ]]; then
-          echo "--- :arrow_up: Upload Android source map"
-          node gutenberg/node_modules/react-native/scripts/compose-source-maps.js bundle/android/App.text.js.map bundle/android/App.js.map -o bundle/android/App.composed.js.map
-          buildkite-agent artifact upload bundle/android/App.composed.js.map
-        fi
+        buildkite-agent artifact upload bundle/android/App.composed.js.map
 
         echo "--- :ios: Build iOS bundle"
         npm run bundle:ios
 
-        echo "--- :arrow_up: Upload iOS bundle artifact"
+        echo "--- :arrow_up: Upload iOS bundle and source map artifacts"
         buildkite-agent artifact upload bundle/ios/App.js
+        buildkite-agent artifact upload bundle/ios/App.composed.js.map
         tar -czvf ios-assets.tar.gz -C ios-xcframework/Gutenberg/Resources assets/
         buildkite-agent artifact upload ios-assets.tar.gz
 
-        if [[ -n "$BUILDKITE_TAG" ]]; then
-          echo "--- :arrow_up: Upload iOS source map"
-          node gutenberg/node_modules/react-native/scripts/compose-source-maps.js bundle/ios/App.text.js.map bundle/ios/App.js.map -o bundle/ios/App.composed.js.map
-          buildkite-agent artifact upload bundle/ios/App.composed.js.map
-        fi
-
   - label: "Build Android RN Aztec & Publish to S3"
     depends_on:
       - lint

.gitignore

@@ -40,10 +40,7 @@ gen/
 build/
 build.log
 bundle/android/raw/*
-bundle/android/App.js
-bundle/android/App.js.map
-bundle/android/App.text.js
-bundle/android/App.text.js.map
+bundle/android/App.*
 bundle/ios/App.*
 bundle/ios/assets/gutenberg/packages/block-library/src/*
 

ios-xcframework/XCFrameworkScaffold.xcodeproj/project.pbxproj

@@ -7,6 +7,7 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
+		1D9EA4BE2B87A2570086B30F /* App.composed.js.map in Resources */ = {isa = PBXBuildFile; fileRef = 1D9EA4BD2B87A2470086B30F /* App.composed.js.map */; };
 		2F4F38292B86842C006EF573 /* external-style-overrides.css in Resources */ = {isa = PBXBuildFile; fileRef = 2F4F38282B86842C006EF573 /* external-style-overrides.css */; };
 		2F4F382B2B86844A006EF573 /* extra-localstorage-entries.js in Resources */ = {isa = PBXBuildFile; fileRef = 2F4F382A2B86844A006EF573 /* extra-localstorage-entries.js */; };
 		2F4F382D2B868457006EF573 /* remove-nux.js in Resources */ = {isa = PBXBuildFile; fileRef = 2F4F382C2B868457006EF573 /* remove-nux.js */; };
@@ -42,6 +43,7 @@
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
+		1D9EA4BD2B87A2470086B30F /* App.composed.js.map */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = "sourcecode.module-map"; name = App.composed.js.map; path = ../../../bundle/ios/App.composed.js.map; sourceTree = "<group>"; };
 		2F4F38282B86842C006EF573 /* external-style-overrides.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; name = "external-style-overrides.css"; path = "../../../resources/unsupported-block-editor/external-style-overrides.css"; sourceTree = "<group>"; };
 		2F4F382A2B86844A006EF573 /* extra-localstorage-entries.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; name = "extra-localstorage-entries.js"; path = "../../../resources/unsupported-block-editor/extra-localstorage-entries.js"; sourceTree = "<group>"; };
 		2F4F382C2B868457006EF573 /* remove-nux.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; name = "remove-nux.js"; path = "../../../resources/unsupported-block-editor/remove-nux.js"; sourceTree = "<group>"; };
@@ -99,6 +101,7 @@
 				2F4F382A2B86844A006EF573 /* extra-localstorage-entries.js */,
 				2F4F38282B86842C006EF573 /* external-style-overrides.css */,
 				3FA0C5802A1C8C9700600A9A /* App.js */,
+				1D9EA4BD2B87A2470086B30F /* App.composed.js.map */,
 				3F12363F29F6B21300AF54A4 /* content-functions.js */,
 				3F12364429F6B21300AF54A4 /* editor-behavior-overrides.js */,
 				3F12363D29F6B21300AF54A4 /* editor-style-overrides.css */,
@@ -273,6 +276,7 @@
 				3F12364C29F6B21300AF54A4 /* wp-bar-override.css in Resources */,
 				3F12365029F6B23300AF54A4 /* supported-blocks.json in Resources */,
 				3FA0C5812A1C8C9700600A9A /* App.js in Resources */,
+				1D9EA4BE2B87A2570086B30F /* App.composed.js.map in Resources */,
 				2F4F38292B86842C006EF573 /* external-style-overrides.css in Resources */,
 				3F12364729F6B21300AF54A4 /* insert-block.js in Resources */,
 			);

package.json

@@ -73,10 +73,10 @@
 		"bundle": "npm run clean && npm run bundle:js",
 		"prebundle:js": "npm run i18n:update",
 		"bundle:js": "npm run bundle:android && npm run bundle:ios",
-		"bundle:android": "npm run bundle:android:text && npm run bundle:android:bytecode",
+		"bundle:android": "npm run bundle:android:text && npm run bundle:android:bytecode && node gutenberg/node_modules/react-native/scripts/compose-source-maps.js bundle/android/App.text.js.map bundle/android/App.js.map -o bundle/android/App.composed.js.map",
 		"bundle:android:text": "mkdir -p bundle/android && npm run rn-bundle -- --platform android --dev false --entry-file ./index.js --assets-dest ./bundle/android --bundle-output ./bundle/android/App.text.js --sourcemap-output ./bundle/android/App.text.js.map",
 		"bundle:android:bytecode": "./gutenberg/node_modules/react-native/sdks/hermesc/`node -e \"const platform=require('os').platform();console.log(platform === 'darwin' ? 'osx-bin' : (platform === 'linux' ? 'linux64-bin' : (platform === 'win32' ? 'win64-bin' : 'unsupported-os')));\"`/hermesc -emit-binary -O -out bundle/android/App.js bundle/android/App.text.js -output-source-map",
-		"bundle:ios": "npm run bundle:ios:text && npm run bundle:ios:bytecode",
+		"bundle:ios": "npm run bundle:ios:text && npm run bundle:ios:bytecode && node gutenberg/node_modules/react-native/scripts/compose-source-maps.js bundle/ios/App.text.js.map bundle/ios/App.js.map -o bundle/ios/App.composed.js.map",
 		"bundle:ios:text": "mkdir -p bundle/ios && npm run rn-bundle -- --platform ios --dev false --entry-file ./index.js --assets-dest ./ios-xcframework/Gutenberg/Resources --bundle-output ./bundle/ios/App.text.js --sourcemap-output ./bundle/ios/App.text.js.map",
 		"bundle:ios:bytecode": "./gutenberg/node_modules/react-native/sdks/hermesc/`node -e \"const platform=require('os').platform();console.log(platform === 'darwin' ? 'osx-bin' : (platform === 'linux' ? 'linux64-bin' : (platform === 'win32' ? 'win64-bin' : 'unsupported-os')));\"`/hermesc -emit-binary -O -out bundle/ios/App.js bundle/ios/App.text.js -output-source-map",
 		"prewpandroid": "rm -Rf $TMPDIR/gbmobile-wpandroidfakernroot && mkdir $TMPDIR/gbmobile-wpandroidfakernroot && ln -s $(cd \"$(dirname \"../../../\")\"; pwd) $TMPDIR/gbmobile-wpandroidfakernroot/android",

src/errorLogging/index.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { logException } from '@wordpress/react-native-bridge';
+
+// Setting Error handler to send exception. This implemenetation is based on Sentry React Native SDK:
+// https://github.com/getsentry/sentry-react-native/blob/adfb66f16438dfd98f280307844778c7291b584b/src/js/integrations/reactnativeerrorhandlers.ts#L187-L262
+export default () => {
+	const errorUtils = global.ErrorUtils;
+	const defaultHandler =
+		errorUtils.getGlobalHandler && errorUtils.getGlobalHandler();
+
+	let handlingFatal = false;
+	errorUtils.setGlobalHandler( ( error, isFatal ) => {
+		// We want to handle fatals, but only in production mode.
+		const shouldHandleFatal = isFatal && ! __DEV__;
+		if ( shouldHandleFatal ) {
+			if ( handlingFatal ) {
+				// eslint-disable-next-line no-console
+				console.warn(
+					'Encountered multiple fatals in a row. The latest:',
+					error
+				);
+				return;
+			}
+			handlingFatal = true;
+		}
+
+		// TODO: Set severity and exception mechanism.
+		// https://github.com/getsentry/sentry-react-native/blob/adfb66f16438dfd98f280307844778c7291b584b/src/js/integrations/reactnativeerrorhandlers.ts#L235-L239
+
+		logException( error, {}, () => {
+			// Wait for the exception to be sent to host app.
+			defaultHandler( error, isFatal );
+		} );
+	} );
+};

src/setup.js

@@ -9,6 +9,7 @@ import { initialHtmlGutenberg } from '@wordpress/react-native-editor';
  */
 import initialHtml from './initial-html';
 import initAnalytics from './analytics';
+import initErrorLogging from './errorLogging';
 
 const setupHooks = () => {
 	// Hook triggered before the editor is rendered
@@ -75,4 +76,5 @@ const setupHooks = () => {
 export default () => {
 	initAnalytics();
 	setupHooks();
+	initErrorLogging();
 };