feat(web): enable Sentry node and browser profiling

packages/web/next.config.mjs

@@ -104,6 +104,13 @@ const nextConfig = {
                         key: "Content-Security-Policy",
                         value: "frame-ancestors 'self'",
                     },
+                    // Opts the document into the JS Self-Profiling API, which Sentry's
+                    // browser profiling integration needs in order to start a profiler.
+                    // @see: https://docs.sentry.io/platforms/javascript/guides/nextjs/profiling/browser-profiling/
+                    {
+                        key: "Document-Policy",
+                        value: "js-profiling",
+                    },
                 ],
             },
         ];

packages/web/package.json

@@ -102,6 +102,7 @@
     "@replit/codemirror-lang-svelte": "^6.0.0",
     "@replit/codemirror-vim": "^6.2.1",
     "@sentry/nextjs": "^10.40.0",
+    "@sentry/profiling-node": "^10.40.0",
     "@shopify/lang-jsonc": "^1.0.0",
     "@sourcebot/codemirror-lang-tcl": "^1.0.13",
     "@sourcebot/db": "workspace:*",

packages/web/src/instrumentation-client.ts

@@ -12,11 +12,14 @@ if (!!process.env.NEXT_PUBLIC_SENTRY_WEBAPP_DSN && !!process.env.NEXT_PUBLIC_SEN
     Sentry.init({
         dsn: process.env.NEXT_PUBLIC_SENTRY_WEBAPP_DSN,
         environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT,
-
+        integrations: [
+            Sentry.browserProfilingIntegration(),
+        ],
         tracesSampleRate: 1.0,
-
-        // Setting this option to true will print useful information to the console while you're setting up Sentry.
-        debug: false,
+        // Evaluated once per `Sentry.init()`, i.e. once per page load.
+        profileSessionSampleRate: 1.0,
+        // Profile only while a sampled root span is active, rather than continuously.
+        profileLifecycle: 'trace',
     });
 } else {
     console.debug("[client] Sentry was not initialized");

packages/web/src/sentry.server.config.ts

@@ -3,6 +3,7 @@
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
 import * as Sentry from "@sentry/nextjs";
+import { nodeProfilingIntegration } from "@sentry/profiling-node";
 import { createLogger } from "@sourcebot/shared";
 
 const logger = createLogger('sentry-server-config');
@@ -11,11 +12,14 @@ if (!!process.env.NEXT_PUBLIC_SENTRY_WEBAPP_DSN && !!process.env.NEXT_PUBLIC_SEN
     Sentry.init({
         dsn: process.env.NEXT_PUBLIC_SENTRY_WEBAPP_DSN,
         environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT,
-
+        integrations: [
+            nodeProfilingIntegration(),
+        ],
         tracesSampleRate: 1.0,
-
-        // Setting this option to true will print useful information to the console while you're setting up Sentry.
-        debug: false,
+        // Evaluated once per `Sentry.init()`, i.e. once per server process.
+        profileSessionSampleRate: 1.0,
+        // Profile only while a sampled root span is active, rather than continuously.
+        profileLifecycle: 'trace',
     });
 } else {
     logger.debug("[server] Sentry was not initialized");

yarn.lock

@@ -9380,6 +9380,7 @@ __metadata:
     "@replit/codemirror-lang-svelte": "npm:^6.0.0"
     "@replit/codemirror-vim": "npm:^6.2.1"
     "@sentry/nextjs": "npm:^10.40.0"
+    "@sentry/profiling-node": "npm:^10.40.0"
     "@shopify/lang-jsonc": "npm:^1.0.0"
     "@sourcebot/codemirror-lang-tcl": "npm:^1.0.13"
     "@sourcebot/db": "workspace:*"