ref: Hoist performance fetch instrumentation into core

Author: Luca Forstner

packages/core/src/fetch.ts

@@ -0,0 +1,191 @@
+import type { Client, HandlerDataFetch, Scope, Span, SpanOrigin } from '@sentry/types';
+import {
+  BAGGAGE_HEADER_NAME,
+  dynamicSamplingContextToSentryBaggageHeader,
+  generateSentryTraceHeader,
+  isInstanceOf,
+} from '@sentry/utils';
+
+import { getCurrentHub } from './hub';
+import { getDynamicSamplingContextFromClient } from './tracing';
+import { hasTracingEnabled } from './utils/hasTracingEnabled';
+
+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 | null | undefined;
+    };
+
+/**
+ * Create and track fetch request spans for usage in combination with `addInstrumentationHandler`.
+ *
+ * @returns Span if a span was created, otherwise void.
+ */
+export function instrumentFetchRequest(
+  handlerData: HandlerDataFetch,
+  shouldCreateSpan: (url: string) => boolean,
+  shouldAttachHeaders: (url: string) => boolean,
+  spans: Record<string, Span>,
+  spanOrigin: SpanOrigin = 'auto.http.browser',
+): Span | undefined {
+  if (!hasTracingEnabled() || !handlerData.fetchData) {
+    return undefined;
+  }
+
+  const shouldCreateSpanResult = shouldCreateSpan(handlerData.fetchData.url);
+
+  if (handlerData.endTimestamp && shouldCreateSpanResult) {
+    const spanId = handlerData.fetchData.__span;
+    if (!spanId) return;
+
+    const span = spans[spanId];
+    if (span) {
+      if (handlerData.response) {
+        span.setHttpStatus(handlerData.response.status);
+
+        const contentLength =
+          handlerData.response && handlerData.response.headers && handlerData.response.headers.get('content-length');
+
+        if (contentLength) {
+          const contentLengthNum = parseInt(contentLength);
+          if (contentLengthNum > 0) {
+            span.setData('http.response_content_length', contentLengthNum);
+          }
+        }
+      } else if (handlerData.error) {
+        span.setStatus('internal_error');
+      }
+      span.finish();
+
+      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+      delete spans[spanId];
+    }
+    return undefined;
+  }
+
+  const hub = getCurrentHub();
+  const scope = hub.getScope();
+  const client = hub.getClient();
+  const parentSpan = scope.getSpan();
+
+  const { method, url } = handlerData.fetchData;
+
+  const span =
+    shouldCreateSpanResult && parentSpan
+      ? parentSpan.startChild({
+          data: {
+            url,
+            type: 'fetch',
+            'http.method': method,
+          },
+          description: `${method} ${url}`,
+          op: 'http.client',
+          origin: spanOrigin,
+        })
+      : undefined;
+
+  if (span) {
+    handlerData.fetchData.__span = span.spanId;
+    spans[span.spanId] = span;
+  }
+
+  if (shouldAttachHeaders(handlerData.fetchData.url) && client) {
+    const request: string | Request = handlerData.args[0];
+
+    // In case the user hasn't set the second argument of a fetch call we default it to `{}`.
+    handlerData.args[1] = handlerData.args[1] || {};
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const options: { [key: string]: any } = handlerData.args[1];
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+    options.headers = addTracingHeadersToFetchRequest(request, client, scope, options, span);
+  }
+
+  return span;
+}
+
+/**
+ * Adds sentry-trace and baggage headers to the various forms of fetch headers
+ */
+export function addTracingHeadersToFetchRequest(
+  request: string | unknown, // unknown is actually type Request but we can't export DOM types from this package,
+  client: Client,
+  scope: Scope,
+  options: {
+    headers?:
+      | {
+          [key: string]: string[] | string | undefined;
+        }
+      | PolymorphicRequestHeaders;
+  },
+  requestSpan?: Span,
+): PolymorphicRequestHeaders | undefined {
+  const span = requestSpan || scope.getSpan();
+
+  const transaction = span && span.transaction;
+
+  const { traceId, sampled, dsc } = scope.getPropagationContext();
+
+  const sentryTraceHeader = span ? span.toTraceparent() : generateSentryTraceHeader(traceId, undefined, sampled);
+  const dynamicSamplingContext = transaction
+    ? transaction.getDynamicSamplingContext()
+    : dsc
+    ? dsc
+    : getDynamicSamplingContextFromClient(traceId, client, scope);
+
+  const sentryBaggageHeader = dynamicSamplingContextToSentryBaggageHeader(dynamicSamplingContext);
+
+  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 multiple 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 as PolymorphicRequestHeaders;
+  } 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,
+    };
+  }
+}

packages/core/src/index.ts

@@ -55,6 +55,7 @@ export { hasTracingEnabled } from './utils/hasTracingEnabled';
 export { isSentryRequestUrl } from './utils/isSentryRequestUrl';
 export { DEFAULT_ENVIRONMENT } from './constants';
 export { ModuleMetadata } from './integrations/metadata';
+export { instrumentFetchRequest } from './fetch';
 import * as Integrations from './integrations';
 
 export { Integrations };

packages/types/src/instrument.ts

@@ -31,13 +31,27 @@ interface SentryFetchData {
   url: string;
   request_body_size?: number;
   response_body_size?: number;
+  // span_id for the fetch request
+  __span?: string;
 }
 
 export interface HandlerDataFetch {
   args: any[];
   fetchData: SentryFetchData;
   startTimestamp: number;
   endTimestamp?: number;
-  // This is actually `Response`, make sure to cast this where needed (not available in Node)
-  response?: unknown;
+  // This is actually `Response` - Note: this type is not complete. Add to it if necessary.
+  response?: {
+    readonly ok: boolean;
+    readonly status: number;
+    readonly url: string;
+    headers: {
+      append(name: string, value: string): void;
+      delete(name: string): void;
+      get(name: string): string | null;
+      has(name: string): boolean;
+      set(name: string, value: string): void;
+    };
+  };
+  error?: unknown;
 }