feat(errors): added error tracking in prod using sentry (#323)

sim/.gitignore

@@ -55,4 +55,7 @@ next-env.d.ts
 
 # file uploads
 uploads/
-uploads/*
+uploads/*
+
+# Sentry Config File
+.env.sentry-build-plugin

sim/app/global-error.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import NextError from "next/error";
+import { useEffect } from "react";
+
+export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <html>
+      <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} />
+      </body>
+    </html>
+  );
+}

sim/instrumentation-client.ts

@@ -6,6 +6,34 @@
  * 
  */
 
+// This file configures the initialization of Sentry on the client.
+// The added config here will be used whenever a users loads a page in their browser.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs"
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN || undefined,
+  enabled: process.env.NODE_ENV === 'production',
+  environment: process.env.NODE_ENV || 'development',
+  integrations: [
+    Sentry.replayIntegration(),
+  ],
+  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.2 : 1,
+  replaysSessionSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 0,
+  replaysOnErrorSampleRate: process.env.NODE_ENV === 'production' ? 1.0 : 0,
+  debug: process.env.NODE_ENV === 'development',
+  beforeSend(event) {
+    if (process.env.NODE_ENV !== 'production') return null  
+    if (event.request && typeof event.request === 'object') {
+      (event.request as any).ip = null
+    }
+    return event
+  },
+})
+
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart
+
 if (typeof window !== 'undefined') {
   const TELEMETRY_STATUS_KEY = 'simstudio-telemetry-status'
   let telemetryEnabled = true

sim/instrumentation.ts

@@ -13,6 +13,7 @@
 // Set experimental.instrumentationHook = true in next.config.ts to enable this
 
 import { createLogger } from '@/lib/logs/console-logger'
+import * as Sentry from '@sentry/nextjs'
 
 const logger = createLogger('otel-instrumentation')
 
@@ -30,6 +31,16 @@ const DEFAULT_TELEMETRY_CONFIG = {
 }
 
 export async function register() {
+  // Sentry configuration
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    await import('./sentry.server.config')
+  }
+
+  if (process.env.NEXT_RUNTIME === 'edge') {
+    await import('./sentry.edge.config')
+  }
+
+  // OpenTelemetry instrumentation
   if (process.env.NEXT_RUNTIME === 'nodejs') {
     try {
       if (process.env.NEXT_TELEMETRY_DISABLED === '1') {
@@ -93,4 +104,6 @@ export async function register() {
       logger.error('Failed to initialize OpenTelemetry instrumentation', error)
     }
   }
-} 
+} 
+
+export const onRequestError = Sentry.captureRequestError 

sim/next.config.ts

@@ -1,3 +1,4 @@
+import { withSentryConfig } from '@sentry/nextjs';
 import type { NextConfig } from 'next'
 
 const nextConfig: NextConfig = {
@@ -92,4 +93,12 @@ const nextConfig: NextConfig = {
   },
 }
 
-export default nextConfig
+export default withSentryConfig(nextConfig, {
+  org: 'sim-studio',
+  project: 'javascript-nextjs',
+  silent: !process.env.CI,
+  widenClientFileUpload: true,
+  tunnelRoute: "/monitoring",
+  disableLogger: true,
+  automaticVercelMonitors: true,
+})

sim/package.json

@@ -64,6 +64,7 @@
     "@radix-ui/react-toggle": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.6",
     "@react-email/components": "^0.0.34",
+    "@sentry/nextjs": "^9.15.0",
     "@vercel/og": "^0.6.5",
     "@vercel/speed-insights": "^1.2.0",
     "ai": "^4.3.2",

sim/sentry.edge.config.ts

@@ -0,0 +1,22 @@
+// 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: process.env.NEXT_PUBLIC_SENTRY_DSN || undefined,
+  enabled: process.env.NODE_ENV === 'production',
+  environment: process.env.NODE_ENV || 'development',
+  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.2 : 1,
+  debug: process.env.NODE_ENV === 'development',
+  
+  beforeSend(event) {
+    if (process.env.NODE_ENV !== 'production') return null
+    if (event.request && typeof event.request === 'object') {
+      (event.request as any).ip = null
+    }
+    return event
+  },
+})

sim/sentry.server.config.ts

@@ -0,0 +1,22 @@
+// 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: process.env.NEXT_PUBLIC_SENTRY_DSN || undefined,
+  enabled: process.env.NODE_ENV === 'production',
+  environment: process.env.NODE_ENV || 'development',
+  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.2 : 1,
+  debug: process.env.NODE_ENV === 'development',
+  
+  beforeSend(event) {
+    if (process.env.NODE_ENV !== 'production') return null
+    
+    if (event.request && typeof event.request === 'object') {
+      (event.request as any).ip = null
+    }
+    return event
+  },
+})