Site Editor: Move 'ErrorBoundary' up to the React tree

WordPress · Aug 5, 2024 · cdbff5b · cdbff5b
1 parent 8b1b939
commit cdbff5b
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 35 deletions.
diff --git a/packages/edit-site/src/components/app/index.js b/packages/edit-site/src/components/app/index.js
@@ -15,6 +15,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
+import ErrorBoundary from '../error-boundary';
 import Layout from '../layout';
 import { unlock } from '../../lock-unlock';
 import { useCommonCommands } from '../../hooks/commands/use-common-commands';
@@ -54,13 +55,15 @@ export default function App() {
 
 	return (
 		<SlotFillProvider>
-			<GlobalStylesProvider>
-				<UnsavedChangesWarning />
-				<RouterProvider>
-					<AppLayout />
-					<PluginArea onError={ onPluginAreaError } />
-				</RouterProvider>
-			</GlobalStylesProvider>
+			<ErrorBoundary>
+				<GlobalStylesProvider>
+					<UnsavedChangesWarning />
+					<RouterProvider>
+						<AppLayout />
+						<PluginArea onError={ onPluginAreaError } />
+					</RouterProvider>
+				</GlobalStylesProvider>
+			</ErrorBoundary>
 		</SlotFillProvider>
 	);
 }
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -32,7 +32,6 @@ import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands
 /**
  * Internal dependencies
  */
-import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
 import { default as SiteHub, SiteHubMobile } from '../site-hub';
 import ResizableFrame from '../resizable-frame';
@@ -226,33 +225,29 @@ export default function Layout( { route } ) {
 									) }
 									ref={ animationRef }
 								>
-									<ErrorBoundary>
-										<ResizableFrame
-											isReady={ ! isEditorLoading }
-											isFullWidth={
-												canvasMode === 'edit'
-											}
-											defaultSize={ {
-												width:
-													canvasSize.width -
-													24 /* $canvas-padding */,
-												height: canvasSize.height,
-											} }
-											isOversized={
-												isResizableFrameOversized
-											}
-											setIsOversized={
-												setIsResizableFrameOversized
-											}
-											innerContentStyle={ {
-												background:
-													gradientValue ??
-													backgroundColor,
-											} }
-										>
-											{ areas.preview }
-										</ResizableFrame>
-									</ErrorBoundary>
+									<ResizableFrame
+										isReady={ ! isEditorLoading }
+										isFullWidth={ canvasMode === 'edit' }
+										defaultSize={ {
+											width:
+												canvasSize.width -
+												24 /* $canvas-padding */,
+											height: canvasSize.height,
+										} }
+										isOversized={
+											isResizableFrameOversized
+										}
+										setIsOversized={
+											setIsResizableFrameOversized
+										}
+										innerContentStyle={ {
+											background:
+												gradientValue ??
+												backgroundColor,
+										} }
+									>
+										{ areas.preview }
+									</ResizableFrame>
 								</div>
 							) }
 						</div>