* custom error component

* upload sourcemaps to sentry
* report caught errors to sentry
This commit is contained in:
m5r
2021-09-07 04:49:13 +08:00
parent 48f9e67516
commit bdac93d7e1
10 changed files with 596 additions and 27 deletions

View File

@ -1,4 +1,6 @@
import { Head, ErrorComponent } from "blitz";
import { Head } from "blitz";
import ErrorComponent from "../core/components/error-component";
// ------------------------------------------------------
// This page is rendered if a route match is not found

View File

@ -1,15 +1,17 @@
import { Suspense } from "react";
import { Suspense, useEffect } from "react";
import {
AppProps,
ErrorBoundary,
ErrorComponent,
AuthenticationError,
AuthorizationError,
ErrorFallbackProps,
useQueryErrorResetBoundary,
getConfig,
useSession,
} from "blitz";
import Sentry from "../../integrations/sentry";
import ErrorComponent from "../core/components/error-component";
import LoginForm from "../auth/components/login-form";
import { usePanelbear } from "../core/hooks/use-panelbear";
@ -18,12 +20,27 @@ import "app/core/styles/index.css";
const { publicRuntimeConfig } = getConfig();
export default function App({ Component, pageProps }: AppProps) {
const session = useSession();
usePanelbear(publicRuntimeConfig.panelBear.siteId);
useEffect(() => {
if (session.userId) {
Sentry.setUser({
id: session.userId.toString(),
orgId: session.orgId,
});
}
}, [session]);
const getLayout = Component.getLayout || ((page) => page);
return (
<ErrorBoundary FallbackComponent={RootErrorFallback} onReset={useQueryErrorResetBoundary().reset}>
<ErrorBoundary
onError={(error, componentStack) =>
Sentry.captureException(error, { contexts: { react: { componentStack } } })
}
FallbackComponent={RootErrorFallback}
onReset={useQueryErrorResetBoundary().reset}
>
<Suspense fallback="Silence, ca pousse">{getLayout(<Component {...pageProps} />)}</Suspense>
</ErrorBoundary>
);

1
app/pages/_error.tsx Normal file
View File

@ -0,0 +1 @@
export { default } from "../core/components/error-component";