@dash0/sdk-web 0.6.2

package/src/instrumentations/errors/event-handlers.ts

@@ -0,0 +1,77 @@
+import { vars } from "../../vars";
+import { win, WindowType } from "../../utils";
+import {
+  addWrappedDomEventListener,
+  EventListenerOptionsOrUseCapture,
+  popWrappedDomEventListener,
+} from "./async-function-wrapping";
+import { ignoreNextOnErrorEvent } from "./unhandled-error";
+
+export function startEventHandlerInstrumentation() {
+  if (vars.wrapEventHandlers) {
+    wrapEventTarget(win?.EventTarget);
+  }
+}
+
+function wrapEventTarget(EventTarget: WindowType["EventTarget"] | undefined) {
+  if (
+    !EventTarget ||
+    typeof EventTarget.prototype.addEventListener !== "function" ||
+    typeof EventTarget.prototype.removeEventListener !== "function"
+  ) {
+    return;
+  }
+
+  const originalAddEventListener = EventTarget.prototype.addEventListener;
+  const originalRemoveEventListener = EventTarget.prototype.removeEventListener;
+
+  EventTarget.prototype.addEventListener = function wrappedAddEventListener(
+    eventName: string,
+    fn: EventListenerOrEventListenerObject | null,
+    optionsOrCapture?: EventListenerOptionsOrUseCapture
+  ) {
+    if (typeof fn !== "function") {
+      return originalAddEventListener.apply(this, arguments as any);
+    }
+
+    // non-deopt arguments copy
+    const args = new Array(arguments.length);
+    for (let i = 0; i < arguments.length; i++) {
+      args[i] = arguments[i];
+    }
+
+    args[1] = function wrappedEventListener() {
+      try {
+        return fn.apply(this, arguments as any);
+      } catch (e) {
+        reportError(e as any);
+        ignoreNextOnErrorEvent();
+        throw e;
+      }
+    };
+
+    args[1] = addWrappedDomEventListener(this, args[1], eventName, fn, optionsOrCapture);
+
+    return originalAddEventListener.apply(this, args as any);
+  };
+
+  EventTarget.prototype.removeEventListener = function wrappedRemoveEventListener(
+    eventName: string,
+    fn: EventListenerOrEventListenerObject | null,
+    optionsOrCapture?: EventListenerOptionsOrUseCapture
+  ) {
+    if (typeof fn !== "function") {
+      return originalRemoveEventListener.apply(this, arguments as any);
+    }
+
+    // non-deopt arguments copy
+    const args = new Array(arguments.length);
+    for (let i = 0; i < arguments.length; i++) {
+      args[i] = arguments[i];
+    }
+
+    args[1] = popWrappedDomEventListener(this, eventName, fn, optionsOrCapture, fn);
+
+    return originalRemoveEventListener.apply(this, args as any);
+  };
+}

package/src/instrumentations/errors/index.ts

@@ -0,0 +1,11 @@
+import { startOnErrorInstrumentation } from "./unhandled-error";
+import { startUnhandledRejectionInstrumentation } from "./unhandled-promise-rejection";
+import { startEventHandlerInstrumentation } from "./event-handlers";
+import { startTimerInstrumentation } from "./timers";
+
+export function startErrorInstrumentation() {
+  startOnErrorInstrumentation();
+  startUnhandledRejectionInstrumentation();
+  startEventHandlerInstrumentation();
+  startTimerInstrumentation();
+}

package/src/instrumentations/errors/timers.ts

