error boundary

Author: sw-yx

.size-snapshot.json

@@ -1,28 +1,28 @@
 {
   "/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.cjs.development.js": {
-    "bundled": 12030,
-    "minified": 7820,
-    "gzipped": 1999
+    "bundled": 12909,
+    "minified": 8132,
+    "gzipped": 2130
   },
   "/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.cjs.production.js": {
-    "bundled": 12030,
-    "minified": 7820,
-    "gzipped": 1999
+    "bundled": 12909,
+    "minified": 8132,
+    "gzipped": 2130
   },
   "/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.umd.development.js": {
-    "bundled": 12961,
-    "minified": 6790,
-    "gzipped": 1950
+    "bundled": 13890,
+    "minified": 7066,
+    "gzipped": 2077
   },
   "/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.umd.production.js": {
-    "bundled": 12961,
-    "minified": 6790,
-    "gzipped": 1950
+    "bundled": 13890,
+    "minified": 7066,
+    "gzipped": 2077
   },
   "/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.es.production.js": {
-    "bundled": 11795,
-    "minified": 7588,
-    "gzipped": 1939,
+    "bundled": 12674,
+    "minified": 7900,
+    "gzipped": 2070,
     "treeshaked": {
       "rollup": {
         "code": 5599,

src/errorBoundary.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+
+export class ErrorBoundary extends React.Component<{}, { hasError: boolean }> {
+  constructor(props: {}) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError() {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true }
+  }
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return <h1>Something went loading the widget.</h1>
+    }
+    return this.props.children
+  }
+}

src/index.tsx

@@ -8,6 +8,7 @@ import VisuallyHidden from "@reach/visually-hidden"
 const Widget = React.lazy(() => import("./app"))
 
 import { FormStateContextProvider, SettingContext } from "./context"
+import { ErrorBoundary } from "./errorBoundary"
 
 import { Settings, useNetlifyIdentity as _useNetlifyIdentity } from "react-netlify-identity"
 
@@ -52,9 +53,11 @@ export function IdentityModal({ showDialog, onCloseDialog }: ModalProps) {
           <VisuallyHidden>Close</VisuallyHidden>
         </button>
         <FormStateContextProvider>
-          <React.Suspense fallback={<div>Loading...</div>}>
-            <Widget onCloseDialog={onCloseDialog} />
-          </React.Suspense>
+          <ErrorBoundary>
+            <React.Suspense fallback={<div>Loading...</div>}>
+              <Widget onCloseDialog={onCloseDialog} />
+            </React.Suspense>
+          </ErrorBoundary>
         </FormStateContextProvider>
       </Dialog>
     </SettingContext.Provider>