ntp: per-widget error boundary (#1249)

Co-authored-by: Shane Osbourne <[email protected]>

Author: shakyShane

special-pages/pages/new-tab/app/index.js

@@ -170,7 +170,8 @@ async function resolveEntryPoints(widgets, didCatch) {
  * @param {Record<string, any>} strings
  */
 function renderComponents(root, environment, settings, strings) {
-    render(
+    // eslint-disable-next-line no-labels,no-unused-labels
+    $INTEGRATION: render(
         <EnvironmentProvider debugState={environment.debugState} injectName={environment.injectName} willThrow={environment.willThrow}>
             <SettingsProvider settings={settings}>
                 <TranslationProvider translationObject={strings} fallback={strings} textLength={environment.textLength}>

special-pages/pages/new-tab/app/widget-list/WidgetList.js

@@ -1,9 +1,11 @@
-import { Fragment, h } from 'preact';
+import { h } from 'preact';
 import { WidgetConfigContext, WidgetVisibilityProvider } from './widget-config.provider.js';
 import { useContext } from 'preact/hooks';
-import { Customizer, CustomizerMenuPositionedFixed } from '../customizer/components/Customizer';
-import { useEnv } from '../../../../shared/components/EnvironmentProvider.js';
-import { DebugCustomized } from '../telemetry/Debug.js';
+import { Customizer, CustomizerMenuPositionedFixed } from '../customizer/components/Customizer.js';
+import { useMessaging } from '../types.js';
+import { ErrorBoundary } from '../../../../shared/components/ErrorBoundary.js';
+import { Fallback } from '../../../../shared/components/Fallback/Fallback.jsx';
+import { Centered } from '../components/Layout.js';
 
 /**
  * @param {string} id
@@ -37,25 +39,53 @@ export async function widgetEntryPoint(id) {
 
 export function WidgetList() {
     const { widgets, widgetConfigItems, entryPoints } = useContext(WidgetConfigContext);
-    const { env } = useEnv();
+    const messaging = useMessaging();
+
+    /**
+     * @param {any} error
+     * @param {string} id
+     */
+    const didCatch = (error, id) => {
+        const message = error?.message || error?.error || 'unknown';
+        const composed = `Widget '${id}' threw an exception: ` + message;
+        messaging.reportPageException({ message: composed });
+    };
 
     return (
         <div>
             {widgets.map((widget, index) => {
                 const matchingConfig = widgetConfigItems.find((item) => item.id === widget.id);
                 const matchingEntryPoint = entryPoints[widget.id];
+                /**
+                 * If there's no config, it means the user does not control the visibility of the elements in question.
+                 */
                 if (!matchingConfig) {
-                    return <Fragment key={widget.id}>{matchingEntryPoint.factory?.()}</Fragment>;
+                    return (
+                        <ErrorBoundary key={widget.id} didCatch={(error) => didCatch(error, widget.id)} fallback={null}>
+                            {matchingEntryPoint.factory?.()}
+                        </ErrorBoundary>
+                    );
                 }
+
+                /**
+                 * This section is for elements that the user controls the visibility of
+                 */
                 return (
-                    <Fragment key={widget.id}>
-                        <WidgetVisibilityProvider visibility={matchingConfig.visibility} id={matchingConfig.id} index={index}>
+                    <WidgetVisibilityProvider key={widget.id} visibility={matchingConfig.visibility} id={matchingConfig.id} index={index}>
+                        <ErrorBoundary
+                            key={widget.id}
+                            didCatch={(error) => didCatch(error, widget.id)}
+                            fallback={
+                                <Centered>
+                                    <Fallback showDetails={true}>Widget id: {matchingConfig.id}</Fallback>
+                                </Centered>
+                            }
+                        >
                             {matchingEntryPoint.factory?.()}
-                        </WidgetVisibilityProvider>
-                    </Fragment>
+                        </ErrorBoundary>
+                    </WidgetVisibilityProvider>
                 );
             })}
-            {env === 'development' && <DebugCustomized index={widgets.length} />}
             <CustomizerMenuPositionedFixed>
                 <Customizer />
             </CustomizerMenuPositionedFixed>

special-pages/shared/components/Fallback/Fallback.jsx

@@ -4,12 +4,14 @@ import styles from './Fallback.module.css';
 /**
  * @param {object} props
  * @param {boolean} props.showDetails
+ * @param {import("preact").ComponentChild} [props.children]
  */
-export function Fallback({ showDetails }) {
+export function Fallback({ showDetails, children }) {
     return (
         <div class={styles.fallback}>
             <div>
                 <p>Something went wrong!</p>
+                {children}
                 {showDetails && (
                     <p>
                         Please check logs for a message called <code>reportPageException</code>