From 3caa46ade8f7b0971464ea0167db2f6dd8a83261 Mon Sep 17 00:00:00 2001 From: Daniel Hougaard Date: Fri, 20 Sep 2024 01:19:10 +0400 Subject: [PATCH 1/8] feat: added error boundary --- frontend/src/pages/_app.tsx | 73 ++++++++++++++++++++----------------- 1 file changed, 39 insertions(+), 34 deletions(-) diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx index 7de2e92ab..493e302e0 100644 --- a/frontend/src/pages/_app.tsx +++ b/frontend/src/pages/_app.tsx @@ -27,6 +27,7 @@ import { WorkspaceProvider } from "@app/context"; import { AppLayout } from "@app/layouts"; +import ErrorBoundaryWrapper from "@app/layouts/AppLayout/ErrorBoundary"; import { queryClient } from "@app/reactQuery"; import "nprogress/nprogress.css"; @@ -85,46 +86,50 @@ const App = ({ Component, pageProps, ...appProps }: NextAppProp): JSX.Element => !Component.requireAuth ) { return ( - - - - - - - - - - + + + + + + + + + + + + ); } const Layout = Component?.layout || AppLayout; return ( - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + ); }; From 0225e6fabbd58723cd2ffaedb329f46152b5888d Mon Sep 17 00:00:00 2001 From: Daniel Hougaard Date: Fri, 20 Sep 2024 01:20:54 +0400 Subject: [PATCH 2/8] feat: added error boundary --- .../src/layouts/AppLayout/ErrorBoundary.tsx | 86 +++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 frontend/src/layouts/AppLayout/ErrorBoundary.tsx diff --git a/frontend/src/layouts/AppLayout/ErrorBoundary.tsx b/frontend/src/layouts/AppLayout/ErrorBoundary.tsx new file mode 100644 index 000000000..cce9885ab --- /dev/null +++ b/frontend/src/layouts/AppLayout/ErrorBoundary.tsx @@ -0,0 +1,86 @@ +import React, { ErrorInfo, ReactNode } from "react"; +import { useRouter } from "next/router"; +import { faBugs } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +interface ErrorBoundaryProps { + children: ReactNode; +} + +interface ErrorBoundaryState { + hasError: boolean; + error: Error | null; +} + +const ErrorPage = ({ error }: { error: Error | null }) => { + const router = useRouter(); + const currentUrl = router?.asPath?.split("?")?.[0]; + + return ( +
+
+ +

+ Something unexpected went wrong. Please contact{" "} + + support@infisical.com + {" "} + if the issue persists. +

+ + {error && ( +
+
+

Error details:

+

+ Please provide this error message when contacting support, as it will help us + diagnose the issue at hand. +

+
+

+ + {currentUrl}, {error?.message} + +

+
+ )} +
+
+ ); +}; + +class ErrorBoundary extends React.Component { + constructor(props: ErrorBoundaryProps) { + super(props); + this.state = { hasError: false, error: null }; + } + + static getDerivedStateFromError(error: Error): ErrorBoundaryState { + return { hasError: true, error }; + } + + componentDidCatch(error: Error, errorInfo: ErrorInfo): void { + console.error("Error caught by ErrorBoundary:", error, errorInfo); + } + + render(): ReactNode { + const { hasError, error } = this.state; + const { children } = this.props; + + if (hasError) { + return ; + } + return children; + } +} + +const ErrorBoundaryWrapper: React.FC = ({ children }) => { + return {children}; +}; + +export default ErrorBoundaryWrapper; From c50e325f5396db0f19728a95218070b01fc6109b Mon Sep 17 00:00:00 2001 From: Daniel Hougaard Date: Fri, 20 Sep 2024 01:29:01 +0400 Subject: [PATCH 3/8] feat: added error boundary --- frontend/src/layouts/AppLayout/ErrorBoundary.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/layouts/AppLayout/ErrorBoundary.tsx b/frontend/src/layouts/AppLayout/ErrorBoundary.tsx index cce9885ab..d9128d0ee 100644 --- a/frontend/src/layouts/AppLayout/ErrorBoundary.tsx +++ b/frontend/src/layouts/AppLayout/ErrorBoundary.tsx @@ -79,7 +79,7 @@ class ErrorBoundary extends React.Component = ({ children }) => { +const ErrorBoundaryWrapper = ({ children }: ErrorBoundaryProps) => { return {children}; }; From 279a1791f6c985b3bdfe3f13957d8d0c69faf68f Mon Sep 17 00:00:00 2001 From: Daniel Hougaard Date: Fri, 20 Sep 2024 15:16:19 +0400 Subject: [PATCH 4/8] feat: added error boundary --- .../src/layouts/AppLayout/ErrorBoundary.tsx | 35 ++++++++++++++----- 1 file changed, 26 insertions(+), 9 deletions(-) diff --git a/frontend/src/layouts/AppLayout/ErrorBoundary.tsx b/frontend/src/layouts/AppLayout/ErrorBoundary.tsx index d9128d0ee..eb6ccd4f9 100644 --- a/frontend/src/layouts/AppLayout/ErrorBoundary.tsx +++ b/frontend/src/layouts/AppLayout/ErrorBoundary.tsx @@ -1,4 +1,5 @@ import React, { ErrorInfo, ReactNode } from "react"; +import Link from "next/link"; import { useRouter } from "next/router"; import { faBugs } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -16,12 +17,16 @@ const ErrorPage = ({ error }: { error: Error | null }) => { const router = useRouter(); const currentUrl = router?.asPath?.split("?")?.[0]; + error = new Error( + "e26eabc714f1/secrets/dev, error on line 45: Cannot read property 'split' of undefinede26eabc714f1/secrets/dev, error on line 45: Cannot read property 'split' of undefinede26eabc714f1/secrets/dev, error on line 45: Cannot read property 'split' of undefinede26eabc714f1/secrets/dev, error on line 45: Cannot read property 'split' of undefinede26eabc714f1/secrets/dev, error on line 45: Cannot read property 'split' of undefinede26eabc714f1/secrets/dev, error on line 45: Cannot read property 'split' of undefined" + ); + return (
- +

- Something unexpected went wrong. Please contact{" "} + Something went wrong. Please contact{" "} { href="mailto:support@infisical.com" > support@infisical.com - {" "} + + , or{" "} + + + join our Slack community + + {" "} if the issue persists.

- {error && ( -
+
+ + {error?.message && ( +
-

Error details:

-

+

Error details:

+

Please provide this error message when contacting support, as it will help us diagnose the issue at hand.

- {currentUrl}, {error?.message} + {currentUrl}, {error.message}

@@ -72,7 +89,7 @@ class ErrorBoundary extends React.Component; } return children; From aee46d190254c451b35937c22bc513327b034def Mon Sep 17 00:00:00 2001 From: Daniel Hougaard Date: Fri, 20 Sep 2024 15:17:20 +0400 Subject: [PATCH 5/8] cleanup --- frontend/src/layouts/AppLayout/ErrorBoundary.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/frontend/src/layouts/AppLayout/ErrorBoundary.tsx b/frontend/src/layouts/AppLayout/ErrorBoundary.tsx index eb6ccd4f9..018287649 100644 --- a/frontend/src/layouts/AppLayout/ErrorBoundary.tsx +++ b/frontend/src/layouts/AppLayout/ErrorBoundary.tsx @@ -17,10 +17,6 @@ const ErrorPage = ({ error }: { error: Error | null }) => { const router = useRouter(); const currentUrl = router?.asPath?.split("?")?.[0]; - error = new Error( - "e26eabc714f1/secrets/dev, error on line 45: Cannot read property 'split' of undefinede26eabc714f1/secrets/dev, error on line 45: Cannot read property 'split' of undefinede26eabc714f1/secrets/dev, error on line 45: Cannot read property 'split' of undefinede26eabc714f1/secrets/dev, error on line 45: Cannot read property 'split' of undefinede26eabc714f1/secrets/dev, error on line 45: Cannot read property 'split' of undefinede26eabc714f1/secrets/dev, error on line 45: Cannot read property 'split' of undefined" - ); - return (
@@ -89,7 +85,7 @@ class ErrorBoundary extends React.Component; } return children; From e44213a8a9d17dd36f9b3e2768f655b154beeb22 Mon Sep 17 00:00:00 2001 From: Daniel Hougaard Date: Fri, 20 Sep 2024 21:29:03 +0400 Subject: [PATCH 6/8] feat: added error boundary --- .../src/layouts/AppLayout/ErrorBoundary.tsx | 41 ++++++++++++------- 1 file changed, 26 insertions(+), 15 deletions(-) diff --git a/frontend/src/layouts/AppLayout/ErrorBoundary.tsx b/frontend/src/layouts/AppLayout/ErrorBoundary.tsx index 018287649..2fe881c38 100644 --- a/frontend/src/layouts/AppLayout/ErrorBoundary.tsx +++ b/frontend/src/layouts/AppLayout/ErrorBoundary.tsx @@ -1,9 +1,11 @@ -import React, { ErrorInfo, ReactNode } from "react"; +import React, { ErrorInfo, ReactNode, useEffect } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; -import { faBugs } from "@fortawesome/free-solid-svg-icons"; +import { faBugs, faHome } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { Button } from "@app/components/v2"; + interface ErrorBoundaryProps { children: ReactNode; } @@ -14,12 +16,22 @@ interface ErrorBoundaryState { } const ErrorPage = ({ error }: { error: Error | null }) => { + const [orgId, setOrgId] = React.useState(null); const router = useRouter(); const currentUrl = router?.asPath?.split("?")?.[0]; + // Workaround: Fixes localStorage not being available in the error boundary until the next render. + useEffect(() => { + const savedOrgId = localStorage.getItem("orgData.id"); + + if (savedOrgId) { + setOrgId(savedOrgId); + } + }, []); + return (
-
+

Something went wrong. Please contact{" "} @@ -44,23 +56,22 @@ const ErrorPage = ({ error }: { error: Error | null }) => { if the issue persists.

-
+ {orgId && ( + + )} {error?.message && ( -
-
-

Error details:

-

- Please provide this error message when contacting support, as it will help us - diagnose the issue at hand. -

-
-

- + <> +

+

+ {currentUrl}, {error.message}

-
+ )}
From 2a686e65cdb12666a5dbcbdf771667b606d3951e Mon Sep 17 00:00:00 2001 From: Daniel Hougaard Date: Fri, 20 Sep 2024 23:05:23 +0400 Subject: [PATCH 7/8] feat: added error boundary --- frontend/src/layouts/AppLayout/ErrorBoundary.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/layouts/AppLayout/ErrorBoundary.tsx b/frontend/src/layouts/AppLayout/ErrorBoundary.tsx index 2fe881c38..d5c951f4c 100644 --- a/frontend/src/layouts/AppLayout/ErrorBoundary.tsx +++ b/frontend/src/layouts/AppLayout/ErrorBoundary.tsx @@ -57,7 +57,7 @@ const ErrorPage = ({ error }: { error: Error | null }) => {

{orgId && ( - From bd4deb02b0b64dfcc75e551de54267ecb6587795 Mon Sep 17 00:00:00 2001 From: Daniel Hougaard Date: Fri, 20 Sep 2024 23:17:09 +0400 Subject: [PATCH 8/8] feat: added error boundary --- frontend/src/layouts/AppLayout/ErrorBoundary.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/frontend/src/layouts/AppLayout/ErrorBoundary.tsx b/frontend/src/layouts/AppLayout/ErrorBoundary.tsx index d5c951f4c..55acf3433 100644 --- a/frontend/src/layouts/AppLayout/ErrorBoundary.tsx +++ b/frontend/src/layouts/AppLayout/ErrorBoundary.tsx @@ -57,7 +57,14 @@ const ErrorPage = ({ error }: { error: Error | null }) => {

{orgId && ( -