[RNMobile] Add error boundary components and exception logging

packages/block-editor/src/components/block-list/block-crash-boundary.native.js

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { logException } from '@wordpress/react-native-bridge';
+
+class BlockCrashBoundary extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.state = {
+			error: null,
+		};
+	}
+
+	static getDerivedStateFromError( error ) {
+		return { error };
+	}
+
+	componentDidCatch( error ) {
+		const { blockName } = this.props;
+
+		logException( error, {
+			context: {
+				component_stack: error.componentStack,
+				error_boundary_level: 'block',
+				block_name: blockName,
+			},
+		} );
+	}
+
+	render() {
+		const { error } = this.state;
+		if ( ! error ) {
+			return this.props.children;
+		}
+
+		return this.props.fallback;
+	}
+}
+
+export default BlockCrashBoundary;

packages/block-editor/src/components/block-list/block-crash-warning.native.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Warning from '../warning';
+
+const warning = (
+	<Warning
+		message={ __(
+			'This block has encountered an error and cannot be previewed.'
+		) }
+	/>
+);
+
+export default () => warning;

packages/block-editor/src/components/block-list/block.native.js

@@ -49,6 +49,8 @@ import { useLayout } from './layout';
 import useScrollUponInsertion from './use-scroll-upon-insertion';
 import { useSettings } from '../use-settings';
 import { unlock } from '../../lock-unlock';
+import BlockCrashBoundary from './block-crash-boundary';
+import BlockCrashWarning from './block-crash-warning';
 
 const EMPTY_ARRAY = [];
 
@@ -141,14 +143,19 @@ function BlockWrapper( {
 				isSelected={ isSelected }
 				name={ name }
 			/>
-			<BlockDraggable
-				clientId={ clientId }
-				draggingClientId={ draggingClientId }
-				enabled={ draggingEnabled }
-				testID="draggable-trigger-content"
+			<BlockCrashBoundary
+				blockName={ name }
+				fallback={ <BlockCrashWarning /> }
 			>
-				{ children }
-			</BlockDraggable>
+				<BlockDraggable
+					clientId={ clientId }
+					draggingClientId={ draggingClientId }
+					enabled={ draggingEnabled }
+					testID="draggable-trigger-content"
+				>
+					{ children }
+				</BlockDraggable>
+			</BlockCrashBoundary>
 		</Pressable>
 	);
 }

packages/edit-post/src/editor.native.js

@@ -9,7 +9,11 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { EditorProvider, store as editorStore } from '@wordpress/editor';
+import {
+	EditorProvider,
+	ErrorBoundary,
+	store as editorStore,
+} from '@wordpress/editor';
 import { parse, serialize } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
@@ -143,7 +147,9 @@ class Editor extends Component {
 						useSubRegistry={ false }
 						{ ...props }
 					>
-						<Layout setTitleRef={ this.setTitleRef } />
+						<ErrorBoundary>
+							<Layout setTitleRef={ this.setTitleRef } />
+						</ErrorBoundary>
 					</EditorProvider>
 				</SlotFillProvider>
 			</GestureHandlerRootView>

packages/editor/src/components/error-boundary/index.native.js

@@ -0,0 +1,86 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { select } from '@wordpress/data';
+import { Warning } from '@wordpress/block-editor';
+import { useCopyToClipboard } from '@wordpress/compose';
+import { logException } from '@wordpress/react-native-bridge';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+function getContent() {
+	try {
+		// While `select` in a component is generally discouraged, it is
+		// used here because it (a) reduces the chance of data loss in the
+		// case of additional errors by performing a direct retrieval and
+		// (b) avoids the performance cost associated with unnecessary
+		// content serialization throughout the lifetime of a non-erroring
+		// application.
+		return select( editorStore ).getEditedPostContent();
+	} catch ( error ) {}
+}
+
+function CopyButton( { text, children } ) {
+	const ref = useCopyToClipboard( text );
+	return (
+		<Button variant="secondary" ref={ ref }>
+			{ children }
+		</Button>
+	);
+}
+
+class ErrorBoundary extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.state = {
+			error: null,
+		};
+	}
+
+	componentDidCatch( error ) {
+		logException( error, {
+			context: {
+				component_stack: error.componentStack,
+				error_boundary_level: 'editor',
+			},
+		} );
+	}
+
+	static getDerivedStateFromError( error ) {
+		return { error };
+	}
+
+	render() {
+		const { error } = this.state;
+		if ( ! error ) {
+			return this.props.children;
+		}
+
+		const actions = [
+			<CopyButton key="copy-post" text={ getContent }>
+				{ __( 'Copy Post Text' ) }
+			</CopyButton>,
+			<CopyButton key="copy-error" text={ error.stack }>
+				{ __( 'Copy Error' ) }
+			</CopyButton>,
+		];
+
+		return (
+			<Warning
+				actions={ actions }
+				message={ __(
+					'The editor has encountered an unexpected error.'
+				) }
+			/>
+		);
+	}
+}
+
+export default ErrorBoundary;

