Configure sentry:

- offline transport
- give Sentry a CSP nonce
- disable session replay
- attempt to make tree-shaking sentry easier

packages/website/src/hooks.client.ts

@@ -1,20 +1,23 @@
-import { handleErrorWithSentry, replayIntegration } from "@sentry/sveltekit";
+import { init as initSentry, handleErrorWithSentry, makeBrowserOfflineTransport, makeFetchTransport } from '@sentry/sveltekit';
-import * as Sentry from '@sentry/sveltekit';
 
-Sentry.init({
+initSentry({
-  dsn: 'https://d006c73cc53783930a1521a68ae1c312@o4507835405369344.ingest.de.sentry.io/4507835410481232',
+    dsn: 'https://d006c73cc53783930a1521a68ae1c312@o4507835405369344.ingest.de.sentry.io/4507835410481232',
-  tracesSampleRate: 1.0,
+    tracesSampleRate: 1.0,
 
-  // This sets the sample rate to be 10%. You may want this to be 100% while
+    // This sets the sample rate to be 10%. You may want this to be 100% while
-  // in development and sample at a lower rate in production
+    // in development and sample at a lower rate in production
-  replaysSessionSampleRate: 0.1,
+    replaysSessionSampleRate: 0.1,
 
-  // If the entire session is not sampled, use the below sample rate to sample
+    // If the entire session is not sampled, use the below sample rate to sample
-  // sessions when an error occurs.
+    // sessions when an error occurs.
-  replaysOnErrorSampleRate: 1.0,
+    replaysOnErrorSampleRate: 1.0,
-  
+
-  // If you don't want to use Session Replay, just remove the line below:
+    // If you don't want to use Session Replay, just remove the line below:
-  integrations: [replayIntegration()],
+    //   integrations: [replayIntegration()],
+
+    // To enable offline events caching, use makeBrowserOfflineTransport to wrap
+    // existing transports and queue events using the browsers' IndexedDB storage
+    transport: makeBrowserOfflineTransport(makeFetchTransport),
 });
 
 // If you have a custom error handler, pass it to `handleErrorWithSentry`

packages/website/src/hooks.server.ts

@@ -1,8 +1,9 @@
-import {sequence} from '@sveltejs/kit/hooks';
+import { sequence } from '@sveltejs/kit/hooks';
-import * as Sentry from '@sentry/sveltekit';
+import {init as initSentry, handleErrorWithSentry, sentryHandle} from '@sentry/sveltekit';
 import type { Handle } from "@sveltejs/kit";
+import { randomBytes } from 'crypto';
 
-Sentry.init({
+initSentry({
     dsn: "https://d006c73cc53783930a1521a68ae1c312@o4507835405369344.ingest.de.sentry.io/4507835410481232",
     tracesSampleRate: 1
 })
@@ -22,18 +23,32 @@ const securityHeaders = {
     'Report-To': '{"group":"csp-endpoint","max_age":10886400,"endpoints":[{"url":"https://o4507835405369344.ingest.de.sentry.io/api/4507835410481232/security/?sentry_key=d006c73cc53783930a1521a68ae1c312"}],"include_subdomains":true}',
 }
 
-export const handle: Handle = sequence(Sentry.sentryHandle(), async ({ event, resolve }) => {
+export const handle: Handle = async (input) => {
-    const response = await resolve(event);
+    const sentryNonce = randomBytes(16).toString('hex');
-    Object.entries(securityHeaders).forEach(
+    return await sequence(
-        ([header, value]) => {
+        sentryHandle({
-            if (!response.headers.has(header)) {
+            // injectFetchProxyScript: false,
-                response.headers.set(header, value)
+            fetchProxyScriptNonce: sentryNonce,
+        }),
+        async ({ event, resolve }) => {
+            const response = await resolve(event);
+            let csp = response.headers.get("Content-Security-Policy");
+            if (csp) {
+                response.headers.set("Content-Security-Policy", csp.replace("script-src", "script-src 'nonce-" + sentryNonce + "'"));
             }
+
+            Object.entries(securityHeaders).forEach(
+                ([header, value]) => {
+                    if (!response.headers.has(header)) {
+                        response.headers.set(header, value)
+                    }
+                }
+            );
+
+            response.headers.delete("x-sveltekit-page")
+
+            return response;
         }
-    );
+    )(input)
-
+}
-    response.headers.delete("x-sveltekit-page")
+export const handleError = handleErrorWithSentry();
-
-    return response;
-})
-export const handleError = Sentry.handleErrorWithSentry();