feat: Error boundary component (#4139)

Author: pan-kot

build-tools/utils/pluralize.js

@@ -28,6 +28,7 @@ const pluralizationMap = {
   DatePicker: 'DatePickers',
   DateRangePicker: 'DateRangePickers',
   Drawer: 'Drawers',
+  ErrorBoundary: 'ErrorBoundaries',
   ExpandableSection: 'ExpandableSections',
   FileDropzone: 'FileDropzones',
   FileInput: 'FileInputs',

package.json

@@ -175,7 +175,7 @@
     {
       "path": "lib/components/internal/widget-exports.js",
       "brotli": false,
-      "limit": "1100 kB",
+      "limit": "1150 kB",
       "ignore": "react-dom"
     }
   ],

pages/app/index.tsx

@@ -51,6 +51,8 @@ function isAppLayoutPage(pageId?: string) {
     'funnel-analytics/static-single-page-flow',
     'funnel-analytics/static-multi-page-flow',
     'charts.test',
+    'error-boundary/demo-async-load',
+    'error-boundary/demo-components',
   ];
   return pageId !== undefined && appLayoutPages.some(match => pageId.includes(match));
 }

pages/app/templates.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 import { Box, SpaceBetween } from '~components';
 import I18nProvider, { I18nProviderProps } from '~components/i18n';
-import messages from '~components/i18n/messages/all.en';
+import messages from '~components/i18n/messages/all.all';
 
 import { IframeWrapper } from '../utils/iframe-wrapper';
 import ScreenshotArea, { ScreenshotAreaProps } from '../utils/screenshot-area';
@@ -48,7 +48,7 @@ export function SimplePage({ title, subtitle, settings, children, screenshotArea
   );
 
   content = i18n ? (
-    <I18nProvider messages={[messages]} locale="en-GB" {...i18n}>
+    <I18nProvider messages={[messages]} locale="en" {...i18n}>
       {content}
     </I18nProvider>
   ) : (

pages/error-boundary/demo-async-load.page.tsx

@@ -0,0 +1,60 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { Suspense } from 'react';
+
+import { AppLayout, ContentLayout, ErrorBoundary, Header, Link, Spinner } from '~components';
+import I18nProvider from '~components/i18n';
+import messages from '~components/i18n/messages/all.en';
+
+function createDelayedResource(ms: number, error: Error) {
+  let done = false;
+  const promise = new Promise<void>(resolve =>
+    setTimeout(() => {
+      done = true;
+      resolve();
+    }, ms)
+  );
+  return {
+    read() {
+      if (!done) {
+        throw promise;
+      }
+      throw error;
+    },
+  };
+}
+
+const resource = createDelayedResource(2000, new Error('Async page load failed'));
+
+function AsyncFailingPage() {
+  resource.read();
+  return <div>Loaded page</div>;
+}
+
+export default function ErrorBoundaryAsyncDemo() {
+  return (
+    <I18nProvider messages={[messages]} locale="en">
+      <ErrorBoundary
+        onError={({ error }) => console.log(`Error "${error.message.slice(0, 20)}… reported."`)}
+        i18nStrings={{ components: { Feedback: Link } }}
+      >
+        <AppLayout
+          navigationHide={false}
+          toolsHide={false}
+          content={
+            <Suspense
+              fallback={
+                <ContentLayout header={<Header variant="h1">Error boundaries async</Header>}>
+                  <Spinner size="large" />
+                </ContentLayout>
+              }
+            >
+              <AsyncFailingPage />
+            </Suspense>
+          }
+        />
+      </ErrorBoundary>
+    </I18nProvider>
+  );
+}