ref(browser): Move browserTracing into browser pkg (#11484)

This PR moves `browserTracingIntegration` into the browser package,
leaving `browser-utils` only existing purely for utils/instrumentation
(and our vendored web vitals implementation).

resolves #9885

Author: AbhiPrasad

dev-packages/browser-integration-tests/suites/tracing/metrics/pageload-browser-spans/test.ts

@@ -14,10 +14,11 @@ sentryTest('should add browser-related spans to pageload transaction', async ({
   const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
   const browserSpans = eventData.spans?.filter(({ op }) => op === 'browser');
 
-  // Spans `connect`, `cache` and `DNS` are not always inside `pageload` transaction.
+  // Spans `domContentLoadedEvent`, `connect`, `cache` and `DNS` are not
+  // always inside `pageload` transaction.
   expect(browserSpans?.length).toBeGreaterThanOrEqual(4);
 
-  ['domContentLoadedEvent', 'loadEvent', 'request', 'response'].forEach(eventDesc =>
+  ['loadEvent', 'request', 'response'].forEach(eventDesc =>
     expect(browserSpans).toContainEqual(
       expect.objectContaining({
         description: eventDesc,

packages/browser-utils/.eslintrc.js

@@ -11,9 +11,10 @@ module.exports = {
       },
     },
     {
-      files: ['src/browser/web-vitals/**'],
+      files: ['src/metrics/**'],
       rules: {
         '@typescript-eslint/explicit-function-return-type': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'off',
       },
     },
   ],

packages/browser-utils/src/browser/index.ts

@@ -1,16 +1,17 @@
 export {
-  browserTracingIntegration,
-  startBrowserTracingNavigationSpan,
-  startBrowserTracingPageLoadSpan,
-  BROWSER_TRACING_INTEGRATION_ID,
-  instrumentOutgoingRequests,
-  defaultRequestInstrumentationOptions,
   addPerformanceInstrumentationHandler,
   addClsInstrumentationHandler,
   addFidInstrumentationHandler,
   addTtfbInstrumentationHandler,
   addLcpInstrumentationHandler,
-} from './browser';
+} from './metrics/instrument';
+
+export {
+  addPerformanceEntries,
+  startTrackingInteractions,
+  startTrackingLongTasks,
+  startTrackingWebVitals,
+} from './metrics/browserMetrics';
 
 export { addClickKeypressInstrumentationHandler } from './instrument/dom';
 
@@ -20,5 +21,3 @@ export {
   addXhrInstrumentationHandler,
   SENTRY_XHR_DATA_KEY,
 } from './instrument/xhr';
-
-export type { RequestInstrumentationOptions } from './browser';

packages/browser-utils/src/index.ts

@@ -1,7 +1,7 @@
 import type { HandlerDataDom } from '@sentry/types';
 
 import { addHandler, addNonEnumerableProperty, fill, maybeInstrument, triggerHandlers, uuid4 } from '@sentry/utils';
-import { WINDOW } from '../browser/types';
+import { WINDOW } from '../metrics/types';
 
 type SentryWrappedTarget = HTMLElement & { _sentryId?: string };
 

packages/browser-utils/src/instrument/dom.ts

@@ -1,6 +1,6 @@
 import type { HandlerDataHistory } from '@sentry/types';
 import { addHandler, fill, maybeInstrument, supportsHistory, triggerHandlers } from '@sentry/utils';
-import { WINDOW } from '../browser/types';
+import { WINDOW } from '../metrics/types';
 
 let lastHref: string | undefined;
 

packages/browser-utils/src/instrument/history.ts

@@ -1,7 +1,7 @@
 import type { HandlerDataXhr, SentryWrappedXMLHttpRequest, WrappedFunction } from '@sentry/types';
 
 import { addHandler, fill, isString, maybeInstrument, triggerHandlers } from '@sentry/utils';
-import { WINDOW } from '../browser/types';
+import { WINDOW } from '../metrics/types';
 
 export const SENTRY_XHR_DATA_KEY = '__sentry_xhr_v3__';
 

packages/browser-utils/src/instrument/xhr.ts

@@ -5,18 +5,18 @@ import type { Measurements, Span, SpanAttributes, StartSpanOptions } from '@sent
 import { browserPerformanceTimeOrigin, getComponentName, htmlTreeAsString, logger, parseUrl } from '@sentry/utils';
 
 import { spanToJSON } from '@sentry/core';
-import { DEBUG_BUILD } from '../../debug-build';
+import { DEBUG_BUILD } from '../debug-build';
 import {
   addClsInstrumentationHandler,
   addFidInstrumentationHandler,
   addLcpInstrumentationHandler,
   addPerformanceInstrumentationHandler,
   addTtfbInstrumentationHandler,
-} from '../instrument';
-import { WINDOW } from '../types';
-import { getNavigationEntry } from '../web-vitals/lib/getNavigationEntry';
-import { getVisibilityWatcher } from '../web-vitals/lib/getVisibilityWatcher';
+} from './instrument';
+import { WINDOW } from './types';
 import { isMeasurementValue, startAndEndSpan } from './utils';
+import { getNavigationEntry } from './web-vitals/lib/getNavigationEntry';
+import { getVisibilityWatcher } from './web-vitals/lib/getVisibilityWatcher';
 
 interface NavigatorNetworkInformation {
   readonly connection?: NetworkInformation;

packages/browser-utils/src/browser/metrics/index.ts renamed to packages/browser-utils/src/metrics/browserMetrics.ts

@@ -35,14 +35,14 @@ export const FIDThresholds: MetricRatingThresholds = [100, 300];
  * _**Important:** since FID is only reported after the user interacts with the
  * page, it's possible that it will not be reported for some page loads._
  */
-export const onFID = (onReport: FIDReportCallback, opts: ReportOpts = {}): void => {
+export const onFID = (onReport: FIDReportCallback, opts: ReportOpts = {}) => {
   whenActivated(() => {
     const visibilityWatcher = getVisibilityWatcher();
     const metric = initMetric('FID');
     // eslint-disable-next-line prefer-const
     let report: ReturnType<typeof bindReporter>;
 
-    const handleEntry = (entry: PerformanceEventTiming) => {
+    const handleEntry = (entry: PerformanceEventTiming): void => {
       // Only report if the page wasn't hidden prior to the first input.
       if (entry.startTime < visibilityWatcher.firstHiddenTime) {
         metric.value = entry.processingStart - entry.startTime;

packages/browser-utils/src/browser/instrument.ts renamed to packages/browser-utils/src/metrics/instrument.ts

@@ -9,10 +9,10 @@ import {
   spanToJSON,
 } from '@sentry/core';
 import type { Span } from '@sentry/types';
-import type { ResourceEntry } from '../../../src/browser/metrics';
-import { _addMeasureSpans, _addResourceSpans } from '../../../src/browser/metrics';
-import { WINDOW } from '../../../src/browser/types';
-import { TestClient, getDefaultClientOptions } from '../../utils/TestClient';
+import type { ResourceEntry } from '../../src/metrics/browserMetrics';
+import { _addMeasureSpans, _addResourceSpans } from '../../src/metrics/browserMetrics';
+import { WINDOW } from '../../src/metrics/types';
+import { TestClient, getDefaultClientOptions } from '../utils/TestClient';
 
 const mockWindowLocation = {
   ancestorOrigins: {},

packages/browser-utils/src/browser/types.ts renamed to packages/browser-utils/src/metrics/types.ts

@@ -6,8 +6,8 @@ import {
   setCurrentClient,
   spanToJSON,
 } from '@sentry/core';
-import { startAndEndSpan } from '../../../src/browser/metrics/utils';
-import { TestClient, getDefaultClientOptions } from '../../utils/TestClient';
+import { startAndEndSpan } from '../../src/metrics/utils';
+import { TestClient, getDefaultClientOptions } from '../utils/TestClient';
 
 describe('startAndEndSpan()', () => {
   beforeEach(() => {

packages/browser-utils/src/browser/metrics/utils.ts renamed to packages/browser-utils/src/metrics/utils.ts

@@ -28,6 +28,6 @@ export {
   browserTracingIntegration,
   startBrowserTracingNavigationSpan,
   startBrowserTracingPageLoadSpan,
-} from '@sentry-internal/browser-utils';
+} from './tracing/browserTracingIntegration';
 
 export { replayIntegration } from '@sentry-internal/replay';

packages/browser-utils/src/browser/web-vitals/README.md renamed to packages/browser-utils/src/metrics/web-vitals/README.md

@@ -26,7 +26,7 @@ export {
   browserTracingIntegration,
   startBrowserTracingNavigationSpan,
   startBrowserTracingPageLoadSpan,
-} from '@sentry-internal/browser-utils';
+} from './tracing/browserTracingIntegration';
 
 export {
   feedbackIntegrationShim as feedbackIntegration,

packages/browser-utils/src/browser/web-vitals/getCLS.ts renamed to packages/browser-utils/src/metrics/web-vitals/getCLS.ts

@@ -28,7 +28,7 @@ export {
   browserTracingIntegration,
   startBrowserTracingNavigationSpan,
   startBrowserTracingPageLoadSpan,
-} from '@sentry-internal/browser-utils';
+} from './tracing/browserTracingIntegration';
 
 export {
   feedbackIntegrationShim as feedbackIntegration,

packages/browser-utils/src/browser/web-vitals/getFID.ts renamed to packages/browser-utils/src/metrics/web-vitals/getFID.ts

@@ -41,11 +41,13 @@ export {
 export {
   defaultRequestInstrumentationOptions,
   instrumentOutgoingRequests,
+} from './tracing/request';
+export {
   browserTracingIntegration,
   startBrowserTracingNavigationSpan,
   startBrowserTracingPageLoadSpan,
-} from '@sentry-internal/browser-utils';
-export type { RequestInstrumentationOptions } from '@sentry-internal/browser-utils';
+} from './tracing/browserTracingIntegration';
+export type { RequestInstrumentationOptions } from './tracing/request';
 export {
   addTracingExtensions,
   getActiveSpan,

packages/browser-utils/src/browser/web-vitals/getINP.ts renamed to packages/browser-utils/src/metrics/web-vitals/getINP.ts

@@ -3,7 +3,7 @@ import { spanToJSON } from '@sentry/core';
 import { logger } from '@sentry/utils';
 
 import { DEBUG_BUILD } from '../debug-build';
-import { WINDOW } from './types';
+import { WINDOW } from '../helpers';
 
 /**
  * Add a listener that cancels and finishes a transaction when the global

packages/browser-utils/src/browser/web-vitals/getLCP.ts renamed to packages/browser-utils/src/metrics/web-vitals/getLCP.ts

@@ -1,3 +1,10 @@
+import {
+  addHistoryInstrumentationHandler,
+  addPerformanceEntries,
+  startTrackingInteractions,
+  startTrackingLongTasks,
+  startTrackingWebVitals,
+} from '@sentry-internal/browser-utils';
 import {
   SEMANTIC_ATTRIBUTE_SENTRY_IDLE_SPAN_FINISH_REASON,
   SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
@@ -19,16 +26,9 @@ import type { Span } from '@sentry/types';
 import { browserPerformanceTimeOrigin, getDomElement, logger, uuid4 } from '@sentry/utils';
 
 import { DEBUG_BUILD } from '../debug-build';
-import { addHistoryInstrumentationHandler } from '../instrument/history';
+import { WINDOW } from '../helpers';
 import { registerBackgroundTabDetection } from './backgroundtab';
-import {
-  addPerformanceEntries,
-  startTrackingInteractions,
-  startTrackingLongTasks,
-  startTrackingWebVitals,
-} from './metrics';
 import { defaultRequestInstrumentationOptions, instrumentOutgoingRequests } from './request';
-import { WINDOW } from './types';
 
 export const BROWSER_TRACING_INTEGRATION_ID = 'BrowserTracing';
 
@@ -224,8 +224,6 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
 
   return {
     name: BROWSER_TRACING_INTEGRATION_ID,
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    setupOnce: () => {},
     afterAllSetup(client) {
       const { markBackgroundSpan, traceFetch, traceXHR, shouldCreateSpanForRequest, enableHTTPTimings, _experiments } =
         options;
@@ -249,7 +247,7 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
         });
       });
 
-      client.on('startPageLoadSpan', (startSpanOptions, traceOptions) => {
+      client.on('startPageLoadSpan', (startSpanOptions, traceOptions = {}) => {
         if (getClient() !== client) {
           return;
         }
@@ -260,8 +258,8 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
           activeSpan.end();
         }
 
-        const sentryTrace = traceOptions?.sentryTrace || getMetaContent('sentry-trace');
-        const baggage = traceOptions?.baggage || getMetaContent('baggage');
+        const sentryTrace = traceOptions.sentryTrace || getMetaContent('sentry-trace');
+        const baggage = traceOptions.baggage || getMetaContent('baggage');
 
         // Continue trace updates the scope in the callback only, but we want to break out of it again...
         // This is a bit hacky, because we want to get the span to use both the correct scope _and_ the correct propagation context

packages/browser-utils/src/browser/web-vitals/lib/bindReporter.ts renamed to packages/browser-utils/src/metrics/web-vitals/lib/bindReporter.ts

@@ -1,3 +1,8 @@
+import {
+  SENTRY_XHR_DATA_KEY,
+  addPerformanceInstrumentationHandler,
+  addXhrInstrumentationHandler,
+} from '@sentry-internal/browser-utils';
 import {
   SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
   SentryNonRecordingSpan,
@@ -22,10 +27,7 @@ import {
   generateSentryTraceHeader,
   stringMatchesSomePattern,
 } from '@sentry/utils';
-import { SENTRY_XHR_DATA_KEY, addXhrInstrumentationHandler } from '../instrument/xhr';
-
-import { addPerformanceInstrumentationHandler } from './instrument';
-import { WINDOW } from './types';
+import { WINDOW } from '../helpers';
 
 /** Options for Request Instrumentation */
 export interface RequestInstrumentationOptions {

packages/browser-utils/src/browser/web-vitals/lib/generateUniqueID.ts renamed to packages/browser-utils/src/metrics/web-vitals/lib/generateUniqueID.ts

@@ -5,6 +5,7 @@ import type { BrowserClientOptions } from '../../../src/client';
 
 export function getDefaultBrowserClientOptions(options: Partial<BrowserClientOptions> = {}): BrowserClientOptions {
   return {
+    dsn: 'http://examplePublicKey@localhost/0',
     integrations: [],
     transport: () => createTransport({ recordDroppedEvent: () => undefined }, _ => resolvedSyncPromise({})),
     stackParser: () => [],

packages/browser-utils/src/browser/web-vitals/lib/getActivationStart.ts renamed to packages/browser-utils/src/metrics/web-vitals/lib/getActivationStart.ts

@@ -1,11 +1,10 @@
-import { browserTracingIntegration } from '@sentry-internal/browser-utils';
 import {
+  browserTracingIntegration,
   feedbackIntegration,
   feedbackModalIntegration,
   feedbackScreenshotIntegration,
   replayIntegration,
-} from '@sentry/browser';
-
+} from '../../src';
 import * as TracingReplayFeedbackBundle from '../../src/index.bundle.tracing.replay.feedback';
 
 describe('index.bundle.tracing.replay.feedback', () => {

packages/browser-utils/src/browser/web-vitals/lib/getNavigationEntry.ts renamed to packages/browser-utils/src/metrics/web-vitals/lib/getNavigationEntry.ts

@@ -1,11 +1,10 @@
-import { browserTracingIntegration } from '@sentry-internal/browser-utils';
 import {
   feedbackIntegrationShim,
   feedbackModalIntegrationShim,
   feedbackScreenshotIntegrationShim,
 } from '@sentry-internal/integration-shims';
-import { replayIntegration } from '@sentry/browser';
 
+import { browserTracingIntegration, replayIntegration } from '../../src';
 import * as TracingReplayBundle from '../../src/index.bundle.tracing.replay';
 
 describe('index.bundle.tracing.replay', () => {