add error boundary

warrenday · Nov 15, 2023 · 3228674 · 3228674
1 parent d9b4d29
commit 3228674
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 18 deletions.
diff --git a/src/components/ErrorBoundary/index.tsx b/src/components/ErrorBoundary/index.tsx
@@ -0,0 +1,64 @@
+import React from "react"
+import { Button } from "../Button"
+
+interface ErrorInfoProps {
+  error: Error
+  onReload: () => void
+}
+
+const GitHubIssueLink: React.FC<ErrorInfoProps> = (props) => {
+  const { error, onReload } = props
+
+  const title = encodeURIComponent(`Bug report: ${error.message}`)
+  const body = encodeURIComponent(`I encountered an error: ${error.message}`)
+  const githubUrl = `https://github.com/warrenday/graphql-network-inspector/issues/new?title=${title}&body=${body}`
+
+  return (
+    <div className="w-screen h-screen flex flex-col flex-1 items-center justify-center">
+      <div className="p-6 flex flex-col text-center">
+        <div>Something went wrong:</div>
+        <div className="mt-2">{error.message}</div>
+        <a href={githubUrl} target="_blank" rel="noopener noreferrer">
+          <Button className="mt-4" variant="primary">
+            Report issue on GitHub
+          </Button>
+        </a>
+        <button
+          className="underline pt-10 block text-center"
+          onClick={onReload}
+        >
+          Reload app
+        </button>
+      </div>
+    </div>
+  )
+}
+
+interface IErrorBoundaryState {
+  hasError: boolean
+  error: Error | null
+}
+
+export class ErrorBoundary extends React.Component {
+  state: IErrorBoundaryState = { hasError: false, error: null }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error }
+  }
+
+  render() {
+    if (this.state.hasError && this.state.error) {
+      return (
+        <GitHubIssueLink
+          error={this.state.error}
+          onReload={() => {
+            this.setState({ hasError: false, error: null })
+          }}
+        />
+      )
+    }
+
+    // Normally, just render children
+    return this.props.children
+  }
+}
diff --git a/src/containers/App/index.tsx b/src/containers/App/index.tsx
@@ -5,28 +5,31 @@ import { Main } from "../Main"
 import { RequestViewSectionsProvider } from "@/hooks/useRequestViewSections"
 import { ShareMessageProvider } from "../../hooks/useShareMessage"
 import { OperationFiltersProvider } from "../../hooks/useOperationFilters"
+import { ErrorBoundary } from "../../components/ErrorBoundary"
 
 export const App = () => {
   const isDarkTheme = useDarkTheme()
 
   return (
-    <ShareMessageProvider>
-      <OperationFiltersProvider>
-        <NetworkTabsProvider>
-          <RequestViewSectionsProvider>
-            <SearchProvider>
-              <div
-                className={isDarkTheme ? "dark" : ""}
-                data-color-scheme={isDarkTheme ? "dark" : "light"}
-              >
-                <div className="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white">
-                  <Main />
-                </div>
-              </div>
-            </SearchProvider>
-          </RequestViewSectionsProvider>
-        </NetworkTabsProvider>
-      </OperationFiltersProvider>
-    </ShareMessageProvider>
+    <div
+      className={isDarkTheme ? "dark" : ""}
+      data-color-scheme={isDarkTheme ? "dark" : "light"}
+    >
+      <div className="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white">
+        <ErrorBoundary>
+          <ShareMessageProvider>
+            <OperationFiltersProvider>
+              <NetworkTabsProvider>
+                <RequestViewSectionsProvider>
+                  <SearchProvider>
+                    <Main />
+                  </SearchProvider>
+                </RequestViewSectionsProvider>
+              </NetworkTabsProvider>
+            </OperationFiltersProvider>
+          </ShareMessageProvider>
+        </ErrorBoundary>
+      </div>
+    </div>
   )
 }