feat: comprehensive sentry setup for studio, continuous tracing

Author: arielweinberger

package.json

@@ -29,7 +29,7 @@
         "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@5b26bb8",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
-        "@sentry/sveltekit": "^8.55.0",
+        "@sentry/sveltekit": "^10.25.0",
         "@stripe/stripe-js": "^3.5.0",
         "ai": "^2.2.37",
         "analytics": "^0.8.19",

pnpm-lock.yaml

@@ -2,9 +2,7 @@ import { AppwriteException } from '@appwrite.io/console';
 import type { HandleClientError } from '@sveltejs/kit';
 import { setupSentry } from '$lib/sentry';
 
-setupSentry({
-    withSessionReplay: true
-});
+setupSentry();
 
 export const handleError: HandleClientError = ({ error, message, status }) => {
     console.error(error);

src/hooks.client.ts

@@ -3,7 +3,8 @@ import { handleErrorWithSentry, sentryHandle } from '@sentry/sveltekit';
 import { setupSentry } from '$lib/sentry';
 
 setupSentry({
-    withSessionReplay: false
+    withSessionReplay: false,
+    withBrowserTracing: false
 });
 
 export const handle = sequence(sentryHandle());

src/hooks.server.ts

@@ -23,14 +23,41 @@ export function getTraceData(): {
     sentryTraceId?: string;
     sentryBaggage?: string;
 } {
-    const traceData = Sentry.getTraceData();
-    return {
-        sentryTraceId: traceData['sentry-trace'],
-        sentryBaggage: traceData.baggage
-    };
+    try {
+        const traceData = Sentry.getTraceData();
+
+        if (traceData) {
+            return {
+                sentryTraceId: traceData['sentry-trace'],
+                sentryBaggage: traceData.baggage
+            }
+        } else {
+            return {
+                sentryTraceId: undefined,
+                sentryBaggage: undefined
+            }
+        }
+    } catch (error) {
+        return {
+            sentryTraceId: undefined,
+            sentryBaggage: undefined
+        }
+    }
 }
 
-export function setupSentry({ withSessionReplay }: { withSessionReplay: boolean }) {
+export function setupSentry(
+    {
+        withSessionReplay = true,
+        withBrowserTracing = true
+    }: { withSessionReplay: boolean; withBrowserTracing: boolean } = {
+        withSessionReplay: true,
+        withBrowserTracing: true
+    }
+) {
+    if (Sentry.isInitialized()) {
+        return;
+    }
+
     const dsn = env.PUBLIC_SENTRY_DSN;
     const environment = env.PUBLIC_SENTRY_ENVIRONMENT;
 
@@ -53,6 +80,7 @@ export function setupSentry({ withSessionReplay }: { withSessionReplay: boolean
     };
 
     const integrations = [];
+
     if (withSessionReplay) {
         integrations.push(
             Sentry.replayIntegration({
@@ -62,6 +90,10 @@ export function setupSentry({ withSessionReplay }: { withSessionReplay: boolean
         );
     }
 
+    if (withBrowserTracing) {
+        integrations.push(Sentry.browserTracingIntegration());
+    }
+
     Sentry.init({
         enabled: variables.enabled,
         dsn,
@@ -70,6 +102,14 @@ export function setupSentry({ withSessionReplay }: { withSessionReplay: boolean
         replaysOnErrorSampleRate: 1,
         integrations,
         debug: variables.debug,
-        sendDefaultPii: true
+        sendDefaultPii: true,
+        tracePropagationTargets: [
+            'localhost',
+            /^\//,
+            /^https:\/\/imagine\.dev(\/|$)/,
+            /^https:\/\/ai-service\.imagine\.dev(\/|$)/,
+            /^https:\/\/staging\.imagine\.dev(\/|$)/,
+            /^https:\/\/ai-service\.staging\.imagine\.dev(\/|$)/
+        ]
     });
 }

src/lib/sentry.ts

@@ -7,6 +7,7 @@ import { ensureMonacoStyles } from './monaco-style-manager';
 import DEV_CSS_URL from '@imagine.dev/web-components/imagine-web-components.css?url';
 import { getSessionId, getTraceData } from '$lib/sentry';
 import type * as WebComponentsType from '@imagine.dev/web-components/web-components';
+import * as Sentry from '@sentry/sveltekit';
 
 const COMPONENT_SELECTOR = 'imagine-web-components-wrapper[data-appwrite-studio]';
 const STYLE_ATTRIBUTE = 'data-appwrite-studio-style';
@@ -281,6 +282,14 @@ export async function initImagine(
         onManageDomains: (primaryDomain?: string) => void | Promise<void>;
     }
 ) {
+    const sessionId = getSessionId(userId);
+    
+    Sentry.setTags({
+        user_id: userId,
+        session_id: sessionId,
+        project_id: projectId,
+    });
+
     try {
         const { initImagineConfig, initImagineRouting } = await getWebComponents();
 
@@ -294,7 +303,7 @@ export async function initImagine(
                 },
                 {
                     initialTheme: get(app).themeInUse,
-                    consoleSessionId: getSessionId(userId),
+                    consoleSessionId: sessionId,
                     sentryTraceId,
                     sentryBaggage,
                     callbacks