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,7 +1,6 @@
-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',
     tracesSampleRate: 1.0,
 
@@ -14,7 +13,11 @@ Sentry.init({
     replaysOnErrorSampleRate: 1.0,
 
     // 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,8 +23,20 @@ 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 sentryNonce = randomBytes(16).toString('hex');
+    return await sequence(
+        sentryHandle({
+            // injectFetchProxyScript: false,
+            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)) {
@@ -35,5 +48,7 @@ export const handle: Handle = sequence(Sentry.sentryHandle(), async ({ event, re
             response.headers.delete("x-sveltekit-page")
 
             return response;
-})
+        }
-export const handleError = Sentry.handleErrorWithSentry();
+    )(input)
+}
+export const handleError = handleErrorWithSentry();