feat(sveltekit): Add instrumentation for client-side fetch

Author: Lms24

packages/sveltekit/src/client/load.ts

@@ -1,6 +1,17 @@
-import { trace } from '@sentry/core';
+import type { BaseClient } from '@sentry/core';
+import { getCurrentHub, trace } from '@sentry/core';
+import type { Breadcrumbs, BrowserTracing } from '@sentry/svelte';
 import { captureException } from '@sentry/svelte';
-import { addExceptionMechanism, objectify } from '@sentry/utils';
+import type { ClientOptions } from '@sentry/types';
+import {
+  addExceptionMechanism,
+  addTracingHeadersToFetchRequest,
+  getFetchMethod,
+  getFetchUrl,
+  objectify,
+  stringMatchesSomePattern,
+  stripUrlQueryAndFragment,
+} from '@sentry/utils';
 import type { LoadEvent } from '@sveltejs/kit';
 
 function sendErrorToSentry(e: unknown): unknown {
@@ -27,7 +38,17 @@ function sendErrorToSentry(e: unknown): unknown {
 }
 
 /**
- * @inheritdoc
+ * Wrap load function with Sentry. This wrapper will
+ *
+ * - catch errors happening during the execution of `load`
+ * - create a load span if performance monitoring is enabled
+ * - attach tracing Http headers to `fech` requests if performance monitoring is enabled to get connected traces.
+ * - add a fetch breadcrumb for every `fetch` request
+ *
+ * Note that tracing Http headers are only attached if the url matches the specified `tracePropagationTargets`
+ * entries to avoid CORS errors.
+ *
+ * @param origLoad SvelteKit user defined load function
  */
 // The liberal generic typing of `T` is necessary because we cannot let T extend `Load`.
 // This function needs to tell TS that it returns exactly the type that it was called with
@@ -40,6 +61,11 @@ export function wrapLoadWithSentry<T extends (...args: any) => any>(origLoad: T)
       // Type casting here because `T` cannot extend `Load` (see comment above function signature)
       const event = args[0] as LoadEvent;
 
+      const patchedEvent = {
+        ...event,
+        fetch: instrumentSvelteKitFetch(event.fetch),
+      };
+
       const routeId = event.route.id;
       return trace(
         {
@@ -50,9 +76,175 @@ export function wrapLoadWithSentry<T extends (...args: any) => any>(origLoad: T)
             source: routeId ? 'route' : 'url',
           },
         },
-        () => wrappingTarget.apply(thisArg, args),
+        () => wrappingTarget.apply(thisArg, [patchedEvent]),
         sendErrorToSentry,
       );
     },
   });
 }
