feat(docs): add sentry

apps/docs/next.config.mjs

@@ -1,3 +1,4 @@
+import { withSentryConfig } from "@sentry/nextjs";
 import { createMDX } from "fumadocs-mdx/next";
 
 const withMDX = createMDX();
@@ -12,4 +13,43 @@ const config = {
   },
 };
 
-export default withMDX(config);
+export default withSentryConfig(withMDX(config), {
+  // For all available options, see:
+  // https://www.npmjs.com/package/@sentry/webpack-plugin#options
+
+  org: "prisma-ch",
+
+  project: "javascript-nextjs",
+
+  authToken: process.env.SENTRY_AUTH_TOKEN,
+  tunnelRoute: "/monitoring",
+
+  // Only print logs for uploading source maps in CI\
+  silent: !process.env.CI,
+
+  // For all available options, see:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
+
+  // Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+  // This can increase your server load as well as your hosting bill.
+  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+  // side errors will fail.
+  // tunnelRoute: "/monitoring",
+
+  webpack: {
+    // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
+    // See the following for more information:
+    // https://docs.sentry.io/product/crons/
+    // https://vercel.com/docs/cron-jobs
+    automaticVercelMonitors: true,
+
+    // Tree-shaking options for reducing bundle size
+    treeshake: {
+      // Automatically tree-shake Sentry logger statements to reduce bundle size
+      removeDebugLogging: true,
+    },
+  },
+});

apps/docs/package.json

@@ -23,6 +23,7 @@
     "@prisma-docs/eclipse": "workspace:^",
     "@prisma-docs/ui": "workspace:*",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@sentry/nextjs": "^10.38.0",
     "@streamdown/code": "^1.0.1",
     "class-variance-authority": "^0.7.1",
     "dexie": "^4.2.1",

apps/docs/sentry.edge.config.ts

@@ -0,0 +1,20 @@
+// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
+// The config you add here will be used whenever one of the edge features is loaded.
+// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: "https://e83ce4699e59051fdeaa330bf4a0dfb9@o4510879743737856.ingest.us.sentry.io/4510879744000000",
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,
+
+  // Enable logs to be sent to Sentry
+  enableLogs: true,
+
+  // Enable sending user PII (Personally Identifiable Information)
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
+  sendDefaultPii: true,
+});

apps/docs/sentry.server.config.ts

@@ -0,0 +1,19 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: "https://e83ce4699e59051fdeaa330bf4a0dfb9@o4510879743737856.ingest.us.sentry.io/4510879744000000",
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,
+
+  // Enable logs to be sent to Sentry
+  enableLogs: true,
+
+  // Enable sending user PII (Personally Identifiable Information)
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
+  sendDefaultPii: true,
+});

apps/docs/src/app/global-error.tsx

@@ -0,0 +1,106 @@
+"use client";
+import { useEffect } from "react";
+import * as Sentry from "@sentry/nextjs";
+import { DocsLayout } from "@/components/layout/notebook";
+
+export default function GlobalError({
+  error,
+}: {
+  error: Error & { digest?: string };
+}) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <html>
+      <head>
+        <style>{`
+          * { box-sizing: border-box; }
+          body {
+            margin: 0;
+            min-height: 100vh;
+            font-family: system-ui, -apple-system, sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            overflow: hidden;
+            position: fixed;
+            inset: 0;
+            color: #e5e5e5;
+            background: #131420;
+            background-size: 100% 4px;
+          }
+          .glitch {
+            position: relative;
+            font-size: 10rem;
+            font-weight: 800;
+            margin-bottom: 1rem;
+            pointer-events: none;
+          }
+          .glitch::before,
+          .glitch::after {
+            content: attr(data-text);
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            overflow: hidden;
+          }
+          .glitch::before {
+            left: 2px;
+            text-shadow: -2px 0 red;
+            animation: glitch-1 2s infinite linear alternate-reverse;
+          }
+          .glitch::after {
+            left: -2px;
+            text-shadow: -2px 0 cyan;
+            animation: glitch-2 1.5s infinite linear alternate-reverse;
+          }
+          @keyframes glitch-1 {
+            0% { clip-path: inset(20% 0 60% 0); }
+            20% { clip-path: inset(10% 0 85% 0); }
+            40% { clip-path: inset(40% 0 40% 0); }
+            60% { clip-path: inset(80% 0 5% 0); }
+            80% { clip-path: inset(50% 0 30% 0); }
+            100% { clip-path: inset(25% 0 55% 0); }
+          }
+          @keyframes glitch-2 {
+            0% { clip-path: inset(80% 0 5% 0); }
+            20% { clip-path: inset(50% 0 30% 0); }
+            40% { clip-path: inset(20% 0 60% 0); }
+            60% { clip-path: inset(10% 0 85% 0); }
+            80% { clip-path: inset(40% 0 40% 0); }
+            100% { clip-path: inset(75% 0 15% 0); }
+          }
+          @media (prefers-reduced-motion: reduce) {
+            .glitch::before, .glitch::after { animation: none; }
+          }
+          .subtitle {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: white;
+            margin-bottom: 1rem;
+          }
+          a {
+            color: #e5e5e5;
+            text-decoration: none;
+            transition: text-decoration 0.2s;
+          }
+          a:hover {
+            text-decoration: underline;
+          }
+        `}</style>
+      </head>
+      <body>
+        <h1 className="glitch" data-text="Error">
+          Error
+        </h1>
+        <p className="subtitle">Something went wrong</p>
+        <a href="/">Go to docs</a>
+      </body>
+    </html>
+  );
+}

apps/docs/src/instrumentation-client.ts

@@ -1,4 +1,5 @@
 import posthog from "posthog-js";
+import * as Sentry from "@sentry/nextjs";
 
 posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
   api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
@@ -11,3 +12,18 @@ posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
     });
   },
 });
+
+Sentry.init({
+  dsn: "https://e83ce4699e59051fdeaa330bf4a0dfb9@o4510879743737856.ingest.us.sentry.io/4510879744000000",
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,
+  // Enable logs to be sent to Sentry
+  enableLogs: true,
+
+  // Enable sending user PII (Personally Identifiable Information)
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
+  sendDefaultPii: true,
+});
+
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;

apps/docs/src/instrumentation.ts

@@ -0,0 +1,13 @@
+import * as Sentry from "@sentry/nextjs";
+
+export async function register() {
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    await import("../sentry.server.config");
+  }
+
+  if (process.env.NEXT_RUNTIME === "edge") {
+    await import("../sentry.edge.config");
+  }
+}
+
+export const onRequestError = Sentry.captureRequestError;