feat: Add ErrorBoundary

When the addon crashes due to unexpected configuration or
something, the entire Storybook UI crashes and page turns to blank.
To reduce the damage, I added ErrorBoundary so only addon UIs die.

#164

packages/examples/stories/tests/placeholder.stories.js

@@ -50,3 +50,11 @@ showSketchError3.parameters = {
     url: "http://www.sketch.com/s/foo/a/bar",
   },
 };
+
+export const ErrorBoundary = Template.bind({});
+ErrorBoundary.storyName = "Show error boundary instead of crash the whole page";
+ErrorBoundary.parameters = {
+  design: {
+    type: 1,
+  },
+};

packages/storybook-addon-designs/src/register/components/ErrorBoundary.tsx

@@ -0,0 +1,67 @@
+/** @jsx jsx */
+import { Component, ErrorInfo, Fragment } from "react";
+import { Link, Placeholder } from "@storybook/components";
+import { jsx } from "@storybook/theming";
+
+type State =
+  | {
+      hasError: false;
+    }
+  | {
+      hasError: true;
+      error: unknown;
+    };
+
+export class ErrorBoundary extends Component {
+  public state: State = { hasError: false };
+
+  static getDerivedStateFromError(error: unknown): State {
+    return {
+      hasError: true,
+      error,
+    };
+  }
+
+  override componentDidCatch(error: unknown, info: ErrorInfo): void {
+    console.group(
+      "An error occurred during rendering Addon panel of storybook-addon-designs"
+    );
+    console.log("--- Error ---");
+    console.error(error);
+    console.log("--- React Component Stack ---");
+    console.error(info.componentStack);
+    console.groupEnd();
+  }
+
+  override render() {
+    if (this.state.hasError) {
+      return (
+        <Placeholder>
+          <Fragment>Failed to render addon UI</Fragment>
+          <Fragment>
+            <p>
+              Sorry, this addon has crashed due to the below error has thrown
+              during rendering the addon UI.
+            </p>
+            <pre>{String(this.state.error)}</pre>
+            <p>
+              See console log for more details. To clear the error state, please
+              reload the page.{" "}
+              <Link
+                href="https://github.com/pocka/storybook-addon-designs/issues/new?assignees=&labels=category%3A+bug&template=bug_report.yml"
+                target="_blank"
+                rel="noopener"
+                withArrow
+                cancel={false}
+              >
+                Bug report
+              </Link>
+            </p>
+          </Fragment>
+        </Placeholder>
+      );
+    }
+
+    return this.props.children;
+  }
+}

packages/storybook-addon-designs/src/register/index.tsx

@@ -5,6 +5,7 @@ import { AddonPanel } from "@storybook/components";
 import { jsx } from "@storybook/theming";
 
 import { AddonName, PanelName, ParameterName } from "../addon";
+import { ErrorBoundary } from "./components/ErrorBoundary";
 import type { Config } from "../config";
 
 import { Wrapper } from "./containers/Wrapper";
@@ -41,7 +42,11 @@ export default function register(renderTarget: "panel" | "tab") {
             return <noscript key={key} />;
           }
 
-          return <Wrapper key={key} active />;
+          return (
+            <ErrorBoundary key={key}>
+              <Wrapper active />
+            </ErrorBoundary>
+          );
         },
         type: types.TAB,
         paramKey: ParameterName,
@@ -55,7 +60,9 @@ export default function register(renderTarget: "panel" | "tab") {
         render({ active, key }) {
           return (
             <AddonPanel key={key} active={!!active}>
-              <Wrapper active={!!active} />
+              <ErrorBoundary>
+                <Wrapper active={!!active} />
+              </ErrorBoundary>
             </AddonPanel>
           );
         },