From 112e4e2ed357001abcf9d0fe357b7bf3c4209d2b Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 9 Feb 2022 15:02:46 +0800 Subject: [PATCH 1/6] Try adding error handling to `redirectToHomepage` --- .../src/components/error-boundary/index.js | 36 +++------------- .../src/components/error-boundary/warning.js | 42 +++++++++++++++++++ .../components/routes/redirect-to-homepage.js | 11 ++++- packages/edit-site/src/index.js | 13 +++++- 4 files changed, 68 insertions(+), 34 deletions(-) create mode 100644 packages/edit-site/src/components/error-boundary/warning.js diff --git a/packages/edit-site/src/components/error-boundary/index.js b/packages/edit-site/src/components/error-boundary/index.js index e425df492405f3..cd2f37cd778646 100644 --- a/packages/edit-site/src/components/error-boundary/index.js +++ b/packages/edit-site/src/components/error-boundary/index.js @@ -2,19 +2,11 @@ * 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 ( - - ); -} +/** + * Internal dependencies + */ +import ErrorBoundaryWarning from './warning'; export default class ErrorBoundary extends Component { constructor() { @@ -41,24 +33,6 @@ export default class ErrorBoundary extends Component { return this.props.children; } - return ( - - { __( 'Attempt Recovery' ) } - , - - { __( 'Copy Error' ) } - , - ] } - > - { __( 'The editor has encountered an unexpected error.' ) } - - ); + return ; } } diff --git a/packages/edit-site/src/components/error-boundary/warning.js b/packages/edit-site/src/components/error-boundary/warning.js new file mode 100644 index 00000000000000..27eb9d9d19b563 --- /dev/null +++ b/packages/edit-site/src/components/error-boundary/warning.js @@ -0,0 +1,42 @@ +/** + * 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 ( + + ); +} + +export default function ErrorBoundaryWarning( { error, reboot } ) { + const actions = []; + + if ( reboot ) { + actions.push( + + ); + } + + if ( error ) { + actions.push( + + { __( 'Copy Error' ) } + + ); + } + + return ( + + { __( 'The editor has encountered an unexpected error.' ) } + + ); +} diff --git a/packages/edit-site/src/components/routes/redirect-to-homepage.js b/packages/edit-site/src/components/routes/redirect-to-homepage.js index bb68c6f44aad33..a2fa8d601b77d5 100644 --- a/packages/edit-site/src/components/routes/redirect-to-homepage.js +++ b/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 { @@ -48,7 +55,7 @@ async function getHomepageParams( siteUrl ) { .then( ( { data } ) => data ); if ( ! template?.id ) { - return; + throw new Error( '`getHomepageParams`: unable to find home template.' ); } return { diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index c622d54b110d82..f1de588fdb9948 100644 --- a/packages/edit-site/src/index.js +++ b/packages/edit-site/src/index.js @@ -24,6 +24,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 +39,17 @@ 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( + reinitializeEditor( target, settings ) } + />, + target + ); + } // This will be a no-op if the target doesn't have any React nodes. unmountComponentAtNode( target ); From ef9a6b352c61b8b149a11671268882228cb201fb Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 9 Feb 2022 15:33:08 +0800 Subject: [PATCH 2/6] Return early to avoid unmounting the error warning on the next line --- packages/edit-site/src/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index f1de588fdb9948..dcee5010f40ca3 100644 --- a/packages/edit-site/src/index.js +++ b/packages/edit-site/src/index.js @@ -49,6 +49,7 @@ export async function reinitializeEditor( target, settings ) { />, target ); + return; } // This will be a no-op if the target doesn't have any React nodes. From b299d1ce5fce7865e07ec337414f00280a87be74 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 10 Feb 2022 15:04:21 +0800 Subject: [PATCH 3/6] Handle http status errors --- .../src/components/routes/redirect-to-homepage.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/routes/redirect-to-homepage.js b/packages/edit-site/src/components/routes/redirect-to-homepage.js index a2fa8d601b77d5..cfb6fd8bb543d1 100644 --- a/packages/edit-site/src/components/routes/redirect-to-homepage.js +++ b/packages/edit-site/src/components/routes/redirect-to-homepage.js @@ -51,7 +51,14 @@ 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( ( response ) => { + if ( ! response.ok ) { + throw new Error( + `\`getHomepageParams\`: HTTP status error, ${ response.status } ${ response.statusText }` + ); + } + return response.json(); + } ) .then( ( { data } ) => data ); if ( ! template?.id ) { From 22f17ae377167d5dabda4716b6af2538dd50fab2 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 10 Feb 2022 15:54:24 +0800 Subject: [PATCH 4/6] Handle REST errors --- .../src/components/routes/redirect-to-homepage.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/routes/redirect-to-homepage.js b/packages/edit-site/src/components/routes/redirect-to-homepage.js index cfb6fd8bb543d1..f75cbc896f3cfb 100644 --- a/packages/edit-site/src/components/routes/redirect-to-homepage.js +++ b/packages/edit-site/src/components/routes/redirect-to-homepage.js @@ -57,9 +57,18 @@ async function getHomepageParams( siteUrl ) { `\`getHomepageParams\`: HTTP status error, ${ response.status } ${ response.statusText }` ); } + return response.json(); } ) - .then( ( { data } ) => data ); + .then( ( { data } ) => { + if ( data.message ) { + throw new Error( + `\`getHomepageParams\`: REST API error, ${ data.message }` + ); + } + + return data; + } ); if ( ! template?.id ) { throw new Error( '`getHomepageParams`: unable to find home template.' ); From ebcf6a49aa92fb01b5477d896623a90d6f5af567 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 10 Feb 2022 15:57:01 +0800 Subject: [PATCH 5/6] Add dashboard link and better labelling --- .../src/components/error-boundary/index.js | 11 +++++++++- .../src/components/error-boundary/warning.js | 21 +++++++++++++++++-- packages/edit-site/src/index.js | 5 +++++ 3 files changed, 34 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/error-boundary/index.js b/packages/edit-site/src/components/error-boundary/index.js index cd2f37cd778646..35387fe5399c1b 100644 --- a/packages/edit-site/src/components/error-boundary/index.js +++ b/packages/edit-site/src/components/error-boundary/index.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { Component } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -33,6 +34,14 @@ export default class ErrorBoundary extends Component { return this.props.children; } - return ; + return ( + + ); } } diff --git a/packages/edit-site/src/components/error-boundary/warning.js b/packages/edit-site/src/components/error-boundary/warning.js index 27eb9d9d19b563..4abf84f224c7ab 100644 --- a/packages/edit-site/src/components/error-boundary/warning.js +++ b/packages/edit-site/src/components/error-boundary/warning.js @@ -15,7 +15,12 @@ function CopyButton( { text, children } ) { ); } -export default function ErrorBoundaryWarning( { error, reboot } ) { +export default function ErrorBoundaryWarning( { + message, + error, + reboot, + dashboardLink, +} ) { const actions = []; if ( reboot ) { @@ -34,9 +39,21 @@ export default function ErrorBoundaryWarning( { error, reboot } ) { ); } + if ( dashboardLink ) { + actions.push( + + ); + } + return ( - { __( 'The editor has encountered an unexpected error.' ) } + { message } ); } diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index dcee5010f40ca3..fffe166bc5ab40 100644 --- a/packages/edit-site/src/index.js +++ b/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'; @@ -44,8 +45,12 @@ export async function reinitializeEditor( target, settings ) { } catch ( error ) { render( reinitializeEditor( target, settings ) } + dashboardLink="index.php" />, target ); From 48b8d81ff603ff6ebbab988086dbf5d9f0ecfc3d Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 10 Feb 2022 16:25:02 +0800 Subject: [PATCH 6/6] Remove reboot button --- packages/edit-site/src/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index fffe166bc5ab40..7e51c857433d53 100644 --- a/packages/edit-site/src/index.js +++ b/packages/edit-site/src/index.js @@ -49,7 +49,6 @@ export async function reinitializeEditor( target, settings ) { 'The editor is unable to find a block template for the homepage.' ) } error={ error } - reboot={ () => reinitializeEditor( target, settings ) } dashboardLink="index.php" />, target