Add sentry stuff

2026-01-13 15:56:34 -06:00
parent c4d78428e6
commit 4bdbb3feb1
5 changed files with 128 additions and 0 deletions
--- a/apps/next/src/app/global-error.tsx
+++ b/apps/next/src/app/global-error.tsx
@@ -0,0 +1,79 @@
+'use client';
+
+import type { Metadata, Viewport } from 'next';
+import NextError from 'next/error';
+import { Geist, Geist_Mono } from 'next/font/google';
+import '@/app/styles.css';
+import { useEffect } from 'react';
+import Footer from '@/components/layout/footer';
+import Header from '@/components/layout/header';
+import * as Sentry from '@sentry/nextjs';
+import { ConvexClientProvider } from '@/components/providers';
+import { generateMetadata } from '@/lib/metadata';
+import PlausibleProvider from 'next-plausible';
+
+import { Button, ThemeProvider, Toaster } from '@gib/ui';
+
+export const metadata: Metadata = generateMetadata();
+
+export const viewport: Viewport = {
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: 'white' },
+    { media: '(prefers-color-scheme: dark)', color: 'black' },
+  ],
+};
+
+const geistSans = Geist({
+  subsets: ['latin'],
+  variable: '--font-geist-sans',
+});
+const geistMono = Geist_Mono({
+  subsets: ['latin'],
+  variable: '--font-geist-mono',
+});
+
+interface GlobalErrorProps {
+  error: Error & { digest?: string };
+  reset?: () => void;
+};
+
+const GlobalError = ({ error, reset = undefined }: GlobalErrorProps) => {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+  return (
+    <PlausibleProvider
+      domain="convexmonorepo.gbrown.org"
+      customDomain="https://plausible.gbrown.org"
+    >
+      <html lang="en" suppressHydrationWarning>
+        <body
+          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        >
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+            <ConvexClientProvider>
+              <main className="flex min-h-screen flex-col items-center">
+                <Header />
+                <NextError statusCode={0} />
+                {reset !== undefined && (
+                  <Button onClick={() => reset()}>Try Again</Button>
+                )}
+                <Toaster />
+                <Footer />
+              </main>
+              <main className="flex min-h-[90vh] flex-col items-center">
+                <Toaster />
+              </main>
+            </ConvexClientProvider>
+          </ThemeProvider>
+        </body>
+      </html>
+    </PlausibleProvider>
+  );
+};
+export default GlobalError;
--- a/apps/next/src/instrumentation-client.ts
+++ b/apps/next/src/instrumentation-client.ts
@@ -0,0 +1,28 @@
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+import * as Sentry from '@sentry/nextjs';
+
+import { env } from './env.js';
+
+Sentry.init({
+  dsn: env.NEXT_PUBLIC_SENTRY_DSN,
+  integrations: [
+    Sentry.replayIntegration({
+      maskAllText: false,
+      blockAllMedia: false,
+    }),
+    Sentry.feedbackIntegration({
+      colorScheme: 'system',
+    }),
+  ],
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
+  sendDefaultPii: true,
+  // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
+  tracesSampleRate: 1,
+  enableLogs: true,
+  // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
+  replaysSessionSampleRate: 0.5,
+  replaysOnErrorSampleRate: 1.0,
+  debug: false,
+});
+// `captureRouterTransitionStart` is available from SDK version 9.12.0 onwards
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;
--- a/apps/next/src/instrumentation.ts
+++ b/apps/next/src/instrumentation.ts
@@ -0,0 +1,7 @@
+import type { Instrumentation } from 'next';
+import * as Sentry from '@sentry/nextjs';
+
+export const register = async () => await import('./sentry.server.config');
+export const onRequestError: Instrumentation.onRequestError = (...args) => {
+  Sentry.captureRequestError(...args);
+};
--- a/apps/next/src/sentry.server.config.ts
+++ b/apps/next/src/sentry.server.config.ts
@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/nextjs';
+
+import { env } from './env.js';
+
+Sentry.init({
+  dsn: env.NEXT_PUBLIC_SENTRY_DSN,
+  tracesSampleRate: 1,
+  enableLogs: true,
+  debug: false,
+});