Framework: Capture and recover from application error

editor/assets/stylesheets/_z-index.scss

@@ -8,7 +8,7 @@ $z-layers: (
 	'.editor-visual-editor__block .wp-block-more:before': -1,
 	'.editor-visual-editor__block {core/image aligned left or right}': 20,
 	'.freeform-toolbar': 10,
-	'.editor-visual-editor__block-warning': 1,
+	'.editor-warning': 1,
 	'.editor-visual-editor__sibling-inserter': 1,
 	'.components-form-toggle__input': 1,
 	'.editor-format-list__menu': 1,

editor/components/error-boundary/index.js

@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Button, ClipboardButton } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { Warning } from '../';
+
+class ErrorBoundary extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.reboot = this.reboot.bind( this );
+		this.getStateText = this.getStateText.bind( this );
+
+		this.state = {
+			hasEncounteredError: false,
+		};
+	}
+
+	componentDidCatch() {
+		this.setState( { hasEncounteredError: true } );
+	}
+
+	reboot() {
+		this.props.onError( this.context.store.getState() );
+	}
+
+	getStateText() {
+		return JSON.stringify( this.context.store.getState() );
+	}
+
+	render() {
+		const { hasEncounteredError } = this.state;
+		if ( ! hasEncounteredError ) {
+			return this.props.children;
+		}
+
+		return (
+			<Warning>
+				<p>{ __(
+					'The editor has encountered an unexpected error.'
+				) }</p>
+				<p>
+					<Button onClick={ this.reboot } isLarge>
+						{ __( 'Attempt Recovery' ) }
+					</Button>
+					<ClipboardButton text={ this.getStateText } isLarge>
+						{ __( 'Copy State to Clipboard' ) }
+					</ClipboardButton>
+				</p>
+			</Warning>
+		);
+	}
+}
+
+ErrorBoundary.contextTypes = {
+	store: noop,
+};
+
+export default ErrorBoundary;

editor/components/index.js

@@ -35,7 +35,9 @@ export { default as WordCount } from './word-count';
 
 // Content Related Components
 export { default as BlockInspector } from './block-inspector';
+export { default as ErrorBoundary } from './error-boundary';
 export { default as Inserter } from './inserter';
+export { default as Warning } from './warning';
 
 // State Related Components
 export { default as EditorProvider } from './provider';

editor/components/provider/index.js

