awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: added error boundary

Browse Source
This commit is contained in:
Daniel Hougaard
2024-09-20 15:16:19 +04:00
parent c50e325f53
commit 279a1791f6
1 changed files with 26 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/layouts/AppLayout/ErrorBoundary.tsx
View File

@@ -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 (
<div className="flex h-screen w-screen items-center justify-center bg-mineshaft-900">
<div className="flex max-w-md flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 text-center text-mineshaft-200">
<FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
<FontAwesomeIcon icon={faBugs} className="my-2 inline text-6xl" />
<p>
Something unexpected went wrong. Please contact{" "}
Something went wrong. Please contact{" "}
<a
className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
target="_blank"
@@ -29,22 +34,34 @@ const ErrorPage = ({ error }: { error: Error | null }) => {
href="mailto:support@infisical.com"
>
support@infisical.com
</a>{" "}
</a>
, or{" "}
<Link passHref href="https://infisical.com/slack">
<a
className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
target="_blank"
rel="noopener noreferrer"
>
join our Slack community
</a>
</Link>{" "}
if the issue persists.
</p>
{error && (
<div className="space-y-4">
<div className="my-4 h-px w-full bg-mineshaft-600" />
{error?.message && (
<div className="space-y-2">
<div>
<p className="mt-4">Error details:</p>
<p className="text-xs italic">
<p>Error details:</p>
<p className="text-xs italic opacity-70">
Please provide this error message when contacting support, as it will help us
diagnose the issue at hand.
</p>
</div>
<p className="max-h-44 w-full overflow-auto text-ellipsis rounded-md bg-mineshaft-700">
<code className="p-2 text-xs">
{currentUrl}, {error?.message}
{currentUrl}, {error.message}
</code>
</p>
</div>
@@ -72,7 +89,7 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
const { hasError, error } = this.state;
const { children } = this.props;
if (hasError) {
if (!hasError) {
return <ErrorPage error={error} />;
}
return children;