shellphone.app/app/pages/_app.tsx

58 lines
1.7 KiB
TypeScript
Raw Normal View History

import { Suspense, useEffect } from "react";
2021-07-31 14:33:18 +00:00
import {
AppProps,
ErrorBoundary,
AuthenticationError,
AuthorizationError,
ErrorFallbackProps,
useQueryErrorResetBoundary,
2021-08-28 22:14:18 +00:00
getConfig,
useSession,
} from "blitz";
2021-07-31 14:33:18 +00:00
import Sentry from "../../integrations/sentry";
import ErrorComponent from "../core/components/error-component";
import LoginForm from "../auth/components/login-form";
2021-08-28 22:14:18 +00:00
import { usePanelbear } from "../core/hooks/use-panelbear";
2021-07-31 14:33:18 +00:00
import "app/core/styles/index.css";
2021-07-31 14:33:18 +00:00
2021-08-28 22:14:18 +00:00
const { publicRuntimeConfig } = getConfig();
2021-07-31 14:33:18 +00:00
export default function App({ Component, pageProps }: AppProps) {
const session = useSession();
2021-08-28 22:14:18 +00:00
usePanelbear(publicRuntimeConfig.panelBear.siteId);
useEffect(() => {
if (session.userId) {
Sentry.setUser({
id: session.userId.toString(),
orgId: session.orgId,
});
}
}, [session]);
2021-08-28 22:14:18 +00:00
const getLayout = Component.getLayout || ((page) => page);
2021-07-31 14:33:18 +00:00
return (
<ErrorBoundary
onError={(error, componentStack) =>
Sentry.captureException(error, { contexts: { react: { componentStack } } })
}
FallbackComponent={RootErrorFallback}
onReset={useQueryErrorResetBoundary().reset}
>
2021-08-01 14:03:49 +00:00
<Suspense fallback="Silence, ca pousse">{getLayout(<Component {...pageProps} />)}</Suspense>
2021-07-31 14:33:18 +00:00
</ErrorBoundary>
);
2021-07-31 14:33:18 +00:00
}
function RootErrorFallback({ error, resetErrorBoundary }: ErrorFallbackProps) {
if (error instanceof AuthenticationError) {
return <LoginForm onSuccess={resetErrorBoundary} />;
2021-07-31 14:33:18 +00:00
} else if (error instanceof AuthorizationError) {
2021-08-01 14:03:49 +00:00
return <ErrorComponent statusCode={error.statusCode} title="Sorry, you are not authorized to access this" />;
2021-07-31 14:33:18 +00:00
} else {
2021-08-01 14:03:49 +00:00
return <ErrorComponent statusCode={error.statusCode || 400} title={error.message || error.name} />;
2021-07-31 14:33:18 +00:00
}
}