@@ -0,0 +1,52 @@
+import { vars } from "../../vars";
+import { isRunningZoneJs } from "../../utils/timers";
+import { warn, win, WindowType } from "../../utils";
+import { ignoreNextOnErrorEvent } from "./unhandled-error";
+
+export function startTimerInstrumentation() {
+  if (vars.wrapTimers) {
+    if (isRunningZoneJs) {
+      warn(
+        "We discovered a usage of Zone.js. In order to avoid any incompatibility issues timer wrapping is not going to be enabled."
+      );
+      return;
+    }
+    wrapTimer("setTimeout");
+    wrapTimer("setInterval");
+  }
+}
+
+function wrapTimer(name: "setTimeout" | "setInterval") {
+  const original = win?.[name];
+  if (typeof original !== "function") {
+    // cannot wrap because fn is not a function – should actually never happen
+    return;
+  }
+
+  (win as any)[name] = function wrappedTimerSetter(fn: TimerHandler): ReturnType<WindowType[typeof name]> {
+    // non-deopt arguments copy
+    const args = new Array(arguments.length);
+    for (let i = 0; i < arguments.length; i++) {
+      args[i] = arguments[i];
+    }
+    args[0] = wrap(fn);
+    return original.apply(this, args as any);
+  };
+}
+
+function wrap(fn: TimerHandler) {
+  if (typeof fn !== "function") {
+    // cannot wrap because fn is not a function
+    return fn;
+  }
+
+  return function wrappedTimerHandler(this: any) {
+    try {
+      return fn.apply(this, arguments);
+    } catch (e) {
+      reportError(e as any);
+      ignoreNextOnErrorEvent();
+      throw e;
+    }
+  };
+}

package/src/instrumentations/errors/unhandled-error.ts

