Add site editor initial redirect error handling

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

@@ -3,18 +3,11 @@
  */
 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>
-	);
-}
+/**
+ * Internal dependencies
+ */
+import ErrorBoundaryWarning from './warning';
 
 export default class ErrorBoundary extends Component {
 	constructor() {
@@ -42,23 +35,13 @@ export default class ErrorBoundary extends Component {
 		}
 
 		return (
-			<Warning
-				className="editor-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>
+			<ErrorBoundaryWarning
+				message={ __(
+					'The editor has encountered an unexpected error.'
+				) }
+				error={ error }
+				reboot={ this.reboot }
+			/>
 		);
 	}
 }

packages/edit-site/src/components/error-boundary/warning.js

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+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 function ErrorBoundaryWarning( {
+	message,
+	error,
+	reboot,
+	dashboardLink,
+} ) {
+	const actions = [];
+
+	if ( reboot ) {
+		actions.push(
+			<Button key="recovery" onClick={ reboot } variant="secondary">
+				{ __( 'Attempt Recovery' ) }
+			</Button>
+		);
+	}
+
+	if ( error ) {
+		actions.push(
+			<CopyButton key="copy-error" text={ error.stack }>
+				{ __( 'Copy Error' ) }
+			</CopyButton>
+		);
+	}
+
+	if ( dashboardLink ) {
+		actions.push(
+			<Button
+				key="back-to-dashboard"
+				variant="secondary"
+				href={ dashboardLink }
+			>
+				{ __( 'Back to dashboard' ) }
+			</Button>
+		);
+	}
+
+	return (
+		<Warning className="editor-error-boundary" actions={ actions }>
+			{ message }
+		</Warning>
+	);
+}

packages/edit-site/src/components/routes/redirect-to-homepage.js

@@ -20,10 +20,17 @@ function getNeedsHomepageRedirect( params ) {
 	);
 }
 
+/**
+ * Returns the postType and postId of the default homepage.
+ *
+ * @param {string} siteUrl The URL of the site.
+ * @return {Object} An object containing the postType and postId properties
+ *                  or `undefined` if a homepage could not be found.
+ */
 async function getHomepageParams( siteUrl ) {
 	const siteSettings = await apiFetch( { path: '/wp/v2/settings' } );
 	if ( ! siteSettings ) {
-		return;
+		throw new Error( '`getHomepageParams`: unable to load site settings.' );
 	}
 
 	const {
@@ -44,11 +51,27 @@ async function getHomepageParams( siteUrl ) {
 	// (packages/core-data/src/resolvers.js)
 	const template = await window
 		.fetch( addQueryArgs( siteUrl, { '_wp-find-template': true } ) )
-		.then( ( res ) => res.json() )
-		.then( ( { data } ) => data );
+		.then( ( response ) => {
+			if ( ! response.ok ) {
+				throw new Error(
+					`\`getHomepageParams\`: HTTP status error, ${ response.status } ${ response.statusText }`
+				);
+			}
+
+			return response.json();
+		} )
+		.then( ( { data } ) => {
+			if ( data.message ) {
+				throw new Error(
+					`\`getHomepageParams\`: REST API error, ${ data.message }`
+				);
+			}
+
+			return data;
+		} );
 
 	if ( ! template?.id ) {
-		return;
+		throw new Error( '`getHomepageParams`: unable to find home template.' );
 	}
 
 	return {

packages/edit-site/src/index.js

@@ -13,6 +13,7 @@ import {
 	__experimentalFetchUrlData as fetchUrlData,
 } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
+import { __ } from '@wordpress/i18n';
 import { store as viewportStore } from '@wordpress/viewport';
 import { getQueryArgs } from '@wordpress/url';
 
@@ -24,6 +25,7 @@ import { store as editSiteStore } from './store';
 import EditSiteApp from './components/app';
 import getIsListPage from './utils/get-is-list-page';
 import redirectToHomepage from './components/routes/redirect-to-homepage';
+import ErrorBoundaryWarning from './components/error-boundary/warning';
 
 /**
  * Reinitializes the editor after the user chooses to reboot the editor after
@@ -38,7 +40,21 @@ export async function reinitializeEditor( target, settings ) {
 	// define what's being edited. When visiting via the dashboard link, these
 	// won't be present. Do a client side redirect to the 'homepage' if that's
 	// the case.
-	await redirectToHomepage( settings.siteUrl );
+	try {
+		await redirectToHomepage( settings.siteUrl );
+	} catch ( error ) {
+		render(
+			<ErrorBoundaryWarning
+				message={ __(
+					'The editor is unable to find a block template for the homepage.'
+				) }
+				error={ error }
+				dashboardLink="index.php"
+			/>,
+			target
+		);
+		return;
+	}
 
 	// This will be a no-op if the target doesn't have any React nodes.
 	unmountComponentAtNode( target );