Add error boundaries to widget screens (#33771)

* Add error boundary to edit widgets screen

* Add error boundary to customize widgets

* Refactor sidebar controls provider to application level so that its state is not lost when re-initializing

* Revert "Refactor sidebar controls provider to application level so that its state is not lost when re-initializing"

This reverts commit 7d607ff.

* Remove rebootability from customize widgets

* Remove debug code

Author: talldan

packages/customize-widgets/src/components/customize-widgets/index.js

@@ -7,6 +7,7 @@ import { SlotFillProvider, Popover } from '@wordpress/components';
 /**
  * Internal dependencies
  */
+import ErrorBoundary from '../error-boundary';
 import SidebarBlockEditor from '../sidebar-block-editor';
 import FocusControl from '../focus-control';
 import SidebarControls from '../sidebar-controls';
@@ -42,13 +43,15 @@ export default function CustomizeWidgets( {
 	const activeSidebar =
 		activeSidebarControl &&
 		createPortal(
-			<SidebarBlockEditor
-				key={ activeSidebarControl.id }
-				blockEditorSettings={ blockEditorSettings }
-				sidebar={ activeSidebarControl.sidebarAdapter }
-				inserter={ activeSidebarControl.inserter }
-				inspector={ activeSidebarControl.inspector }
-			/>,
+			<ErrorBoundary>
+				<SidebarBlockEditor
+					key={ activeSidebarControl.id }
+					blockEditorSettings={ blockEditorSettings }
+					sidebar={ activeSidebarControl.sidebarAdapter }
+					inserter={ activeSidebarControl.inserter }
+					inspector={ activeSidebarControl.inspector }
+				/>
+			</ErrorBoundary>,
 			activeSidebarControl.container[ 0 ]
 		);
 

packages/customize-widgets/src/components/error-boundary/index.js

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { Warning } from '@wordpress/block-editor';
+import { useCopyToClipboard } from '@wordpress/compose';
+
+function CopyButton( { text, children } ) {
+	const ref = useCopyToClipboard( text );
+	return (
+		<Button variant="secondary" ref={ ref }>
+			{ children }
+		</Button>
+	);
+}
+
+export default class ErrorBoundary extends Component {
+	constructor() {
+		super( ...arguments );
+		this.state = {
+			error: null,
+		};
+	}
+
+	componentDidCatch( error ) {
+		this.setState( { error } );
+	}
+
+	render() {
+		const { error } = this.state;
+		if ( ! error ) {
+			return this.props.children;
+		}
+
+		return (
+			<Warning
+				className="customize-widgets-error-boundary"
+				actions={ [
+					<CopyButton key="copy-error" text={ error.stack }>
+						{ __( 'Copy Error' ) }
+					</CopyButton>,
+				] }
+			>
+				{ __( 'The editor has encountered an unexpected error.' ) }
+			</Warning>
+		);
+	}
+}

packages/edit-widgets/src/components/error-boundary/index.js

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { Warning } from '@wordpress/block-editor';
+import { useCopyToClipboard } from '@wordpress/compose';
+
+function CopyButton( { text, children } ) {
+	const ref = useCopyToClipboard( text );
+	return (
+		<Button variant="secondary" ref={ ref }>
+			{ children }
+		</Button>
+	);
+}
+
+export default class ErrorBoundary extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.reboot = this.reboot.bind( this );
+
+		this.state = {
+			error: null,
+		};
+	}
+
+	componentDidCatch( error ) {
+		this.setState( { error } );
+	}
+
+	reboot() {
+		this.props.onError();
+	}
+
+	render() {
+		const { error } = this.state;
+		if ( ! error ) {
+			return this.props.children;
+		}
+
+		return (
+			<Warning
+				className="edit-widgets-error-boundary"
+				actions={ [
+					<Button
+						key="recovery"
+						onClick={ this.reboot }
+						variant="secondary"
+					>
+						{ __( 'Attempt Recovery' ) }
+					</Button>,
+					<CopyButton key="copy-error" text={ error.stack }>
+						{ __( 'Copy Error' ) }
+					</CopyButton>,
+				] }
+			>
+				{ __( 'The editor has encountered an unexpected error.' ) }
+			</Warning>
+		);
+	}
+}

packages/edit-widgets/src/components/error-boundary/style.scss

@@ -0,0 +1,7 @@
+.edit-widgets-error-boundary {
+	margin: auto;
+	max-width: 780px;
+	padding: 20px;
+	margin-top: 60px;
+	box-shadow: $shadow-modal;
+}

packages/edit-widgets/src/components/layout/index.js

@@ -7,24 +7,27 @@ import { PluginArea } from '@wordpress/plugins';
 /**
  * Internal dependencies
  */
+import ErrorBoundary from '../error-boundary';
 import WidgetAreasBlockEditorProvider from '../widget-areas-block-editor-provider';
 import Sidebar from '../sidebar';
 import Interface from './interface';
 import UnsavedChangesWarning from './unsaved-changes-warning';
 import WelcomeGuide from '../welcome-guide';
 
-function Layout( { blockEditorSettings } ) {
+function Layout( { blockEditorSettings, onError } ) {
 	return (
-		<WidgetAreasBlockEditorProvider
-			blockEditorSettings={ blockEditorSettings }
-		>
-			<Interface blockEditorSettings={ blockEditorSettings } />
-			<Sidebar />
-			<Popover.Slot />
-			<PluginArea />
-			<UnsavedChangesWarning />
-			<WelcomeGuide />
-		</WidgetAreasBlockEditorProvider>
+		<ErrorBoundary onError={ onError }>
+			<WidgetAreasBlockEditorProvider
+				blockEditorSettings={ blockEditorSettings }
+			>
+				<Interface blockEditorSettings={ blockEditorSettings } />
+				<Sidebar />
+				<Popover.Slot />
+				<PluginArea />
+				<UnsavedChangesWarning />
+				<WelcomeGuide />
+			</WidgetAreasBlockEditorProvider>
+		</ErrorBoundary>
 	);
 }
 

packages/edit-widgets/src/index.js

@@ -6,7 +6,7 @@ import {
 	unstable__bootstrapServerSideBlockDefinitions, // eslint-disable-line camelcase
 	setFreeformContentHandlerName,
 } from '@wordpress/blocks';
-import { render } from '@wordpress/element';
+import { render, unmountComponentAtNode } from '@wordpress/element';
 import {
 	registerCoreBlocks,
 	__experimentalGetCoreBlocks,
@@ -36,13 +36,32 @@ const disabledBlocks = [
 	...( ! ALLOW_REUSABLE_BLOCKS && [ 'core/block' ] ),
 ];
 
+/**
+ * Reinitializes the editor after the user chooses to reboot the editor after
+ * an unhandled error occurs, replacing previously mounted editor element using
+ * an initial state from prior to the crash.
+ *
+ * @param {Element} target   DOM node in which editor is rendered.
+ * @param {?Object} settings Editor settings object.
+ */
+export function reinitializeEditor( target, settings ) {
+	unmountComponentAtNode( target );
+	const reboot = reinitializeEditor.bind( null, target, settings );
+	render(
+		<Layout blockEditorSettings={ settings } onError={ reboot } />,
+		target
+	);
+}
+
 /**
  * Initializes the block editor in the widgets screen.
  *
  * @param {string} id       ID of the root element to render the screen in.
  * @param {Object} settings Block editor settings.
  */
 export function initialize( id, settings ) {
+	const target = document.getElementById( id );
+	const reboot = reinitializeEditor.bind( null, target, settings );
 	const coreBlocks = __experimentalGetCoreBlocks().filter( ( block ) => {
 		return ! (
 			disabledBlocks.includes( block.name ) ||
@@ -70,8 +89,8 @@ export function initialize( id, settings ) {
 	// see: https://github.com/WordPress/gutenberg/issues/33097
 	setFreeformContentHandlerName( 'core/html' );
 	render(
-		<Layout blockEditorSettings={ settings } />,
-		document.getElementById( id )
+		<Layout blockEditorSettings={ settings } onError={ reboot } />,
+		target
 	);
 }
 

packages/edit-widgets/src/style.scss

@@ -1,6 +1,7 @@
 @import "../../interface/src/style.scss";
 
 @import "./blocks/widget-area/editor.scss";
+@import "./components/error-boundary/style.scss";
 @import "./components/header/style.scss";
 @import "./components/keyboard-shortcut-help-modal/style.scss";
 @import "./components/more-menu/style.scss";