Add sentry to template. Got a small error but we are gonna fix it soon!

2025-06-07 11:44:54 -05:00
parent 930dc0867d
commit eebc022928
14 changed files with 2619 additions and 317 deletions
--- a/src/app/global-error.tsx
+++ b/src/app/global-error.tsx
@ -0,0 +1,80 @@
+'use client';
+
+import '@/styles/globals.css';
+import { cn } from '@/lib/utils';
+import { ThemeProvider } from '@/components/context/theme';
+import { AuthProvider } from '@/components/context/auth';
+import Navigation from '@/components/default/navigation';
+import Footer from '@/components/default/footer';
+import { Button, Toaster } from '@/components/ui';
+import * as Sentry from '@sentry/nextjs';
+import NextError from 'next/error';
+import { useEffect } from 'react';
+import { Geist } from 'next/font/google';
+
+const geist = Geist({
+  subsets: ['latin'],
+  variable: '--font-geist-sans',
+});
+
+type GlobalErrorProps = {
+  error: Error & { digest?: string };
+  reset?: () => void;
+};
+
+const GlobalError = ({ error, reset = undefined }: GlobalErrorProps) => {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <html lang='en' className={`${geist.variable}`} suppressHydrationWarning>
+      <body
+        className={cn('bg-background text-foreground font-sans antialiased')}
+      >
+        <ThemeProvider
+          attribute='class'
+          defaultTheme='system'
+          enableSystem
+          disableTransitionOnChange
+        >
+          <AuthProvider>
+            <main className='min-h-screen flex flex-col items-center'>
+              <div className='flex-1 w-full flex flex-col gap-20 items-center'>
+                <Navigation />
+                <div
+                  className='flex flex-col gap-20 max-w-5xl
+                    p-5 w-full items-center'
+                >
+                  <NextError statusCode={0} />
+                  {reset !== undefined && (
+                    <Button onClick={() => reset()}>Try again</Button>
+                  )}
+                </div>
+              </div>
+              <Footer />
+            </main>
+            <Toaster />
+          </AuthProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+
+  return (
+    <html lang='en'>
+      <body>
+        {/* `NextError` is the default Next.js error page component. Its type
+        definition requires a `statusCode` prop. However, since the App Router
+        does not expose status codes for errors, we simply pass 0 to render a
+        generic error message. */}
+        <NextError statusCode={0} />
+        {reset !== undefined && (
+          <Button onClick={() => reset()}>Try again</Button>
+        )}
+      </body>
+    </html>
+  );
+};
+
+export default GlobalError;