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/(auth-pages)/auth/success/page.tsx
+++ b/src/app/(auth-pages)/auth/success/page.tsx
@@ -13,7 +13,7 @@ const AuthSuccessPage = () => {
    const handleAuthSuccess = async () => {
      // Refresh the auth context to pick up the new session
      await refreshUserData();
-      
+
      // Small delay to ensure state is updated
      setTimeout(() => {
        router.push('/');
--- 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;
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import { type Metadata } from 'next';
+import type { Metadata } from 'next';
 import '@/styles/globals.css';
 import { Geist } from 'next/font/google';
 import { cn } from '@/lib/utils';
@@ -7,302 +7,336 @@ import { AuthProvider } from '@/components/context/auth';
 import Navigation from '@/components/default/navigation';
 import Footer from '@/components/default/footer';
 import { Toaster } from '@/components/ui';
+import * as Sentry from '@sentry/nextjs';

-export const metadata: Metadata = {
-  title: {
-    template: '%s | T3 Template',
-    default: 'T3 Template with Supabase',
-  },
-  description: 'Created by Gib with T3!',
-  applicationName: 'T3 Template',
-  keywords:
-    'T3 Template, Next.js, Supabase, Tailwind, TypeScript, React, T3, Gib, Theo',
-  authors: [{ name: 'Gib', url: 'https://gbrown.org' }],
-  creator: 'Gib Brown',
-  publisher: 'Gib Brown',
-  formatDetection: {
-    email: false,
-    address: false,
-    telephone: false,
-  },
-  robots: {
-    index: true,
-    follow: true,
-    nocache: false,
-    googleBot: {
+export const generateMetadata = (): Metadata => {
+  return {
+    title: {
+      template: '%s | T3 Template',
+      default: 'T3 Template with Supabase',
+    },
+    description: 'Created by Gib with T3!',
+    applicationName: 'T3 Template',
+    keywords:
+      'T3 Template, Next.js, Supabase, Tailwind, TypeScript, React, T3, Gib, Theo',
+    authors: [{ name: 'Gib', url: 'https://gbrown.org' }],
+    creator: 'Gib Brown',
+    publisher: 'Gib Brown',
+    formatDetection: {
+      email: false,
+      address: false,
+      telephone: false,
+    },
+    robots: {
      index: true,
      follow: true,
-      noimageindex: false,
-      'max-video-preview': -1,
-      'max-image-preview': 'large',
-      'max-snippet': -1,
+      nocache: false,
+      googleBot: {
+        index: true,
+        follow: true,
+        noimageindex: false,
+        'max-video-preview': -1,
+        'max-image-preview': 'large',
+        'max-snippet': -1,
+      },
    },
-  },
-  icons: {
-    icon: [
-      { url: '/favicon.ico', type: 'image/x-icon', sizes: 'any' },
-      { url: '/favicon-16x16.png', type: 'image/png', sizes: '16x16' },
-      { url: '/favicon-32x32.png', type: 'image/png', sizes: '32x32' },
-      { url: '/favicon.png', type: 'image/png', sizes: '96x96' },
-      {
-        url: '/favicon.ico',
-        type: 'image/x-icon',
-        sizes: 'any',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: '/favicon-16x16.png',
-        type: 'image/png',
-        sizes: '16x16',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: '/favicon-32x32.png',
-        type: 'image/png',
-        sizes: '32x32',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: '/favicon-96x96.png',
-        type: 'image/png',
-        sizes: '96x96',
-        media: '(prefers-color-scheme: dark)',
-      },
+    icons: {
+      icon: [
+        { url: '/favicon.ico', type: 'image/x-icon', sizes: 'any' },
+        { url: '/favicon-16x16.png', type: 'image/png', sizes: '16x16' },
+        { url: '/favicon-32x32.png', type: 'image/png', sizes: '32x32' },
+        { url: '/favicon.png', type: 'image/png', sizes: '96x96' },
+        {
+          url: '/favicon.ico',
+          type: 'image/x-icon',
+          sizes: 'any',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/favicon-16x16.png',
+          type: 'image/png',
+          sizes: '16x16',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/favicon-32x32.png',
+          type: 'image/png',
+          sizes: '32x32',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/favicon-96x96.png',
+          type: 'image/png',
+          sizes: '96x96',
+          media: '(prefers-color-scheme: dark)',
+        },

-      { url: '/appicon/icon-36x36.png', type: 'image/png', sizes: '36x36' },
-      { url: '/appicon/icon-48x48.png', type: 'image/png', sizes: '48x48' },
-      { url: '/appicon/icon-72x72.png', type: 'image/png', sizes: '72x72' },
-      { url: '/appicon/icon-96x96.png', type: 'image/png', sizes: '96x96' },
-      { url: '/appicon/icon-144x144.png', type: 'image/png', sizes: '144x144' },
-      { url: '/appicon/icon.png', type: 'image/png', sizes: '192x192' },
-      {
-        url: '/appicon/icon-36x36.png',
-        type: 'image/png',
-        sizes: '36x36',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: '/appicon/icon-48x48.png',
-        type: 'image/png',
-        sizes: '48x48',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: '/appicon/icon-72x72.png',
-        type: 'image/png',
-        sizes: '72x72',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: '/appicon/icon-96x96.png',
-        type: 'image/png',
-        sizes: '96x96',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: '/appicon/icon-144x144.png',
-        type: 'image/png',
-        sizes: '144x144',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: '/appicon/icon.png',
-        type: 'image/png',
-        sizes: '192x192',
-        media: '(prefers-color-scheme: dark)',
-      },
-    ],
-    shortcut: [
-      { url: '/appicon/icon-36x36.png', type: 'image/png', sizes: '36x36' },
-      { url: '/appicon/icon-48x48.png', type: 'image/png', sizes: '48x48' },
-      { url: '/appicon/icon-72x72.png', type: 'image/png', sizes: '72x72' },
-      { url: '/appicon/icon-96x96.png', type: 'image/png', sizes: '96x96' },
-      { url: '/appicon/icon-144x144.png', type: 'image/png', sizes: '144x144' },
-      { url: '/appicon/icon.png', type: 'image/png', sizes: '192x192' },
-      {
-        url: '/appicon/icon-36x36.png',
-        type: 'image/png',
-        sizes: '36x36',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: '/appicon/icon-48x48.png',
-        type: 'image/png',
-        sizes: '48x48',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: '/appicon/icon-72x72.png',
-        type: 'image/png',
-        sizes: '72x72',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: '/appicon/icon-96x96.png',
-        type: 'image/png',
-        sizes: '96x96',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: '/appicon/icon-144x144.png',
-        type: 'image/png',
-        sizes: '144x144',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: '/appicon/icon.png',
-        type: 'image/png',
-        sizes: '192x192',
-        media: '(prefers-color-scheme: dark)',
-      },
-    ],
-    apple: [
-      { url: 'appicon/icon-57x57.png', type: 'image/png', sizes: '57x57' },
-      { url: 'appicon/icon-60x60.png', type: 'image/png', sizes: '60x60' },
-      { url: 'appicon/icon-72x72.png', type: 'image/png', sizes: '72x72' },
-      { url: 'appicon/icon-76x76.png', type: 'image/png', sizes: '76x76' },
-      { url: 'appicon/icon-114x114.png', type: 'image/png', sizes: '114x114' },
-      { url: 'appicon/icon-120x120.png', type: 'image/png', sizes: '120x120' },
-      { url: 'appicon/icon-144x144.png', type: 'image/png', sizes: '144x144' },
-      { url: 'appicon/icon-152x152.png', type: 'image/png', sizes: '152x152' },
-      { url: 'appicon/icon-180x180.png', type: 'image/png', sizes: '180x180' },
-      { url: 'appicon/icon.png', type: 'image/png', sizes: '192x192' },
-      {
-        url: 'appicon/icon-57x57.png',
-        type: 'image/png',
-        sizes: '57x57',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: 'appicon/icon-60x60.png',
-        type: 'image/png',
-        sizes: '60x60',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: 'appicon/icon-72x72.png',
-        type: 'image/png',
-        sizes: '72x72',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: 'appicon/icon-76x76.png',
-        type: 'image/png',
-        sizes: '76x76',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: 'appicon/icon-114x114.png',
-        type: 'image/png',
-        sizes: '114x114',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: 'appicon/icon-120x120.png',
-        type: 'image/png',
-        sizes: '120x120',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: 'appicon/icon-144x144.png',
-        type: 'image/png',
-        sizes: '144x144',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: 'appicon/icon-152x152.png',
-        type: 'image/png',
-        sizes: '152x152',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: 'appicon/icon-180x180.png',
-        type: 'image/png',
-        sizes: '180x180',
-        media: '(prefers-color-scheme: dark)',
-      },
-      {
-        url: 'appicon/icon.png',
-        type: 'image/png',
-        sizes: '192x192',
-        media: '(prefers-color-scheme: dark)',
-      },
-    ],
-    other: [
-      {
-        rel: 'apple-touch-icon-precomposed',
-        url: '/appicon/icon-precomposed.png',
-        type: 'image/png',
-        sizes: '180x180',
-      },
-    ],
-  },
-  twitter: {
-    card: 'app',
-    title: 'T3 Template',
-    description: 'Created by Gib with T3!',
-    siteId: '',
-    creator: '@cs_gib',
-    creatorId: '',
-    images: {
-      url: 'https://git.gbrown.org/gib/T3-Template/raw/main/public/icons/apple/icon.png',
-      alt: 'T3 Template',
+        { url: '/appicon/icon-36x36.png', type: 'image/png', sizes: '36x36' },
+        { url: '/appicon/icon-48x48.png', type: 'image/png', sizes: '48x48' },
+        { url: '/appicon/icon-72x72.png', type: 'image/png', sizes: '72x72' },
+        { url: '/appicon/icon-96x96.png', type: 'image/png', sizes: '96x96' },
+        {
+          url: '/appicon/icon-144x144.png',
+          type: 'image/png',
+          sizes: '144x144',
+        },
+        { url: '/appicon/icon.png', type: 'image/png', sizes: '192x192' },
+        {
+          url: '/appicon/icon-36x36.png',
+          type: 'image/png',
+          sizes: '36x36',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/appicon/icon-48x48.png',
+          type: 'image/png',
+          sizes: '48x48',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/appicon/icon-72x72.png',
+          type: 'image/png',
+          sizes: '72x72',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/appicon/icon-96x96.png',
+          type: 'image/png',
+          sizes: '96x96',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/appicon/icon-144x144.png',
+          type: 'image/png',
+          sizes: '144x144',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/appicon/icon.png',
+          type: 'image/png',
+          sizes: '192x192',
+          media: '(prefers-color-scheme: dark)',
+        },
+      ],
+      shortcut: [
+        { url: '/appicon/icon-36x36.png', type: 'image/png', sizes: '36x36' },
+        { url: '/appicon/icon-48x48.png', type: 'image/png', sizes: '48x48' },
+        { url: '/appicon/icon-72x72.png', type: 'image/png', sizes: '72x72' },
+        { url: '/appicon/icon-96x96.png', type: 'image/png', sizes: '96x96' },
+        {
+          url: '/appicon/icon-144x144.png',
+          type: 'image/png',
+          sizes: '144x144',
+        },
+        { url: '/appicon/icon.png', type: 'image/png', sizes: '192x192' },
+        {
+          url: '/appicon/icon-36x36.png',
+          type: 'image/png',
+          sizes: '36x36',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/appicon/icon-48x48.png',
+          type: 'image/png',
+          sizes: '48x48',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/appicon/icon-72x72.png',
+          type: 'image/png',
+          sizes: '72x72',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/appicon/icon-96x96.png',
+          type: 'image/png',
+          sizes: '96x96',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/appicon/icon-144x144.png',
+          type: 'image/png',
+          sizes: '144x144',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: '/appicon/icon.png',
+          type: 'image/png',
+          sizes: '192x192',
+          media: '(prefers-color-scheme: dark)',
+        },
+      ],
+      apple: [
+        { url: 'appicon/icon-57x57.png', type: 'image/png', sizes: '57x57' },
+        { url: 'appicon/icon-60x60.png', type: 'image/png', sizes: '60x60' },
+        { url: 'appicon/icon-72x72.png', type: 'image/png', sizes: '72x72' },
+        { url: 'appicon/icon-76x76.png', type: 'image/png', sizes: '76x76' },
+        {
+          url: 'appicon/icon-114x114.png',
+          type: 'image/png',
+          sizes: '114x114',
+        },
+        {
+          url: 'appicon/icon-120x120.png',
+          type: 'image/png',
+          sizes: '120x120',
+        },
+        {
+          url: 'appicon/icon-144x144.png',
+          type: 'image/png',
+          sizes: '144x144',
+        },
+        {
+          url: 'appicon/icon-152x152.png',
+          type: 'image/png',
+          sizes: '152x152',
+        },
+        {
+          url: 'appicon/icon-180x180.png',
+          type: 'image/png',
+          sizes: '180x180',
+        },
+        { url: 'appicon/icon.png', type: 'image/png', sizes: '192x192' },
+        {
+          url: 'appicon/icon-57x57.png',
+          type: 'image/png',
+          sizes: '57x57',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: 'appicon/icon-60x60.png',
+          type: 'image/png',
+          sizes: '60x60',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: 'appicon/icon-72x72.png',
+          type: 'image/png',
+          sizes: '72x72',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: 'appicon/icon-76x76.png',
+          type: 'image/png',
+          sizes: '76x76',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: 'appicon/icon-114x114.png',
+          type: 'image/png',
+          sizes: '114x114',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: 'appicon/icon-120x120.png',
+          type: 'image/png',
+          sizes: '120x120',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: 'appicon/icon-144x144.png',
+          type: 'image/png',
+          sizes: '144x144',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: 'appicon/icon-152x152.png',
+          type: 'image/png',
+          sizes: '152x152',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: 'appicon/icon-180x180.png',
+          type: 'image/png',
+          sizes: '180x180',
+          media: '(prefers-color-scheme: dark)',
+        },
+        {
+          url: 'appicon/icon.png',
+          type: 'image/png',
+          sizes: '192x192',
+          media: '(prefers-color-scheme: dark)',
+        },
+      ],
+      other: [
+        {
+          rel: 'apple-touch-icon-precomposed',
+          url: '/appicon/icon-precomposed.png',
+          type: 'image/png',
+          sizes: '180x180',
+        },
+      ],
    },
-    app: {
-      name: 'T3 Template',
-      id: {
-        iphone: '',
-        ipad: '',
-        googleplay: '',
+    other: {
+      ...Sentry.getTraceData(),
+    },
+    twitter: {
+      card: 'app',
+      title: 'T3 Template',
+      description: 'Created by Gib with T3!',
+      siteId: '',
+      creator: '@cs_gib',
+      creatorId: '',
+      images: {
+        url: 'https://git.gbrown.org/gib/T3-Template/raw/main/public/icons/apple/icon.png',
+        alt: 'T3 Template',
      },
-      url: {
-        iphone: '',
-        ipad: '',
-        googleplay: '',
+      app: {
+        name: 'T3 Template',
+        id: {
+          iphone: '',
+          ipad: '',
+          googleplay: '',
+        },
+        url: {
+          iphone: '',
+          ipad: '',
+          googleplay: '',
+        },
      },
    },
-  },
-  verification: {
-    google: 'google',
-    yandex: 'yandex',
-    yahoo: 'yahoo',
-  },
-  itunes: {
-    appId: '',
-    appArgument: '',
-  },
-  appleWebApp: {
-    title: 'T3 Template',
-    statusBarStyle: 'black-translucent',
-    startupImage: [
-      '/icons/apple/splash-768x1004.png',
-      {
-        url: '/icons/apple/splash-1536x2008.png',
-        media: '(device-width: 768px) and (device-height: 1024px)',
+    verification: {
+      google: 'google',
+      yandex: 'yandex',
+      yahoo: 'yahoo',
+    },
+    itunes: {
+      appId: '',
+      appArgument: '',
+    },
+    appleWebApp: {
+      title: 'T3 Template',
+      statusBarStyle: 'black-translucent',
+      startupImage: [
+        '/icons/apple/splash-768x1004.png',
+        {
+          url: '/icons/apple/splash-1536x2008.png',
+          media: '(device-width: 768px) and (device-height: 1024px)',
+        },
+      ],
+    },
+    appLinks: {
+      ios: {
+        url: 'https://t3-template.gbrown.org/ios',
+        app_store_id: 't3_template',
+      },
+      android: {
+        package: 'org.gbrown.android/t3-template',
+        app_name: 'app_t3_template',
+      },
+      web: {
+        url: 'https://t3-template.gbrown.org/web',
+        should_fallback: true,
      },
-    ],
-  },
-  appLinks: {
-    ios: {
-      url: 'https://t3-template.gbrown.org/ios',
-      app_store_id: 't3_template',
    },
-    android: {
-      package: 'org.gbrown.android/t3-template',
-      app_name: 'app_t3_template',
+    facebook: {
+      appId: '',
    },
-    web: {
-      url: 'https://t3-template.gbrown.org/web',
-      should_fallback: true,
+    pinterest: {
+      richPin: true,
    },
-  },
-  facebook: {
-    appId: '',
-  },
-  pinterest: {
-    richPin: true,
-  },
-  category: 'technology',
+    category: 'technology',
+  };
 };

 const geist = Geist({
--- a/src/env.js
+++ b/src/env.js
@@ -7,7 +7,11 @@ export const env = createEnv({
   * This way you can ensure the app isn't built with invalid env vars.
   */
  server: {
-    NODE_ENV: z.enum(['development', 'test', 'production']),
+    NODE_ENV: z.enum(['development', 'test', 'production']).default('development'),
+    NEXT_RUNTIME: z.enum(['nodejs', 'edge']).default('nodejs'),
+    SENTRY_URL: z.string().url().default('https://sentry.gbrown.org'),
+    SENTRY_AUTH_TOKEN: z.string().min(1),
+    CI: z.enum(['true', 'false']).default('true'),
  },

  /**
@@ -18,7 +22,8 @@ export const env = createEnv({
  client: {
    NEXT_PUBLIC_SUPABASE_URL: z.string().url(),
    NEXT_PUBLIC_SUPABASE_ANON_KEY: z.string().min(1),
-    NEXT_PUBLIC_SITE_URL: z.string().url(),
+    NEXT_PUBLIC_SITE_URL: z.string().url().default('http://localhost:3000'),
+    NEXT_PUBLIC_SENTRY_DSN: z.string().min(1),
  },

  /**
@@ -27,10 +32,15 @@ export const env = createEnv({
   */
  runtimeEnv: {
    NODE_ENV: process.env.NODE_ENV,
+    NEXT_RUNTIME: process.env.NEXT_RUNTIME,
+    SENTRY_URL: process.env.SENTRY_URL,
+    SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
+    CI: process.env.CI,

    NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL,
    NEXT_PUBLIC_SUPABASE_ANON_KEY: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
    NEXT_PUBLIC_SITE_URL: process.env.NEXT_PUBLIC_SITE_URL,
+    NEXT_PUBLIC_SENTRY_DSN: process.env.NEXT_PUBLIC_SENTRY_DSN,
  },
  /**
   * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
--- a/src/instrumentation.ts
+++ b/src/instrumentation.ts
@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/nextjs';
+import type { Instrumentation } from 'next';
+
+
+export const register = async () => {
+  if (process.env.NEXT_RUNTIME === 'edge') {
+    await import('../sentry.edge.config');
+  } else await import('../sentry.server.config');
+};
+
+export const onRequestError: Instrumentation.onRequestError = (...args) => {
+  Sentry.captureRequestError(...args);
+};
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -12,9 +12,10 @@ export const config = {
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
+     * - /monitoring-tunnel (Sentry monitoring)
     * - images - .svg, .png, .jpg, .jpeg, .gif, .webp
     * Feel free to modify this pattern to include more paths.
     */
-    '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
+    '/((?!_next/static|_next/image|favicon.ico|monitoring-tunnel|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
  ],
 };