@@ -0,0 +1,187 @@
+import { KeyValue, LogRecord } from "../../../types/otlp";
+import { hasOwnProperty, nowNanos, win } from "../../utils";
+import { ErrorLike, ReportErrorOpts } from "../../../types/errors";
+import { isErrorMessageIgnored } from "../../utils/ignore-rules";
+import { sendLog } from "../../transport";
+import {
+  EVENT_NAME,
+  EVENT_NAMES,
+  EXCEPTION_COMPONENT_STACK,
+  EXCEPTION_MESSAGE,
+  EXCEPTION_STACKTRACE,
+  EXCEPTION_TYPE,
+  LOG_SEVERITIES,
+} from "../../semantic-conventions";
+import { addAttribute } from "../../utils/otel";
+import { addCommonAttributes } from "../../attributes";
+
+type TrackedError = {
+  seenCount: number;
+  transmittedCount: number;
+  log: LogRecord;
+};
+
+const MAX_ERRORS_TO_REPORT = 100;
+const MAX_STACK_SIZE = 30;
+const MAX_NUMBER_OF_TRACKED_ERRORS = 20;
+
+let reportedErrors = 0;
+let numberOfDifferentErrorsSeen = 0;
+let seenErrors: { [key: string]: TrackedError } = {};
+let scheduledTransmissionTimeoutHandle: ReturnType<typeof setTimeout> | null;
+
+// We are wrapping global listeners. In these, we are catching and rethrowing errors.
+// In older browsers, rethrowing errors actually manipulates the error objects. As a
+// result, it is not possible to just mark an error as reported. The simplest way to
+// avoid double reporting is to temporarily disable the global onError handler…
+let ignoreNextOnError = false;
+
+export function ignoreNextOnErrorEvent() {
+  ignoreNextOnError = true;
+}
+
+export function startOnErrorInstrumentation() {
+  if (!win) return;
+
+  const globalOnError = win.onerror;
+
+  win.onerror = function (
+    message: string | Event,
+    fileName?: string,
+    lineNumber?: number,
+    columnNumber?: number,
+    error?: any
+  ) {
+    if (ignoreNextOnError as boolean) {
+      ignoreNextOnError = false;
+      if (typeof globalOnError === "function") {
+        return globalOnError.apply(this, arguments as any);
+      }
+      return;
+    }
+
+    let stack = error && error.stack;
+    if (!stack) {
+      stack = "at " + fileName + " " + lineNumber;
+      if (columnNumber != null) {
+        stack += ":" + columnNumber;
+      }
+    }
+    onUnhandledError({ message: String(message), stack });
+
+    if (typeof globalOnError === "function") {
+      return globalOnError.apply(this, arguments as any);
+    }
+  };
+}
+
+export function reportError(error: string | ErrorLike, opts?: ReportErrorOpts) {
+  if (!error) {
+    return;
+  }
+
+  if (typeof error === "string") {
+    onUnhandledError({ message: error, opts });
+  } else {
+    onUnhandledError({ message: error.message, type: error.name, stack: error.stack, opts });
+  }
+}
+
+type UnhandledErrorArgs = {
+  message: string;
+  type?: string;
+  stack?: string;
+  opts?: ReportErrorOpts;
+};
+
+function onUnhandledError({ message, type, stack, opts }: UnhandledErrorArgs) {
+  if (!message || reportedErrors > MAX_ERRORS_TO_REPORT) {
+    return;
+  }
+
+  if (isErrorMessageIgnored(message)) {
+    return;
+  }
+
+  if (numberOfDifferentErrorsSeen >= MAX_NUMBER_OF_TRACKED_ERRORS) {
+    seenErrors = {};
+    numberOfDifferentErrorsSeen = 0;
+  }
+
+  message = String(message).substring(0, 300);
+  stack = shortenStackTrace(stack);
+  const location = win?.location.href;
+  const key = message + stack + location;
+
+  let trackedError = seenErrors[key];
+  if (trackedError) {
+    trackedError.seenCount++;
+  } else {
+    const attributes: KeyValue[] = [];
+    addAttribute(attributes, EVENT_NAME, EVENT_NAMES.ERROR);
+    addAttribute(attributes, EXCEPTION_MESSAGE, message);
+    if (type) {
+      addAttribute(attributes, EXCEPTION_TYPE, type);
+    }
+    if (stack) {
+      addAttribute(attributes, EXCEPTION_STACKTRACE, stack);
+    }
+    if (opts?.componentStack) {
+      addAttribute(attributes, EXCEPTION_COMPONENT_STACK, opts?.componentStack.substring(0, 2048));
+    }
+    addCommonAttributes(attributes);
+
+    trackedError = {
+      seenCount: 1,
+      transmittedCount: 0,
+      log: {
+        timeUnixNano: nowNanos(),
+        attributes: attributes,
+        severityNumber: LOG_SEVERITIES.ERROR,
+        severityText: "ERROR",
+        body: {
+          stringValue: message,
+        },
+      },
+    };
+    seenErrors[key as string] = trackedError;
+
+    numberOfDifferentErrorsSeen++;
+  }
+
+  scheduleTransmission();
+}
+
+export function shortenStackTrace(stack?: string): string {
+  return String(stack || "")
+    .split("\n")
+    .slice(0, MAX_STACK_SIZE)
+    .join("\n");
+}
+
+function scheduleTransmission() {
+  if (scheduledTransmissionTimeoutHandle) {
+    return;
+  }
+  scheduledTransmissionTimeoutHandle = setTimeout(send, 1000);
+}
+
+function send() {
+  if (scheduledTransmissionTimeoutHandle) {
+    clearTimeout(scheduledTransmissionTimeoutHandle);
+    scheduledTransmissionTimeoutHandle = null;
+  }
+
+  for (const key in seenErrors) {
+    if (hasOwnProperty(seenErrors, key)) {
+      const seenError = seenErrors[key]!;
+      if (seenError.seenCount > seenError.transmittedCount) {
+        sendLog(seenError.log);
+        reportedErrors++;
+      }
+    }
+  }
+
+  seenErrors = {};
+  numberOfDifferentErrorsSeen = 0;
+}

package/src/instrumentations/errors/unhandled-promise-rejection.ts

