Adds ErrorBoundary around stories

ts/components/ErrorBoundary.tsx

@@ -0,0 +1,47 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import type { ReactNode } from 'react';
+import React from 'react';
+
+import * as Errors from '../types/errors';
+import * as log from '../logging/log';
+import { ToastType } from '../state/ducks/toast';
+
+export type Props = {
+  children: ReactNode;
+};
+
+export type State = {
+  error?: Error;
+};
+
+export class ErrorBoundary extends React.PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = { error: undefined };
+  }
+
+  public static getDerivedStateFromError(error: Error): State {
+    log.error(
+      'ErrorBoundary: captured rendering error',
+      Errors.toLogFormat(error)
+    );
+    if (window.reduxActions) {
+      window.reduxActions.toast.showToast(ToastType.Error);
+    }
+    return { error };
+  }
+
+  public override render(): ReactNode {
+    const { error } = this.state;
+    const { children } = this.props;
+
+    if (error) {
+      return null;
+    }
+
+    return children;
+  }
+}

ts/components/ToastManager.tsx

@@ -20,6 +20,21 @@ export const ToastManager = ({
   i18n,
   toastType,
 }: PropsType): JSX.Element | null => {
+  if (toastType === ToastType.Error) {
+    return (
+      <Toast
+        autoDismissDisabled
+        onClose={hideToast}
+        toastAction={{
+          label: i18n('Toast--error--action'),
+          onClick: () => window.showDebugLog(),
+        }}
+      >
+        {i18n('Toast--error')}
+      </Toast>
+    );
+  }
+
   if (toastType === ToastType.MessageBodyTooLong) {
     return <ToastMessageBodyTooLong i18n={i18n} onClose={hideToast} />;
   }