@@ -42,8 +42,13 @@ class EditorProvider extends Component {
 	constructor( props ) {
 		super( ...arguments );
 
-		const store = createReduxStore();
-		store.dispatch( setupEditor( props.post ) );
+		const store = createReduxStore( props.initialState );
+
+		// If initial state is passed, assume that we don't need to initialize,
+		// as in the case of an error recovery.
+		if ( ! props.initialState ) {
+			store.dispatch( setupEditor( props.post ) );
+		}
 
 		this.store = store;
 		this.settings = {

editor/modes/visual-editor/block-warning.js → editor/components/warning/index.js

@@ -3,13 +3,18 @@
  */
 import { Dashicon } from '@wordpress/components';
 
-function BlockWarning( { children } ) {
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+function Warning( { children } ) {
 	return (
-		<div className="editor-visual-editor__block-warning">
+		<div className="editor-warning">
 			<Dashicon icon="warning" />
 			{ children }
 		</div>
 	);
 }
 
-export default BlockWarning;
+export default Warning;

editor/components/warning/style.scss

@@ -0,0 +1,29 @@
+.editor-warning {
+	z-index: z-index( '.editor-warning' );
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate( -50%, -50% );
+	display: flex;
+	flex-direction: column;
+	justify-content: space-around;
+	align-items: center;
+	width: 96%;
+	max-width: 780px;
+	padding: 20px 20px 10px 20px;
+	background-color: $white;
+	border: 1px solid $light-gray-500;
+	text-align: center;
+	line-height: $default-line-height;
+	box-shadow: $shadow-popover;
+
+	.editor-visual-editor & p {
+		width: 100%;
+		font-family: $default-font;
+		font-size: $default-font-size;
+	}
+
+	.components-button {
+		margin: 0 #{ $item-spacing / 2 } 5px;
+	}
+}

editor/index.js

@@ -7,15 +7,15 @@ import 'moment-timezone/moment-timezone-utils';
 /**
  * WordPress dependencies
  */
-import { render } from '@wordpress/element';
+import { render, unmountComponentAtNode } from '@wordpress/element';
 import { settings as dateSettings } from '@wordpress/date';
 
 /**
  * Internal dependencies
  */
 import './assets/stylesheets/main.scss';
 import Layout from './layout';
-import { EditorProvider } from './components';
+import { EditorProvider, ErrorBoundary } from './components';
 import { initializeMetaBoxState } from './actions';
 
 export * from './components';
@@ -45,23 +45,49 @@ window.jQuery( document ).on( 'heartbeat-tick', ( event, response ) => {
 	}
 } );
 
+/**
+ * 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 {*}       initialState Initial editor state to hydrate
+ */
+export function recreateEditorInstance( target, initialState ) {
+	unmountComponentAtNode( target );
+
+	const reboot = recreateEditorInstance.bind( null, target );
+
+	render(
+		<EditorProvider initialState={ initialState }>
+			<ErrorBoundary onError={ reboot }>
+				<Layout />
+			</ErrorBoundary>
+		</EditorProvider>,
+		target
+	);
+}
+
 /**
  * Initializes and returns an instance of Editor.
  *
  * The return value of this function is not necessary if we change where we
  * call createEditorInstance(). This is due to metaBox timing.
  *
- * @param {String}  id       Unique identifier for editor instance
- * @param {Object}  post     API entity for post to edit
- * @param {?Object} settings Editor settings object
- * @return {Object} Editor interface. Currently supports metabox initialization.
+ * @param  {String}  id       Unique identifier for editor instance
+ * @param  {Object}  post     API entity for post to edit
+ * @param  {?Object} settings Editor settings object
+ * @return {Object}           Editor interface
  */
 export function createEditorInstance( id, post, settings ) {
 	const target = document.getElementById( id );
+	const reboot = recreateEditorInstance.bind( null, target );
 
 	const provider = render(
 		<EditorProvider settings={ settings } post={ post }>
-			<Layout />
+			<ErrorBoundary onError={ reboot }>
+				<Layout />
+			</ErrorBoundary>
 		</EditorProvider>,
 		target
 	);

editor/modes/visual-editor/block-crash-warning.js

@@ -6,14 +6,14 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import BlockWarning from './block-warning';
+import { Warning } from '../../components';
 
 const warning = (
-	<BlockWarning>
+	<Warning>
 		<p>{ __(
 			'This block has suffered from an unhandled error and cannot be previewed.'
 		) }</p>
-	</BlockWarning>
+	</Warning>
 );
 
 export default () => warning;

editor/modes/visual-editor/invalid-block-warning.js

@@ -12,7 +12,7 @@ import { Button } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import BlockWarning from './block-warning';
+import { Warning } from '../../components';
 import {
 	getBlockType,
 	getUnknownTypeHandlerName,
@@ -31,7 +31,7 @@ function InvalidBlockWarning( { ignoreInvalid, switchToBlockType } ) {
 	const switchTo = ( blockType ) => () => switchToBlockType( blockType );
 
 	return (
-		<BlockWarning>
+		<Warning>
 			<p>{ defaultBlockType && htmlBlockType && sprintf( __(
 				'This block appears to have been modified externally. ' +
 				'Overwrite the external changes or Convert to %s or %s to keep ' +
@@ -67,7 +67,7 @@ function InvalidBlockWarning( { ignoreInvalid, switchToBlockType } ) {
 					</Button>
 				) }
 			</p>
-		</BlockWarning>
+		</Warning>
 	);
 }
 

editor/modes/visual-editor/style.scss

@@ -51,7 +51,7 @@
 		position: relative;
 		min-height: 250px;
 
-		> :not( .editor-visual-editor__block-warning ) {
+		> :not( .editor-warning ) {
 			pointer-events: none;
 			user-select: none;
 		}
@@ -421,40 +421,6 @@
 	height: 20px;
 }
 
-.editor-visual-editor__block-warning {
-	z-index: z-index( '.editor-visual-editor__block-warning' );
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate( -50%, -50% );
-	display: flex;
-	flex-direction: column;
-	justify-content: space-around;
-	align-items: center;
-	width: 96%;
-	max-width: 780px;
-	padding: 20px 20px 10px 20px;
-	background-color: $white;
-	border: 1px solid $light-gray-500;
-	text-align: center;
-	line-height: $default-line-height;
-	box-shadow: $shadow-popover;
-
-	p {
-		width: 100%;
-		font-family: $default-font;
-		font-size: $default-font-size;
-	}
-
-	.button + .button {
-		margin-left: $item-spacing;
-	}
-}
-
-.visual-editor__invalid-block-warning-buttons .components-button {
-	margin-bottom: 5px;
-}
-
 .editor-visual-editor__block .blocks-visual-editor__block-html-textarea {
 	display: block;
 	margin: 0;

editor/store.js

@@ -21,9 +21,10 @@ const GUTENBERG_PREFERENCES_KEY = `GUTENBERG_PREFERENCES_${ window.userSettings.
 /**
  * Creates a new instance of a Redux store.
  *
- * @return {Redux.Store} Redux store
+ * @param  {?*}          preloadedState Optional initial state
+ * @return {Redux.Store}                Redux store
  */
-function createReduxStore() {
+function createReduxStore( preloadedState ) {
 	const enhancers = [
 		applyMiddleware( multi, refx( effects ) ),
 		storePersist( 'preferences', GUTENBERG_PREFERENCES_KEY ),
@@ -33,7 +34,7 @@ function createReduxStore() {
 		enhancers.push( window.__REDUX_DEVTOOLS_EXTENSION__() );
 	}
 
-	const store = createStore( reducer, flowRight( enhancers ) );
+	const store = createStore( reducer, preloadedState, flowRight( enhancers ) );
 
 	return store;
 }

element/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { createElement, Component, cloneElement, Children } from 'react';
-import { render, findDOMNode, createPortal } from 'react-dom';
+import { render, findDOMNode, createPortal, unmountComponentAtNode } from 'react-dom';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { isString } from 'lodash';
 
@@ -27,6 +27,13 @@ export { createElement };
  */
 export { render };
 
+/**
+ * Removes any mounted element from the target DOM node.
+ *
+ * @param {Element} target DOM node in which element is to be removed
+ */
+export { unmountComponentAtNode };
+
 /**
  * A base class to create WordPress Components (Refs, state and lifecycle hooks)
  */