@@ -0,0 +1,30 @@
+import { win } from "../../utils";
+import { reportError } from "./unhandled-error";
+
+const MESSAGE_PREFIX = "Unhandled promise rejection: ";
+const STACK_UNAVAILABLE_MESSAGE = "<unavailable because Promise wasn't rejected with an Error object>";
+
+export function startUnhandledRejectionInstrumentation() {
+  if (typeof win?.addEventListener === "function") {
+    win.addEventListener("unhandledrejection", onUnhandledRejection);
+  }
+}
+
+export function onUnhandledRejection(event: PromiseRejectionEvent) {
+  if (event.reason == null) {
+    reportError({
+      message: MESSAGE_PREFIX + "<no reason defined>",
+      stack: STACK_UNAVAILABLE_MESSAGE,
+    });
+  } else if (typeof event.reason.message === "string") {
+    reportError({
+      message: MESSAGE_PREFIX + event.reason.message,
+      stack: typeof event.reason.stack === "string" ? event.reason.stack : STACK_UNAVAILABLE_MESSAGE,
+    });
+  } else if (typeof event.reason !== "object") {
+    reportError({
+      message: MESSAGE_PREFIX + event.reason,
+      stack: STACK_UNAVAILABLE_MESSAGE,
+    });
+  }
+}

package/src/instrumentations/http/fetch.ts

