[RNMobile] Add error boundary components and exception logging

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

@@ -0,0 +1,43 @@
+/**
+ * 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,
+				block_name: blockName,
+			},
+			isHandled: true,
+			handledBy: 'Block-level Error Boundary',
+		} );
+	}
+
+	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 = [];
 
@@ -139,14 +141,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/block-editor/src/components/warning/index.native.js

@@ -16,33 +16,36 @@ import { normalizeIconObject } from '@wordpress/blocks';
 import styles from './style.scss';
 
 function Warning( {
+	actions,
 	title,
 	message,
 	icon,
 	iconClass,
 	preferredColorScheme,
 	getStylesFromColorScheme,
+	containerStyle: extraContainerStyle,
+	titleStyle: extraTitleStyle,
+	messageStyle: extraMessageStyle,
 	...viewProps
 } ) {
 	icon = icon && normalizeIconObject( icon );
 	const internalIconClass = 'warning-icon' + '-' + preferredColorScheme;
-	const titleStyle = getStylesFromColorScheme(
-		styles.title,
-		styles.titleDark
-	);
-	const messageStyle = getStylesFromColorScheme(
-		styles.message,
-		styles.messageDark
-	);
+
+	const containerStyle = [
+		getStylesFromColorScheme( styles.container, styles.containerDark ),
+		extraContainerStyle,
+	];
+	const titleStyle = [
+		getStylesFromColorScheme( styles.title, styles.titleDark ),
+		extraTitleStyle,
+	];
+	const messageStyle = [
+		getStylesFromColorScheme( styles.message, styles.messageDark ),
+		extraMessageStyle,
+	];
 
 	return (
-		<View
-			style={ getStylesFromColorScheme(
-				styles.container,
-				styles.containerDark
-			) }
-			{ ...viewProps }
-		>
+		<View style={ containerStyle } { ...viewProps }>
 			{ icon && (
 				<View style={ styles.icon }>
 					<Icon
@@ -53,6 +56,7 @@ function Warning( {
 			) }
 			{ title && <Text style={ titleStyle }>{ title }</Text> }
 			{ message && <Text style={ messageStyle }>{ message }</Text> }
+			{ actions }
 		</View>
 	);
 }

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,122 @@
+/**
+ * External dependencies
+ */
+import { Text, TouchableOpacity, View } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { select } from '@wordpress/data';
+import { Warning } from '@wordpress/block-editor';
+import { logException } from '@wordpress/react-native-bridge';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import styles from './style.scss';
+
+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, label, accessibilityLabel, accessibilityHint } ) {
+	const containerStyle = usePreferredColorSchemeStyle(
+		styles[ 'copy-button__container' ],
+		styles[ 'copy-button__container--dark' ]
+	);
+	const textStyle = usePreferredColorSchemeStyle(
+		styles[ 'copy-button__text' ],
+		styles[ 'copy-button__text--dark' ]
+	);
+
+	return (
+		<TouchableOpacity
+			activeOpacity={ 0.5 }
+			accessibilityLabel={ accessibilityLabel }
+			style={ containerStyle }
+			accessibilityRole={ 'button' }
+			accessibilityHint={ accessibilityHint }
+			onPress={ () => {
+				Clipboard.setString(
+					typeof text === 'function' ? text() : text || ''
+				);
+			} }
+		>
+			<Text style={ textStyle }>{ label }</Text>
+		</TouchableOpacity>
+	);
+}
+
+class ErrorBoundary extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.state = {
+			error: null,
+		};
+	}
+
+	componentDidCatch( error ) {
+		logException( error, {
+			context: {
+				component_stack: error.componentStack,
+			},
+			isHandled: true,
+			handledBy: 'Editor-level Error Boundary',
+		} );
+	}
+
+	static getDerivedStateFromError( error ) {
+		return { error };
+	}
+
+	render() {
+		const { error } = this.state;
+		if ( ! error ) {
+			return this.props.children;
+		}
+
+		const actions = (
+			<View style={ styles[ 'error-boundary__actions-container' ] }>
+				<CopyButton
+					label={ __( 'Copy Post Text' ) }
+					accessibilityLabel={ __( 'Button to copy post text' ) }
+					accessibilityHint={ __( 'Tap here to copy post text' ) }
+					text={ getContent }
+				/>
+				<CopyButton
+					label={ __( 'Copy Error' ) }
+					accessibilityLabel={ __( 'Button to copy error' ) }
+					accessibilityHint={ __( 'Tap here to copy error' ) }
+					text={ error.stack }
+				/>
+			</View>
+		);
+
+		return (
+			<Warning
+				actions={ actions }
+				message={ __(
+					'The editor has encountered an unexpected error.'
+				) }
+				containerStyle={ styles[ 'error-boundary__container' ] }
+				messageStyle={ styles[ 'error-boundary__message' ] }
+			/>
+		);
+	}
+}
+
+export default ErrorBoundary;

packages/editor/src/components/error-boundary/style.native.scss

@@ -0,0 +1,39 @@
+.error-boundary__container {
+	flex-grow: 1;
+	justify-content: flex-start;
+}
+
+.error-boundary__message {
+	font-size: 16;
+}
+
+.error-boundary__actions-container {
+	margin-top: 16px;
+	justify-content: center;
+	flex-direction: row;
+}
+
+.copy-button__container {
+	background-color: $light-primary;
+	border-radius: 3px;
+	padding: $grid-unit $grid-unit-20;
+	margin-top: 8px;
+	margin-left: 8px;
+	margin-right: 8px;
+}
+
+.copy-button__container--dark {
+	color: $background-dark-secondary;
+	background-color: $gray-20;
+}
+
+.copy-button__text {
+	text-align: center;
+	color: $white;
+	font-size: 16;
+	font-weight: 400;
+}
+
+.copy-button__text--dark {
+	color: $black;
+}

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/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java

@@ -4,17 +4,16 @@
 
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
-import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.bridge.WritableNativeMap;
 
+import org.wordpress.mobile.WPAndroidGlue.GutenbergJsException;
 import org.wordpress.mobile.WPAndroidGlue.MediaOption;
 import org.wordpress.mobile.WPAndroidGlue.RequestExecutor;
 
 import java.util.ArrayList;
 import java.util.List;
 
 public interface GutenbergBridgeJS2Parent extends RequestExecutor {
-
     void responseHtml(String title, String html, boolean changed, ReadableMap contentInfo);
 
     void editorDidMount(ReadableArray unsupportedBlockNames);
@@ -65,6 +64,10 @@ interface ConnectionStatusCallback {
         void onRequestConnectionStatus(boolean isConnected);
     }
 
+    interface LogExceptionCallback {
+        void onLogException(boolean success);
+    }
+
     // Ref: https://github.com/facebook/react-native/blob/HEAD/Libraries/polyfills/console.js#L376
     enum LogLevel {
         TRACE(0),
@@ -178,4 +181,6 @@ void gutenbergDidRequestUnsupportedBlockFallback(ReplaceUnsupportedBlockCallback
     void toggleRedoButton(boolean isDisabled);
 
     void requestConnectionStatus(ConnectionStatusCallback connectionStatusCallback);
+
+    void logException(GutenbergJsException exception, LogExceptionCallback logExceptionCallback);
 }