fix(sveltekit): Fix SvelteKit Cloudflare usage

packages/sveltekit/package.json

@@ -20,6 +20,10 @@
     "./package.json": "./package.json",
     ".": {
       "types": "./build/types/index.types.d.ts",
+      "worker": {
+        "import": "./build/esm/index.worker.js",
+        "require": "./build/cjs/index.worker.js"
+      },
       "browser": {
         "import": "./build/esm/index.client.js",
         "require": "./build/cjs/index.client.js"
@@ -40,6 +44,7 @@
     }
   },
   "dependencies": {
+    "@sentry/cloudflare": "8.44.0",
     "@sentry/core": "8.44.0",
     "@sentry/node": "8.44.0",
     "@sentry/opentelemetry": "8.44.0",

packages/sveltekit/rollup.npm.config.mjs

@@ -2,7 +2,7 @@ import { makeBaseNPMConfig, makeNPMConfigVariants } from '@sentry-internal/rollu
 
 export default makeNPMConfigVariants(
   makeBaseNPMConfig({
-    entrypoints: ['src/index.server.ts', 'src/index.client.ts', 'src/client/index.ts', 'src/server/index.ts'],
+    entrypoints: ['src/index.server.ts', 'src/index.client.ts', 'src/index.worker.ts', 'src/client/index.ts', 'src/server/index.ts', 'src/worker/index.ts'],
     packageSpecificConfig: {
       external: ['$app/stores'],
       output: {

packages/sveltekit/src/index.types.ts

@@ -4,6 +4,10 @@
 export * from './client';
 export * from './vite';
 export * from './server';
+export * from './worker';
+
+// Use the ./server version of some functions that are also exported from ./worker
+export { wrapServerLoadWithSentry, wrapServerRouteWithSentry, sentryHandle } from './server';
 
 import type { Client, Integration, Options, StackParser } from '@sentry/core';
 import type { HandleClientError, HandleServerError } from '@sveltejs/kit';

packages/sveltekit/src/index.worker.ts

@@ -0,0 +1,2 @@
+export * from './worker';
+// export * from './vite';

packages/sveltekit/src/server-common/handle.ts

@@ -0,0 +1,181 @@
+import type { continueTrace, Span } from '@sentry/core';
+import {
+  SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
+  SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
+  getActiveSpan,
+  getCurrentScope,
+  getDefaultIsolationScope,
+  getIsolationScope,
+  getTraceMetaTags,
+  logger,
+  setHttpStatus,
+  startSpan,
+  winterCGRequestToRequestData,
+  withIsolationScope,
+} from '@sentry/core';
+import type { Handle, ResolveOptions } from '@sveltejs/kit';
+
+import { DEBUG_BUILD } from '../common/debug-build';
+import { flushIfServerless, getTracePropagationData, sendErrorToSentry } from './utils';
+
+export type SentryHandleOptions = {
+  /**
+   * Controls whether the SDK should capture errors and traces in requests that don't belong to a
+   * route defined in your SvelteKit application.
+   *
+   * By default, this option is set to `false` to reduce noise (e.g. bots sending random requests to your server).
+   *
+   * Set this option to `true` if you want to monitor requests events without a route. This might be useful in certain
+   * scenarios, for instance if you registered other handlers that handle these requests.
+   * If you set this option, you might want adjust the the transaction name in the `beforeSendTransaction`
+   * callback of your server-side `Sentry.init` options. You can also use `beforeSendTransaction` to filter out
+   * transactions that you still don't want to be sent to Sentry.
+   *
+   * @default false
+   */
+  handleUnknownRoutes?: boolean;
+
+  /**
+   * Controls if `sentryHandle` should inject a script tag into the page that enables instrumentation
+   * of `fetch` calls in `load` functions.
+   *
+   * @default true
+   */
+  injectFetchProxyScript?: boolean;
+
+  /**
+   * If this option is set, the `sentryHandle` handler will add a nonce attribute to the script
+   * tag it injects into the page. This script is used to enable instrumentation of `fetch` calls
+   * in `load` functions.
+   *
+   * Use this if your CSP policy blocks the fetch proxy script injected by `sentryHandle`.
+   */
+  fetchProxyScriptNonce?: string;
+};
+
+export const FETCH_PROXY_SCRIPT = `
+    const f = window.fetch;
+    if(f){
+      window._sentryFetchProxy = function(...a){return f(...a)}
+      window.fetch = function(...a){return window._sentryFetchProxy(...a)}
+    }
+`;
+
+/**
+ * Adds Sentry tracing <meta> tags to the returned html page.
+ * Adds Sentry fetch proxy script to the returned html page if enabled in options.
+ * Also adds a nonce attribute to the script tag if users specified one for CSP.
+ */
+export function addSentryCodeToPage(options: SentryHandleOptions): NonNullable<ResolveOptions['transformPageChunk']> {
+  const { fetchProxyScriptNonce, injectFetchProxyScript } = options;
+  // if injectFetchProxyScript is not set, we default to true
+  const shouldInjectScript = injectFetchProxyScript !== false;
+  const nonce = fetchProxyScriptNonce ? `nonce="${fetchProxyScriptNonce}"` : '';
+
+  return ({ html }) => {
+    const metaTags = getTraceMetaTags();
+    const headWithMetaTags = metaTags ? `<head>\n${metaTags}` : '<head>';
+
+    const headWithFetchScript = shouldInjectScript ? `\n<script ${nonce}>${FETCH_PROXY_SCRIPT}</script>` : '';
+
+    const modifiedHead = `${headWithMetaTags}${headWithFetchScript}`;
+
+    return html.replace('<head>', modifiedHead);
+  };
+}
+
+export async function instrumentHandle(
+  { event, resolve }: Parameters<Handle>[0],
+  options: SentryHandleOptions,
+): Promise<Response> {
+  if (!event.route?.id && !options.handleUnknownRoutes) {
+    return resolve(event);
+  }
+
+  const routeName = `${event.request.method} ${event.route?.id || event.url.pathname}`;
+
+  if (getIsolationScope() !== getDefaultIsolationScope()) {
+    getIsolationScope().setTransactionName(routeName);
+  } else {
+    DEBUG_BUILD && logger.warn('Isolation scope is default isolation scope - skipping setting transactionName');
+  }
+
+  try {
+    const resolveResult = await startSpan(
+      {
+        op: 'http.server',
+        attributes: {
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.http.sveltekit',
+          [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: event.route?.id ? 'route' : 'url',
+          'http.method': event.request.method,
+        },
+        name: routeName,
+      },
+      async (span?: Span) => {
+        getCurrentScope().setSDKProcessingMetadata({
+          normalizedRequest: winterCGRequestToRequestData(event.request.clone()),
+        });
+        const res = await resolve(event, {
+          transformPageChunk: addSentryCodeToPage(options),
+        });
+        if (span) {
+          setHttpStatus(span, res.status);
+        }
+        return res;
+      },
+    );
+    return resolveResult;
+  } catch (e: unknown) {
+    sendErrorToSentry(e, 'handle');
+    throw e;
+  } finally {
+    await flushIfServerless();
+  }
+}
+
+/**
+ * A SvelteKit handle function that wraps the request for Sentry error and
+ * performance monitoring.
+ *
+ * Some environments require a different continueTrace function. E.g. Node can use
+ * the Opentelemetry SDK, whereas Cloudflare cannot.
+ */
+export function sentryHandleGeneric(
+  continueTraceFunction: typeof continueTrace,
+  handlerOptions?: SentryHandleOptions,
+): Handle {
+  const options = {
+    handleUnknownRoutes: false,
+    injectFetchProxyScript: true,
+    ...handlerOptions,
+  };
+
+  const sentryRequestHandler: Handle = input => {
+    // event.isSubRequest was added in SvelteKit 1.21.0 and we can use it to check
+    // if we should create a new execution context or not.
+    // In case of a same-origin `fetch` call within a server`load` function,
+    // SvelteKit will actually just re-enter the `handle` function and set `isSubRequest`
+    // to `true` so that no additional network call is made.
+    // We want the `http.server` span of that nested call to be a child span of the
+    // currently active span instead of a new root span to correctly reflect this
+    // behavior.
+    // As a fallback for Kit < 1.21.0, we check if there is an active span only if there's none,
+    // we create a new execution context.
+    const isSubRequest = typeof input.event.isSubRequest === 'boolean' ? input.event.isSubRequest : !!getActiveSpan();
+
+    if (isSubRequest) {
+      return instrumentHandle(input, options);
+    }
+
+    return withIsolationScope(isolationScope => {
+      // We only call continueTrace in the initial top level request to avoid
+      // creating a new root span for the sub request.
+      isolationScope.setSDKProcessingMetadata({
+        normalizedRequest: winterCGRequestToRequestData(input.event.request.clone()),
+      });
+      return continueTraceFunction(getTracePropagationData(input.event), () => instrumentHandle(input, options));
+    });
+  };
+
+  return sentryRequestHandler;
+}

packages/sveltekit/src/server/handleError.ts → packages/sveltekit/src/server-common/handleError.ts

@@ -1,8 +1,7 @@
-import { consoleSandbox } from '@sentry/core';
-import { captureException } from '@sentry/node';
+import { captureException, consoleSandbox } from '@sentry/core';
 import type { HandleServerError } from '@sveltejs/kit';
 
-import { flushIfServerless } from './utils';
+import { flushIfServerless } from '../server-common/utils';
 
 // The SvelteKit default error handler just logs the error's stack trace to the console
 // see: https://github.com/sveltejs/kit/blob/369e7d6851f543a40c947e033bfc4a9506fdc0a8/packages/kit/src/runtime/server/index.js#L43

packages/sveltekit/src/server/load.ts → packages/sveltekit/src/server-common/load.ts

@@ -1,5 +1,9 @@
-import { addNonEnumerableProperty } from '@sentry/core';
-import { SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, startSpan } from '@sentry/node';
+import {
+  addNonEnumerableProperty,
+  SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
+  SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
+  startSpan,
+} from '@sentry/core';
 import type { LoadEvent, ServerLoadEvent } from '@sveltejs/kit';
 
 import type { SentryWrappedFlag } from '../common/utils';

packages/sveltekit/src/server/rewriteFramesIntegration.ts → packages/sveltekit/src/server-common/rewriteFramesIntegration.ts

@@ -7,7 +7,7 @@ import {
   join,
   rewriteFramesIntegration as originalRewriteFramesIntegration,
 } from '@sentry/core';
-import { WRAPPED_MODULE_SUFFIX } from '../vite/autoInstrument';
+import { WRAPPED_MODULE_SUFFIX } from '../vite/constants';
 import type { GlobalWithSentryValues } from '../vite/injectGlobalValues';
 
 type StackFrameIteratee = (frame: StackFrame) => StackFrame;
@@ -53,8 +53,8 @@ export function rewriteFramesIteratee(frame: StackFrame): StackFrame {
   if (isWindowsFrame || startsWithSlash) {
     const filename = isWindowsFrame
       ? frame.filename
-          .replace(/^[a-zA-Z]:/, '') // remove Windows-style prefix
-          .replace(/\\/g, '/') // replace all `\\` instances with `/`
+        .replace(/^[a-zA-Z]:/, '') // remove Windows-style prefix
+        .replace(/\\/g, '/') // replace all `\\` instances with `/`
       : frame.filename;
 
     let strippedFilename;

packages/sveltekit/src/server/serverRoute.ts → packages/sveltekit/src/server-common/serverRoute.ts

@@ -1,5 +1,9 @@
-import { addNonEnumerableProperty } from '@sentry/core';
-import { SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, startSpan } from '@sentry/node';
+import {
+  addNonEnumerableProperty,
+  SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
+  SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
+  startSpan,
+} from '@sentry/core';
 import type { RequestEvent } from '@sveltejs/kit';
 import { flushIfServerless, sendErrorToSentry } from './utils';
 

packages/sveltekit/src/server/utils.ts → packages/sveltekit/src/server-common/utils.ts

@@ -1,5 +1,4 @@
-import { logger, objectify } from '@sentry/core';
-import { captureException, flush } from '@sentry/node';
+import { captureException, flush, logger, objectify } from '@sentry/core';
 import type { RequestEvent } from '@sveltejs/kit';
 
 import { DEBUG_BUILD } from '../common/debug-build';