+
+type SvelteKitFetch = LoadEvent['fetch'];
+
+/**
+ * Instruments SvelteKit's client `fetch` implementation which is passed to the client-side universal `load` functions.
+ *
+ * We need to instrument this in addition to the native fetch we instrument in BrowserTracing because SvelteKit
+ * stores the native fetch implementation before our SDK is initialized.
+ *
+ * see: https://github.com/sveltejs/kit/blob/master/packages/kit/src/runtime/client/fetcher.js
+ *
+ * This instrumentation takes the fetch-related options from `BrowserTracing` to determine if we should
+ * instrument fetch for perfomance monitoring, create a span for or attach our tracing headers to the given request.
+ *
+ * To dertermine if breadcrumbs should be recorded, this instrumentation relies on the availability of and the options
+ * set in the `BreadCrumbs` integration.
+ *
+ * @param originalFetch SvelteKit's original fetch implemenetation
+ *
+ * @returns a proxy of SvelteKit's fetch implementation
+ */
+function instrumentSvelteKitFetch(originalFetch: SvelteKitFetch): SvelteKitFetch {
+  const client = getCurrentHub().getClient() as BaseClient<ClientOptions>;
+
+  const browserTracingIntegration =
+    client.getIntegrationById && (client.getIntegrationById('BrowserTracing') as BrowserTracing | undefined);
+  const breadcrumbsIntegration = client.getIntegrationById('BreadCrumbs') as Breadcrumbs | undefined;
+
+  const browserTracingOptions = browserTracingIntegration && browserTracingIntegration.options;
+
+  const shouldTraceFetch = browserTracingOptions && browserTracingOptions.traceFetch;
+  const shouldAddFetchBreadcrumbs = breadcrumbsIntegration && breadcrumbsIntegration.options.fetch;
+
+  /* Identical check as in BrowserTracing, just that we also need to verify that BrowserTracing is actually installed */
+  const shouldCreateSpan =
+    browserTracingOptions && typeof browserTracingOptions.shouldCreateSpanForRequest === 'function'
+      ? browserTracingOptions.shouldCreateSpanForRequest
+      : (_: string) => shouldTraceFetch;
+
+  /* Identical check as in BrowserTracing, just that we also need to verify that BrowserTracing is actually installed */
+  const shouldAttachHeaders: (url: string) => boolean = url => {
+    return (
+      !!shouldTraceFetch &&
+      stringMatchesSomePattern(url, browserTracingOptions.tracePropagationTargets || ['localhost', /^\//])
+    );
+  };
+
+  return new Proxy(originalFetch, {
+    apply: (wrappingTarget, thisArg, args: Parameters<LoadEvent['fetch']>) => {
+      const [input, init] = args;
+      const rawUrl = getFetchUrl(args);
+      const sanitizedUrl = stripUrlQueryAndFragment(rawUrl);
+      const method = getFetchMethod(args);
+
+      // TODO: extract this to a util function (and use it in breadcrumbs integration as well)
+      if (rawUrl.match(/sentry_key/) && method === 'POST') {
+        // We will not create breadcrumbs for fetch requests that contain `sentry_key` (internal sentry requests)
+        return wrappingTarget.apply(thisArg, args);
+      }
+
+      const patchedInit: RequestInit = { ...init } || {};
+      const activeSpan = getCurrentHub().getScope().getSpan();
+      const activeTransaction = activeSpan && activeSpan.transaction;
+
+      const attachHeaders = shouldAttachHeaders(rawUrl);
+      const attachSpan = shouldCreateSpan(rawUrl);
+
+      if (attachHeaders && attachSpan && activeTransaction) {
+        const dsc = activeTransaction.getDynamicSamplingContext();
+        const headers = addTracingHeadersToFetchRequest(
+          input as string | Request,
+          dsc,
+          activeSpan,
+          patchedInit as {
+            headers:
+              | {
+                  [key: string]: string[] | string | undefined;
+                }
+              | Request['headers'];
+          },
+        ) as HeadersInit;
+        patchedInit.headers = headers;
+      }
+
+      let fetchPromise: Promise<Response>;
+
+      if (attachSpan) {
+        fetchPromise = trace(
+          {
+            name: `${method} ${sanitizedUrl}`, // this will become the description of the span
+            op: 'http.client',
+            data: {
+              /* TODO: extract query data (we might actually only do this once we tackle sanitization on the browser-side) */
+            },
+            parentSpanId: activeSpan && activeSpan.spanId,
+          },
+          async span => {
+            const fetchResult: Response = await wrappingTarget.apply(thisArg, [input, patchedInit]);
+            if (span) {
+              span.setHttpStatus(fetchResult.status);
+            }
+            return fetchResult;
+          },
+        );
+      } else {
+        fetchPromise = wrappingTarget.apply(thisArg, [input, patchedInit]);
+      }
+
+      if (shouldAddFetchBreadcrumbs) {
+        addFetchBreadcrumbs(fetchPromise, method, sanitizedUrl, args);
+      }
+
+      return fetchPromise;
+    },
+  });
+}
+
+/* Adds breadcrumbs for the given fetch result */
+function addFetchBreadcrumbs(
+  fetchResult: Promise<Response>,
+  method: string,
+  sanitizedUrl: string,
+  args: Parameters<SvelteKitFetch>,
+): void {
+  const breadcrumbStartTimestamp = Date.now();
+  fetchResult.then(
+    response => {
+      getCurrentHub().addBreadcrumb(
+        {
+          type: 'http',
+          category: 'fetch',
+          data: {
+            method: method,
+            url: sanitizedUrl,
+            status_code: response.status,
+          },
+        },
+        {
+          input: args,
+          response,
+          startTimestamp: breadcrumbStartTimestamp,
+          endTimestamp: Date.now(),
+        },
+      );
+    },
+    error => {
+      getCurrentHub().addBreadcrumb(
+        {
+          type: 'http',
+          category: 'fetch',
+          level: 'error',
+          data: {
+            method: method,
+            url: sanitizedUrl,
+          },
+        },
+        {
+          input: args,
+          data: error,
+          startTimestamp: breadcrumbStartTimestamp,
+          endTimestamp: Date.now(),
+        },
+      );
+    },
+  );
+}

packages/tracing-internal/src/browser/request.ts

@@ -1,11 +1,11 @@
 /* eslint-disable max-lines */
 import { getCurrentHub, hasTracingEnabled } from '@sentry/core';
-import type { DynamicSamplingContext, Span } from '@sentry/types';
+import type { Span } from '@sentry/types';
 import {
   addInstrumentationHandler,
+  addTracingHeadersToFetchRequest,
   BAGGAGE_HEADER_NAME,
   dynamicSamplingContextToSentryBaggageHeader,
-  isInstanceOf,
   stringMatchesSomePattern,
 } from '@sentry/utils';
 
@@ -90,17 +90,6 @@ export interface XHRData {
   endTimestamp?: number;
 }
 
-type PolymorphicRequestHeaders =
-  | Record<string, string | undefined>
-  | Array<[string, string]>
-  // the below is not preicsely the Header type used in Request, but it'll pass duck-typing
-  | {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      [key: string]: any;
-      append: (key: string, value: string) => void;
-      get: (key: string) => string;
-    };
-
 export const defaultRequestInstrumentationOptions: RequestInstrumentationOptions = {
   traceFetch: true,
   traceXHR: true,
@@ -221,70 +210,6 @@ export function fetchCallback(
   }
 }
 
-function addTracingHeadersToFetchRequest(
-  request: string | Request,
-  dynamicSamplingContext: Partial<DynamicSamplingContext>,
-  span: Span,
-  options: {
-    headers?:
-      | {
-          [key: string]: string[] | string | undefined;
-        }
-      | Request['headers'];
-  },
-): PolymorphicRequestHeaders {
-  const sentryBaggageHeader = dynamicSamplingContextToSentryBaggageHeader(dynamicSamplingContext);
-  const sentryTraceHeader = span.toTraceparent();
-
-  const headers =
-    typeof Request !== 'undefined' && isInstanceOf(request, Request) ? (request as Request).headers : options.headers;
-
-  if (!headers) {
-    return { 'sentry-trace': sentryTraceHeader, baggage: sentryBaggageHeader };
-  } else if (typeof Headers !== 'undefined' && isInstanceOf(headers, Headers)) {
-    const newHeaders = new Headers(headers as Headers);
-
-    newHeaders.append('sentry-trace', sentryTraceHeader);
-
-    if (sentryBaggageHeader) {
-      // If the same header is appended miultiple times the browser will merge the values into a single request header.
-      // Its therefore safe to simply push a "baggage" entry, even though there might already be another baggage header.
-      newHeaders.append(BAGGAGE_HEADER_NAME, sentryBaggageHeader);
-    }
-
-    return newHeaders as PolymorphicRequestHeaders;
-  } else if (Array.isArray(headers)) {
-    const newHeaders = [...headers, ['sentry-trace', sentryTraceHeader]];
-
-    if (sentryBaggageHeader) {
-      // If there are multiple entries with the same key, the browser will merge the values into a single request header.
-      // Its therefore safe to simply push a "baggage" entry, even though there might already be another baggage header.
-      newHeaders.push([BAGGAGE_HEADER_NAME, sentryBaggageHeader]);
-    }
-
-    return newHeaders;
-  } else {
-    const existingBaggageHeader = 'baggage' in headers ? headers.baggage : undefined;
-    const newBaggageHeaders: string[] = [];
-
-    if (Array.isArray(existingBaggageHeader)) {
-      newBaggageHeaders.push(...existingBaggageHeader);
-    } else if (existingBaggageHeader) {
-      newBaggageHeaders.push(existingBaggageHeader);
-    }
-
-    if (sentryBaggageHeader) {
-      newBaggageHeaders.push(sentryBaggageHeader);
-    }
-
-    return {
-      ...(headers as Exclude<typeof headers, Headers>),
-      'sentry-trace': sentryTraceHeader,
-      baggage: newBaggageHeaders.length > 0 ? newBaggageHeaders.join(',') : undefined,
-    };
-  }
-}
-
 /**
  * Create and track xhr request spans
  */

packages/utils/src/instrument.ts

@@ -183,7 +183,7 @@ function instrumentFetch(): void {
 
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /** Extract `method` from fetch call arguments */
-function getFetchMethod(fetchArgs: any[] = []): string {
+export function getFetchMethod(fetchArgs: any[] = []): string {
   if ('Request' in WINDOW && isInstanceOf(fetchArgs[0], Request) && fetchArgs[0].method) {
     return String(fetchArgs[0].method).toUpperCase();
   }
@@ -194,7 +194,7 @@ function getFetchMethod(fetchArgs: any[] = []): string {
 }
 
 /** Extract `url` from fetch call arguments */
-function getFetchUrl(fetchArgs: any[] = []): string {
+export function getFetchUrl(fetchArgs: any[] = []): string {
   if (typeof fetchArgs[0] === 'string') {
     return fetchArgs[0];
   }