Add error boundary to customize widgets

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';
@@ -16,6 +17,7 @@ export default function CustomizeWidgets( {
 	api,
 	sidebarControls,
 	blockEditorSettings,
+	onError,
 } ) {
 	const [ activeSidebarControl, setActiveSidebarControl ] = useState( null );
 	const parentContainer = document.getElementById(
@@ -42,13 +44,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 onError={ onError }>
+				<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,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="customize-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/customize-widgets/src/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { render } from '@wordpress/element';
+import { render, unmountComponentAtNode } from '@wordpress/element';
 import {
 	registerCoreBlocks,
 	__experimentalGetCoreBlocks,
@@ -26,6 +26,25 @@ const { wp } = window;
 const DISABLED_BLOCKS = [ 'core/more', 'core/block', 'core/freeform' ];
 const ENABLE_EXPERIMENTAL_FSE_BLOCKS = false;
 
+export function reinitializeEditor( target, sidebarControls, settings ) {
+	unmountComponentAtNode( target );
+	const reboot = reinitializeEditor.bind(
+		null,
+		target,
+		sidebarControls,
+		settings
+	);
+	render(
+		<CustomizeWidgets
+			api={ wp.customize }
+			sidebarControls={ sidebarControls }
+			blockEditorSettings={ settings }
+			onError={ reboot }
+		/>,
+		target
+	);
+}
+
 /**
  * Initializes the widgets block editor in the customizer.
  *
@@ -62,6 +81,7 @@ export function initialize( editorName, blockEditorSettings ) {
 	wp.customize.controlConstructor.sidebar_block_editor = SidebarControl;
 
 	const container = document.createElement( 'div' );
+	container.classList.add( 'test' );
 	document.body.appendChild( container );
 
 	wp.customize.bind( 'ready', () => {
@@ -72,11 +92,19 @@ export function initialize( editorName, blockEditorSettings ) {
 			}
 		} );
 
+		const reboot = reinitializeEditor.bind(
+			null,
+			container,
+			sidebarControls,
+			blockEditorSettings
+		);
+
 		render(
 			<CustomizeWidgets
 				api={ wp.customize }
 				sidebarControls={ sidebarControls }
 				blockEditorSettings={ blockEditorSettings }
+				onError={ reboot }
 			/>,
 			container
 		);