packages/editor/src/components/index.native.js

@@ -10,5 +10,6 @@ export { default as EditorProvider } from './provider';
 // Other Components.
 export { default as EditorHelpTopics } from './editor-help';
 export { default as OfflineStatus } from './offline-status';
+export { default as ErrorBoundary } from './error-boundary';
 
 export * from './deprecated';

packages/react-native-bridge/index.js

@@ -8,6 +8,11 @@ import { NativeModules, NativeEventEmitter, Platform } from 'react-native';
  */
 import RCTAztecView from '@wordpress/react-native-aztec';
 
+/**
+ * Internal dependencies
+ */
+import parseException from './lib/parseException';
+
 const { RNReactNativeGutenbergBridge } = NativeModules;
 const isIOS = Platform.OS === 'ios';
 const isAndroid = Platform.OS === 'android';
@@ -529,4 +534,31 @@ export function toggleRedoButton( isDisabled ) {
 	RNReactNativeGutenbergBridge.toggleRedoButton( isDisabled );
 }
 
+/**
+ * Log exception to host app's crash logging service.
+ * @param {Object}   exception       Exception object
+ * @param {Object}   [extra]         Extra parameters to include in the exception (e.g. the block where the exception occurred)
+ * @param {Object}   [extra.context] Context of the exception.
+ * @param {Object}   [extra.tags]    Tags to associate with the exception.
+ * @param {Function} [callback]      Callback triggered when the exception is sent.
+ */
+export function logException(
+	exception,
+	{ context, tags } = { context: {}, tags: {} },
+	callback = () => {}
+) {
+	const parsedException = parseException( exception, { context, tags } );
+
+	// Only log exceptions in production.
+	// eslint-disable-next-line no-undef
+	if ( __DEV__ ) {
+		// eslint-disable-next-line no-console
+		console.info( 'Log exception', parsedException );
+		callback();
+		return;
+	}
+
+	RNReactNativeGutenbergBridge.logException( parsedException, callback );
+}
+
 export default RNReactNativeGutenbergBridge;

packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift

@@ -284,6 +284,8 @@ public protocol GutenbergBridgeDelegate: AnyObject {
     func gutenbergDidRequestToggleRedoButton(_ isDisabled: Bool)
 
     func gutenbergDidRequestConnectionStatus() -> Bool
+
+    func gutenbergDidRequestLogException(_ exception: [AnyHashable: Any], with callback: @escaping () -> Void)
 }
 
 // MARK: - Optional GutenbergBridgeDelegate methods

packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.m

@@ -43,5 +43,6 @@ @interface RCT_EXTERN_MODULE(RNReactNativeGutenbergBridge, NSObject)
 RCT_EXTERN_METHOD(toggleUndoButton:(BOOL)isDisabled)
 RCT_EXTERN_METHOD(toggleRedoButton:(BOOL)isDisabled)
 RCT_EXTERN_METHOD(requestConnectionStatus:(RCTResponseSenderBlock)callback)
+RCT_EXTERN_METHOD(logException:(NSDictionary *)exception callback:(RCTResponseSenderBlock)callback)
 
 @end

packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift

@@ -426,6 +426,13 @@ public class RNReactNativeGutenbergBridge: RCTEventEmitter {
 	func requestConnectionStatus(_ callback: @escaping RCTResponseSenderBlock) {
 		callback([self.delegate?.gutenbergDidRequestConnectionStatus() ?? true])
 	}
+
+    @objc
+	func logException(_ exception: [AnyHashable: Any], callback: @escaping RCTResponseSenderBlock) {
+        self.delegate?.gutenbergDidRequestLogException(exception) {
+            callback(nil)
+        }
+	}
 }
 
 // MARK: - RCTBridgeModule delegate