Add global ErrorBoundary component for handling errors in react admin (#48250)

* feat: Add ErrorBoundary component for handling errors in WooCommerce admin client

* Add changelog

* Add tests for error-boundary

* Update plugins/woocommerce-admin/client/error-boundary/index.tsx

Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>

* Wrap text in __()

* Address feedback

* Fix tests

* Improve mobile view

* Update button

---------

Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>

plugins/woocommerce-admin/client/error-boundary/index.tsx

@@ -0,0 +1,101 @@
+/**
+ * External dependencies
+ */
+import { Component, ReactNode, ErrorInfo } from 'react';
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+type ErrorBoundaryProps = {
+	children: ReactNode;
+};
+
+type ErrorBoundaryState = {
+	hasError: boolean;
+	error: Error | null;
+	errorInfo: ErrorInfo | null;
+};
+
+export class ErrorBoundary extends Component<
+	ErrorBoundaryProps,
+	ErrorBoundaryState
+> {
+	constructor( props: ErrorBoundaryProps ) {
+		super( props );
+		this.state = { hasError: false, error: null, errorInfo: null };
+	}
+
+	static getDerivedStateFromError(
+		error: Error
+	): Partial< ErrorBoundaryState > {
+		return { hasError: true, error };
+	}
+
+	componentDidCatch( _error: Error, errorInfo: ErrorInfo ) {
+		this.setState( { errorInfo } );
+		// TODO: Log error to error tracking service
+	}
+
+	handleRefresh = () => {
+		window.location.reload();
+	};
+
+	handleOpenSupport = () => {
+		window.open(
+			'https://wordpress.org/support/plugin/woocommerce/',
+			'_blank'
+		);
+	};
+
+	render() {
+		if ( this.state.hasError ) {
+			return (
+				<div className="woocommerce-error-boundary">
+					<h1 className="woocommerce-error-boundary__heading">
+						{ __( 'Oops, something went wrong', 'woocommerce' ) }
+					</h1>
+					<p className="woocommerce-error-boundary__subheading">
+						{ __(
+							"We're sorry for the inconvenience. Please try reloading the page, or you can get support from the community forums.",
+							'woocommerce'
+						) }
+					</p>
+					<div className="woocommerce-error-boundary__actions">
+						<Button
+							variant="secondary"
+							onClick={ this.handleOpenSupport }
+						>
+							{ __( 'Get Support', 'woocommerce' ) }
+						</Button>
+						<Button
+							variant="primary"
+							onClick={ this.handleRefresh }
+						>
+							{ __( 'Reload Page', 'woocommerce' ) }
+						</Button>
+					</div>
+					<details className="woocommerce-error-boundary__details">
+						<summary>
+							{ __( 'Click for error details', 'woocommerce' ) }
+						</summary>
+						<div className="woocommerce-error-boundary__details-content">
+							<strong className="woocommerce-error-boundary__error">
+								{ this.state.error &&
+									this.state.error.toString() }
+							</strong>
+							<p>
+								{ this.state.errorInfo &&
+									this.state.errorInfo.componentStack }
+							</p>
+						</div>
+					</details>
+				</div>
+			);
+		}
+
+		return this.props.children;
+	}
+}

plugins/woocommerce-admin/client/error-boundary/style.scss

@@ -0,0 +1,60 @@
+.woocommerce-error-boundary {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	padding: 70px 20px 0;
+	box-sizing: border-box;
+
+	.woocommerce-error-boundary__heading {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		margin-bottom: 48px;
+		font-size: 40px;
+		line-height: 46px;
+		color: $gray-900;
+		padding: 0;
+		text-align: center;
+	}
+
+	.woocommerce-error-boundary__subheading {
+		text-align: center;
+	}
+
+	.woocommerce-error-boundary__actions {
+		display: flex;
+		justify-content: center;
+		margin-top: 48px;
+
+		button {
+			margin-left: 16px;
+		}
+	}
+
+	.woocommerce-error-boundary__details {
+		white-space: pre-wrap;
+		text-align: left;
+		margin: 32px auto;
+		max-width: 600px;
+
+		@media screen and (max-width: 600px) {
+			max-width: 100%;
+		}
+
+		summary {
+			text-align: center;
+		}
+
+		.woocommerce-error-boundary__details-content {
+			padding: 16px 24px;
+		}
+
+		p {
+			padding: 0;
+			margin: 12px 0 0;
+			max-height: 400px;
+			overflow: auto;
+		}
+	}
+}

plugins/woocommerce-admin/client/error-boundary/test/index.test.tsx

@@ -0,0 +1,102 @@
+/**
+ * External dependencies
+ */
+import { render, screen, fireEvent } from '@testing-library/react';
+/**
+ * Internal dependencies
+ */
+import { ErrorBoundary } from '../';
+
+const ThrowError = () => {
+	throw new Error( 'Test error' );
+	return null;
+};
+
+describe( 'ErrorBoundary', () => {
+	function onError( event: Event ) {
+		// Note: this will swallow reports about unhandled errors!
+		// Use with extreme caution.
+		event.preventDefault();
+	}
+
+	// Mock window.location.reload by using a global variable
+	const originalLocation = window.location;
+
+	beforeAll( () => {
+		// Opt Out of the jsdom error messages
+		window.addEventListener( 'error', onError );
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore - Ignore TS error for deleting window.location
+		delete window.location;
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore - Ignore TS error for assigning window.location
+		window.location = { reload: jest.fn() };
+	} );
+
+	afterAll( () => {
+		window.location = originalLocation;
+		window.removeEventListener( 'error', onError );
+	} );
+
+	it( 'catches errors and displays an error message', () => {
+		render(
+			<ErrorBoundary>
+				<ThrowError />
+			</ErrorBoundary>
+		);
+
+		expect(
+			screen.getByText( 'Oops, something went wrong' )
+		).toBeInTheDocument();
+	} );
+
+	it( 'shows refresh and report issue buttons', () => {
+		render(
+			<ErrorBoundary>
+				<ThrowError />
+			</ErrorBoundary>
+		);
+
+		expect( screen.getByText( 'Reload Page' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Get Support' ) ).toBeInTheDocument();
+	} );
+
+	it( 'refreshes the page when Refresh Page button is clicked', () => {
+		const reloadMock = jest.fn();
+		Object.defineProperty( window.location, 'reload', {
+			configurable: true,
+			value: reloadMock,
+		} );
+
+		render(
+			<ErrorBoundary>
+				<ThrowError />
+			</ErrorBoundary>
+		);
+
+		fireEvent.click( screen.getByText( 'Reload Page' ) );
+
+		expect( reloadMock ).toHaveBeenCalled();
+	} );
+
+	it( 'opens a new issue when Report Issue button is clicked', () => {
+		const openSpy = jest
+			.spyOn( window, 'open' )
+			.mockImplementation( () => null );
+
+		render(
+			<ErrorBoundary>
+				<ThrowError />
+			</ErrorBoundary>
+		);
+
+		fireEvent.click( screen.getByText( 'Get Support' ) );
+
+		expect( openSpy ).toHaveBeenCalledWith(
+			'https://wordpress.org/support/plugin/woocommerce/',
+			'_blank'
+		);
+
+		openSpy.mockRestore();
+	} );
+} );

plugins/woocommerce-admin/client/index.js

@@ -22,6 +22,7 @@ import { possiblyRenderSettingsSlots } from './settings/settings-slots';
 import { registerTaxSettingsConflictErrorFill } from './settings/conflict-error-slotfill';
 import { registerPaymentsSettingsBannerFill } from './payments/payments-settings-banner-slotfill';
 import { registerSiteVisibilitySlotFill } from './launch-your-store';
+import { ErrorBoundary } from './error-boundary';
 
 const appRoot = document.getElementById( 'root' );
 const embeddedRoot = document.getElementById( 'woocommerce-embedded-root' );
@@ -49,7 +50,12 @@ if ( appRoot ) {
 		HydratedPageLayout =
 			withCurrentUserHydration( hydrateUser )( HydratedPageLayout );
 	}
-	render( <HydratedPageLayout />, appRoot );
+	render(
+		<ErrorBoundary>
+			<HydratedPageLayout />
+		</ErrorBoundary>,
+		appRoot
+	);
 } else if ( embeddedRoot ) {
 	let HydratedEmbedLayout = withSettingsHydration(
 		settingsGroup,

plugins/woocommerce-admin/client/layout/style.scss

@@ -124,7 +124,8 @@
 	}
 }
 
-.wp-toolbar .is-wp-toolbar-disabled {
+.wp-toolbar .is-wp-toolbar-disabled,
+.wp-toolbar:has(> .woocommerce-admin-full-screen .woocommerce-error-boundary) {
 	margin-top: -$adminbar-height;
 	@include breakpoint("<600px") {
 		margin-top: -$adminbar-height-mobile;

plugins/woocommerce/changelog/add-global-error-boundary

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add ErrorBoundary component for handling unexpect errors