Add Sentry env vars and refactor Sentry init (#2584)

Co-authored-by: Ariel Weinberger <Weinberger.Ariel@gmail.com>

Author: TorstenDittmann

Dockerfile

@@ -31,9 +31,16 @@ ARG PUBLIC_CONSOLE_MOCK_AI_SUGGESTIONS
 ARG PUBLIC_APPWRITE_ENDPOINT
 ARG PUBLIC_GROWTH_ENDPOINT
 ARG PUBLIC_STRIPE_KEY
+ARG PUBLIC_SENTRY_DSN
+ARG PUBLIC_SENTRY_INCLUDE_PII
+ARG PUBLIC_SENTRY_ENVIRONMENT
+ARG PUBLIC_SENTRY_TRACES_SAMPLE_RATE
+ARG PUBLIC_SENTRY_REPLAY_SAMPLE_RATE
+ARG PUBLIC_SENTRY_DEBUG
 ARG SENTRY_AUTH_TOKEN
 ARG SENTRY_RELEASE
 
+
 ENV PUBLIC_APPWRITE_ENDPOINT=$PUBLIC_APPWRITE_ENDPOINT
 ENV PUBLIC_GROWTH_ENDPOINT=$PUBLIC_GROWTH_ENDPOINT
 ENV PUBLIC_CONSOLE_MODE=$PUBLIC_CONSOLE_MODE
@@ -44,6 +51,12 @@ ENV PUBLIC_APPWRITE_MULTI_REGION=$PUBLIC_APPWRITE_MULTI_REGION
 ENV PUBLIC_CONSOLE_EMAIL_VERIFICATION=$PUBLIC_CONSOLE_EMAIL_VERIFICATION
 ENV PUBLIC_CONSOLE_MOCK_AI_SUGGESTIONS=$PUBLIC_CONSOLE_MOCK_AI_SUGGESTIONS
 ENV PUBLIC_STRIPE_KEY=$PUBLIC_STRIPE_KEY
+ENV PUBLIC_SENTRY_DSN=$PUBLIC_SENTRY_DSN
+ENV PUBLIC_SENTRY_INCLUDE_PII=$PUBLIC_SENTRY_INCLUDE_PII
+ENV PUBLIC_SENTRY_ENVIRONMENT=$PUBLIC_SENTRY_ENVIRONMENT
+ENV PUBLIC_SENTRY_TRACES_SAMPLE_RATE=$PUBLIC_SENTRY_TRACES_SAMPLE_RATE
+ENV PUBLIC_SENTRY_REPLAY_SAMPLE_RATE=$PUBLIC_SENTRY_REPLAY_SAMPLE_RATE
+ENV PUBLIC_SENTRY_DEBUG=$PUBLIC_SENTRY_DEBUG
 ENV SENTRY_AUTH_TOKEN=$SENTRY_AUTH_TOKEN
 ENV SENTRY_RELEASE=$SENTRY_RELEASE
 ENV PUBLIC_IMAGINE_CDN_URL=$PUBLIC_IMAGINE_CDN_URL

src/hooks.client.ts

@@ -1,20 +1,15 @@
-import * as Sentry from '@sentry/sveltekit';
-import { isCloud, isProd } from '$lib/system';
 import { AppwriteException } from '@appwrite.io/console';
 import type { HandleClientError } from '@sveltejs/kit';
+import { setupSentry } from '$lib/sentry';
 
-Sentry.init({
-    enabled: isCloud && isProd,
-    dsn: 'https://c7ce178bdedd486480317b72f282fd39@o1063647.ingest.us.sentry.io/4504158071422976',
-    tracesSampleRate: 1,
-    replaysSessionSampleRate: 0,
-    replaysOnErrorSampleRate: 0
+setupSentry({
+    withSessionReplay: true
 });
 
 export const handleError: HandleClientError = ({ error, message, status }) => {
     console.error(error);
 
-    let type;
+    let type: string;
     if (error instanceof AppwriteException) {
         status = error.code === 0 ? undefined : error.code;
         message = error.message;

src/hooks.server.ts

@@ -1,12 +1,9 @@
 import { sequence } from '@sveltejs/kit/hooks';
 import { handleErrorWithSentry, sentryHandle } from '@sentry/sveltekit';
-import * as Sentry from '@sentry/sveltekit';
-import { isCloud, isProd } from '$lib/system';
+import { setupSentry } from '$lib/sentry';
 
-Sentry.init({
-    enabled: isCloud && isProd,
-    dsn: 'https://c7ce178bdedd486480317b72f282fd39@o1063647.ingest.us.sentry.io/4504158071422976',
-    tracesSampleRate: 1.0
+setupSentry({
+    withSessionReplay: false
 });
 
 export const handle = sequence(sentryHandle());

src/lib/sentry.ts

@@ -0,0 +1,64 @@
+import { env } from '$env/dynamic/public';
+import * as Sentry from '@sentry/sveltekit';
+import { isCloud } from './system';
+
+const timestamp = Date.now();
+
+export function getSessionId(userId: string) {
+    return `${userId}-${timestamp}`;
+}
+
+export function identify(userId: string) {
+    if (isCloud) {
+        Sentry.setContext('Imagine Request Context', {
+            session_id: getSessionId(userId)
+        });
+        Sentry.setUser({
+            id: userId
+        });
+    }
+}
+
+export function setupSentry({ withSessionReplay }: { withSessionReplay: boolean }) {
+    const dsn = env.PUBLIC_SENTRY_DSN;
+    const environment = env.PUBLIC_SENTRY_ENVIRONMENT;
+
+    if (!dsn) {
+        return;
+    }
+
+    if (dsn && !environment) {
+        throw new Error(
+            "PUBLIC_SENTRY_ENVIRONMENT is required when PUBLIC_SENTRY_DSN is set. For local development, set it to your name, e.g. 'torsten'."
+        );
+    }
+
+    const variables = {
+        enabled: true,
+        includePII: env.PUBLIC_SENTRY_INCLUDE_PII === 'true',
+        tracesSampleRate: parseFloat(env.PUBLIC_SENTRY_TRACES_SAMPLE_RATE),
+        replaysSessionSampleRate: parseFloat(env.PUBLIC_SENTRY_REPLAY_SAMPLE_RATE),
+        debug: env.PUBLIC_SENTRY_DEBUG === 'true'
+    };
+
+    const integrations = [];
+    if (withSessionReplay) {
+        integrations.push(
+            Sentry.replayIntegration({
+                maskAllText: variables.includePII ? false : true,
+                maskAllInputs: variables.includePII ? false : true
+            })
+        );
+    }
+
+    Sentry.init({
+        enabled: variables.enabled,
+        dsn,
+        tracesSampleRate: variables.tracesSampleRate,
+        replaysSessionSampleRate: variables.replaysSessionSampleRate,
+        replaysOnErrorSampleRate: 1,
+        integrations,
+        debug: variables.debug,
+        sendDefaultPii: true
+    });
+}

src/lib/studio/studio-widget.ts

@@ -5,6 +5,7 @@ import { goto } from '$app/navigation';
 import { resolve } from '$app/paths';
 import { ensureMonacoStyles } from './monaco-style-manager';
 import DEV_CSS_URL from '@imagine.dev/web-components/imagine-web-components.css?url';
+import { getSessionId } from '$lib/sentry';
 
 const COMPONENT_SELECTOR = 'imagine-web-components-wrapper[data-appwrite-studio]';
 const STYLE_ATTRIBUTE = 'data-appwrite-studio-style';
@@ -273,6 +274,7 @@ export function hideStudio() {
 export async function initImagine(
     region: string,
     projectId: string,
+    userId: string,
     callbacks?: {
         onProjectNameChange: () => void;
         onAddDomain: () => void | Promise<void>;
@@ -291,6 +293,7 @@ export async function initImagine(
                 },
                 {
                     initialTheme: get(app).themeInUse,
+                    consoleSessionId: getSessionId(userId),
                     callbacks
                 }
             );

src/lib/studio/studio.svelte

@@ -18,10 +18,12 @@
 
     const {
         region,
-        projectId
+        projectId,
+        userId
     }: {
         region: string;
         projectId: string;
+        userId: string;
     } = $props();
 
     const siteId = `project-${projectId}`;
@@ -31,7 +33,7 @@
     onMount(() => {
         ensureStudioComponent();
 
-        initImagine(region, projectId, {
+        initImagine(region, projectId, userId, {
             onProjectNameChange: () => {
                 invalidate(Dependencies.PROJECT);
             },

src/routes/(console)/+layout.svelte

@@ -333,7 +333,7 @@
     });
 </script>
 
-<Studio region={page.params.region} projectId={page.params.project} />
+<Studio region={page.params.region} projectId={page.params.project} userId={data.account.$id} />
 <CommandCenter />
 <Shell
     showSideNavigation={page.url.pathname !== '/' &&

src/routes/+layout.ts

@@ -11,6 +11,7 @@ import type { Account } from '$lib/stores/user';
 import { type AppwriteException, Query } from '@appwrite.io/console';
 import { isCloud, VARS } from '$lib/system';
 import { checkPricingRefAndRedirect } from '$lib/helpers/pricingRedirect';
+import { identify } from '$lib/sentry';
 import { resolvedProfile } from '$lib/profiles/index.svelte';
 
 export const ssr = false;
@@ -24,6 +25,8 @@ export const load: LayoutLoad = async ({ depends, url, route }) => {
         .then((response) => [response, null])
         .catch((error) => [null, error])) as [Account, AppwriteException];
 
+    if (account) identify(account.$id);
+
     if (url.searchParams.has('forceRedirect')) {
         redirectTo.set(url.searchParams.get('forceRedirect') || null);
         url.searchParams.delete('forceRedirect');