@@ -0,0 +1,194 @@
+import { debug, observeResourcePerformance, win } from "../../utils";
+import { isUrlIgnored, matchesAny } from "../../utils/ignore-rules";
+import {
+  addAttribute,
+  setSpanStatus,
+  addTraceContextHttpHeaders,
+  endSpan,
+  errorToSpanStatus,
+  Exception,
+  InProgressSpan,
+  recordException,
+  startSpan,
+} from "../../utils/otel";
+import {
+  HTTP_REQUEST_METHOD,
+  HTTP_REQUEST_METHOD_ORIGINAL,
+  HTTP_RESPONSE_STATUS_CODE,
+  SPAN_STATUS_ERROR,
+  SPAN_STATUS_UNSET,
+} from "../../semantic-conventions";
+import { isSameOrigin, wrap, parseUrl } from "../../utils";
+import { vars } from "../../vars";
+import { httpRequestHeaderKey, httpResponseHeaderKey } from "../../utils/otel/http";
+import { sendSpan } from "../../transport";
+import { addResourceNetworkEvents, addResourceSize, HTTP_METHOD_OTHER, isWellKnownHttpMethod } from "./utils";
+import { addCommonAttributes } from "../../attributes";
+
+export function instrumentFetch() {
+  if (!win || !win.fetch || !win.Request) {
+    debug("Browser does not support the Fetch API, skipping instrumentation");
+    return;
+  }
+  wrap(win, "fetch", wrapFetch);
+}
+
+// eslint-disable-next-line no-restricted-globals -- only used as type here
+function wrapFetch(original: typeof fetch) {
+  return async function fetchWithInstrumentation(input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
+    let copyOfInit = init ? Object.assign({}, init) : init;
+
+    let body: BodyInit | null = null;
+    if (copyOfInit?.body) {
+      body = copyOfInit.body;
+      copyOfInit.body = undefined;
+    }
+
+    const request = new Request(input, copyOfInit);
+    if (body && copyOfInit) {
+      copyOfInit.body = body;
+    }
+
+    const url = request.url;
+    if (isUrlIgnored(url)) {
+      debug(`Not creating span for fetch call because the url is ignored, URL: ${url}`);
+      return original(input instanceof Request ? request : input, init);
+    }
+
+    // https://fetch.spec.whatwg.org/#concept-request-method
+    // We'll match methods case insensitive here to make the user experience a bit less painful
+    const originalMethod = request.method ?? "GET";
+    const isWellKnownMethod = isWellKnownHttpMethod(originalMethod);
+    const isWellKnownMethodMatchingLeniently = isWellKnownHttpMethod(originalMethod.toUpperCase());
+    const method = isWellKnownMethodMatchingLeniently ? originalMethod.toUpperCase() : HTTP_METHOD_OTHER;
+
+    const span = startSpan(`HTTP ${method}`);
+    // The url namespace of a http span has a different meaning than for common rum signals.
+    addCommonAttributes(span.attributes, { url });
+    addGraphQlProperties(input, init, span);
+    addAttribute(span.attributes, HTTP_REQUEST_METHOD, method);
+    if (!isWellKnownMethod) {
+      addAttribute(span.attributes, HTTP_REQUEST_METHOD_ORIGINAL, originalMethod);
+    }
+
+    const shouldSetCorrelationHeaders = isSameOrigin(url) || matchesAny(vars.propagateTraceHeadersCorsURLs, url);
+    if (shouldSetCorrelationHeaders) {
+      if (copyOfInit?.headers) {
+        // ensure we have a unified container for the headers
+        copyOfInit.headers = new Headers(copyOfInit.headers);
+        addTraceContextHttpHeaders(copyOfInit.headers.append, copyOfInit.headers, span);
+      } else if (input instanceof Request) {
+        addTraceContextHttpHeaders(request.headers.append, request.headers, span);
+      } else {
+        if (!copyOfInit) {
+          copyOfInit = {};
+        }
+        copyOfInit.headers = new Headers();
+        addTraceContextHttpHeaders(copyOfInit.headers.append, copyOfInit.headers, span);
+      }
+    }
+
+    tryCaptureHttpHeaders(request.headers, span, (k) => httpRequestHeaderKey(k));
+
+    const performanceObserver = observeResourcePerformance({
+      // We match on both fetch and XHR here to support polyfills
+      resourceMatcher: ({ initiatorType, name }) =>
+        (initiatorType === "fetch" || initiatorType === "xmlhttprequest") && name === parseUrl(url).href,
+      maxWaitForResourceMillis: vars.maxWaitForResourceTimingsMillis,
+      maxToleranceForResourceTimingsMillis: vars.maxToleranceForResourceTimingsMillis,
+      onEnd: ({ duration, resource }) => {
+        if (resource) {
+          addResourceNetworkEvents(span, resource);
+          addResourceSize(span, resource);
+        }
+        // duration is millis we need to convert to nanos
+        sendSpan(endSpan(span, undefined, duration * 1000000));
+      },
+    });
+
+    performanceObserver.start();
+    try {
+      const response = await original(input instanceof Request ? request : input, copyOfInit);
+      addResponseData(span, response);
+
+      // We use a separate promise here because this needs to happen in parallel to application code consuming the response
+      waitForFullResponse(response)
+        .then(() => performanceObserver.end())
+        .catch((e) => {
+          performanceObserver.cancel();
+          endSpanOnError(span, e as Exception);
+        });
+
+      return response;
+    } catch (e) {
+      performanceObserver.cancel();
+      endSpanOnError(span, e as Exception);
+      throw e;
+    }
+  };
+}
+
+// @ts-expect-error -- WIP
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- WIP
+function addGraphQlProperties(input: RequestInfo | URL, init?: RequestInit, span: InProgressSpan) {
+  try {
+    if (!isGraphQLQuery(input, init)) return;
+  } catch (e) {
+    debug("failed to analyze request for GraphQL insights", e, input, init);
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- WIP
+function isGraphQLQuery(input: RequestInfo | URL, init?: RequestInit) {
+  /**
+   * TODO: Add GraphQL support.
+   * GraphQL queries are either POST or GET requests.
+   * Identified by either setting Accept=application/graphql-response+json or the url matching a config field for graphql urls.
+   * See: https://graphql.github.io/graphql-over-http/draft/
+   * GET requests are queries carrying a query search param
+   * POST requests are either queries or mutations, See: https://graphql.org/learn/serving-over-http/#post-request-and-body
+   * and https://github.com/instana/weasel/blob/main/lib/hooks/Fetch.ts#L201
+   */
+  return false;
+}
+
+function tryCaptureHttpHeaders(headers: Headers, span: InProgressSpan, getAttributeKey: (headerKey: string) => string) {
+  try {
+    headers.forEach((value, key) => {
+      if (vars.headersToCapture.some((rxp) => rxp.test(key))) {
+        addAttribute(span.attributes, getAttributeKey(key), value);
+      }
+    });
+  } catch (_e) {
+    debug("unable to capture http headers due to CORS policy");
+  }
+}
+
+function addResponseData(span: InProgressSpan, response: Response) {
+  const status = response.status;
+  setSpanStatus(span, status >= 200 && status < 400 ? SPAN_STATUS_UNSET : SPAN_STATUS_ERROR, response.statusText);
+  addAttribute(span.attributes, HTTP_RESPONSE_STATUS_CODE, String(status));
+  tryCaptureHttpHeaders(response.headers, span, (k) => httpResponseHeaderKey(k));
+}
+
+function waitForFullResponse(response: Response): Promise<void> {
+  return new Promise((resolve) => {
+    const clonedResponse = response.clone();
+    const body = clonedResponse.body;
+
+    if (!body) return resolve();
+
+    const reader = body.getReader();
+    const read = async () => {
+      const { done } = await reader.read();
+      if (done) return resolve();
+      return read();
+    };
+    return read();
+  });
+}
+
+function endSpanOnError(span: InProgressSpan, error: Exception) {
+  recordException(span, error);
+  sendSpan(endSpan(span, errorToSpanStatus(error), undefined));
+}

package/src/instrumentations/http/utils.ts

@@ -0,0 +1,49 @@
+import { addAttribute, addSpanEvent, InProgressSpan } from "../../utils/otel";
+import { domHRTimestampToNanos, hasKey, PerformanceTimingNames } from "../../utils";
+import { HTTP_RESPONSE_BODY_SIZE } from "../../semantic-conventions";
+
+// SEE: https://github.com/open-telemetry/semantic-conventions/blob/main/docs/attributes-registry/http.md?plain=1#L67
+const KNOWN_HTTP_METHODS = ["GET", "HEAD", "POST", "PUT", "DELETE", "CONNECT", "OPTIONS", "TRACE", "PATCH"];
+export const HTTP_METHOD_OTHER = "_OTHER";
+
+export function isWellKnownHttpMethod(method: string): boolean {
+  return KNOWN_HTTP_METHODS.includes(method);
+}
+
+export function addResourceNetworkEvents(span: InProgressSpan, resource: PerformanceResourceTiming) {
+  const ignoreZeros = resource.startTime !== 0;
+
+  addSpanNetworkEvent(span, PerformanceTimingNames.FETCH_START, resource, ignoreZeros);
+  addSpanNetworkEvent(span, PerformanceTimingNames.DOMAIN_LOOKUP_START, resource, ignoreZeros);
+  addSpanNetworkEvent(span, PerformanceTimingNames.DOMAIN_LOOKUP_END, resource, ignoreZeros);
+  addSpanNetworkEvent(span, PerformanceTimingNames.CONNECT_START, resource, ignoreZeros);
+  addSpanNetworkEvent(span, PerformanceTimingNames.SECURE_CONNECTION_START, resource, ignoreZeros);
+  addSpanNetworkEvent(span, PerformanceTimingNames.CONNECT_END, resource, ignoreZeros);
+  addSpanNetworkEvent(span, PerformanceTimingNames.REQUEST_START, resource, ignoreZeros);
+  addSpanNetworkEvent(span, PerformanceTimingNames.RESPONSE_START, resource, ignoreZeros);
+  addSpanNetworkEvent(span, PerformanceTimingNames.RESPONSE_END, resource, ignoreZeros);
+}
+
+function addSpanNetworkEvent(
+  span: InProgressSpan,
+  propertyName: string,
+  resource: PerformanceResourceTiming,
+  ignoreZeros: boolean = true
+) {
+  if (
+    !hasKey(resource, propertyName) ||
+    typeof resource[propertyName] !== "number" ||
+    (ignoreZeros && resource[propertyName] === 0)
+  ) {
+    return;
+  }
+
+  addSpanEvent(span, propertyName, domHRTimestampToNanos(resource[propertyName]));
+}
+
+export function addResourceSize(span: InProgressSpan, resource: PerformanceResourceTiming) {
+  const encodedLength = resource.encodedBodySize;
+  if (encodedLength != undefined) {
+    addAttribute(span.attributes, HTTP_RESPONSE_BODY_SIZE, encodedLength);
+  }
+}

package/src/instrumentations/navigation/event.ts

@@ -0,0 +1,66 @@
+import { KeyValue, LogRecord } from "../../../types/otlp";
+import { addAttribute, getTraceContextForPageLoad } from "../../utils/otel";
+import {
+  EVENT_NAME,
+  EVENT_NAMES,
+  LOG_SEVERITIES,
+  PAGE_VIEW_CHANGE_STATE,
+  PAGE_VIEW_CHANGE_STATE_VALUES,
+  PAGE_VIEW_TYPE,
+  PAGE_VIEW_TYPE_VALUES,
+} from "../../semantic-conventions";
+import { doc, NO_VALUE_FALLBACK } from "../../utils";
+import { addCommonAttributes } from "../../attributes";
+import { sendLog } from "../../transport";
+import { PageViewMeta, vars } from "../../vars";
+
+function getPageViewMeta(url?: URL): PageViewMeta {
+  if (!url) return {};
+
+  return vars.pageViewInstrumentation.generateMetadata?.(url) ?? {};
+}
+
+export function transmitPageViewEvent(timeUnixNano: string, url?: URL, virtual?: boolean, replaced?: boolean) {
+  const meta = getPageViewMeta(url);
+
+  const attributes: KeyValue[] = [];
+  addAttribute(attributes, EVENT_NAME, EVENT_NAMES.PAGE_VIEW);
+
+  if (meta.attributes) {
+    Object.entries(meta.attributes).forEach(([key, value]) => addAttribute(attributes, key, value));
+  }
+  addCommonAttributes(attributes, { url });
+
+  const bodyAttributes: KeyValue[] = [];
+  addAttribute(bodyAttributes, "title", meta.title ?? doc?.title ?? NO_VALUE_FALLBACK);
+  if (doc?.referrer) {
+    addAttribute(bodyAttributes, "referrer", doc.referrer);
+  }
+
+  addAttribute(bodyAttributes, PAGE_VIEW_TYPE, virtual ? PAGE_VIEW_TYPE_VALUES.VIRTUAL : PAGE_VIEW_TYPE_VALUES.INITIAL);
+  addAttribute(
+    bodyAttributes,
+    PAGE_VIEW_CHANGE_STATE,
+    replaced ? PAGE_VIEW_CHANGE_STATE_VALUES.REPLACE : PAGE_VIEW_CHANGE_STATE_VALUES.PUSH
+  );
+
+  const log: LogRecord = {
+    timeUnixNano: timeUnixNano,
+    attributes: attributes,
+    severityNumber: LOG_SEVERITIES.INFO,
+    severityText: "INFO",
+    body: {
+      kvlistValue: {
+        values: bodyAttributes,
+      },
+    },
+  };
+
+  const traceContext = getTraceContextForPageLoad();
+  if (traceContext) {
+    log.traceId = traceContext.traceId;
+    log.spanId = traceContext.spanId;
+  }
+
+  sendLog(log);
+}

package/src/instrumentations/navigation/index.ts

@@ -0,0 +1,7 @@
+import { startPageLoadInstrumentation } from "./page-load";
+import { startPageTransitionInstrumentation } from "./page-transition";
+
+export function startNavigationInstrumentation() {
+  startPageLoadInstrumentation();
+  startPageTransitionInstrumentation();
+}