ref(browser): Move utils to @sentry-internal/browser-utils (#11451)

ref #9832

Building off #11381,
this moves browser related utils into the browser utils package.

Next step is to move `browserTracingIntegration` into browser!

Author: AbhiPrasad

packages/browser-utils/.eslintrc.js

@@ -1,5 +1,8 @@
 module.exports = {
   extends: ['../../.eslintrc.js'],
+  env: {
+    browser: true,
+  },
   overrides: [
     {
       files: ['src/**'],

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

@@ -2,7 +2,7 @@ import { SPAN_STATUS_ERROR, getActiveSpan, getRootSpan } from '@sentry/core';
 import { spanToJSON } from '@sentry/core';
 import { logger } from '@sentry/utils';
 
-import { DEBUG_BUILD } from '../common/debug-build';
+import { DEBUG_BUILD } from '../debug-build';
 import { WINDOW } from './types';
 
 /**

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

@@ -16,15 +16,10 @@ import {
 } from '@sentry/core';
 import type { Client, IntegrationFn, StartSpanOptions, TransactionSource } from '@sentry/types';
 import type { Span } from '@sentry/types';
-import {
-  addHistoryInstrumentationHandler,
-  browserPerformanceTimeOrigin,
-  getDomElement,
-  logger,
-  uuid4,
-} from '@sentry/utils';
-
-import { DEBUG_BUILD } from '../common/debug-build';
+import { browserPerformanceTimeOrigin, getDomElement, logger, uuid4 } from '@sentry/utils';
+
+import { DEBUG_BUILD } from '../debug-build';
+import { addHistoryInstrumentationHandler } from '../instrument/history';
 import { registerBackgroundTabDetection } from './backgroundtab';
 import {
   addPerformanceEntries,

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

@@ -1,6 +1,6 @@
 import { getFunctionName, logger } from '@sentry/utils';
 
-import { DEBUG_BUILD } from '../common/debug-build';
+import { DEBUG_BUILD } from '../debug-build';
 import { onCLS } from './web-vitals/getCLS';
 import { onFID } from './web-vitals/getFID';
 import { onLCP } from './web-vitals/getLCP';

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

@@ -5,7 +5,7 @@ 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 '../../common/debug-build';
+import { DEBUG_BUILD } from '../../debug-build';
 import {
   addClsInstrumentationHandler,
   addFidInstrumentationHandler,

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

@@ -16,14 +16,13 @@ import {
 import type { HandlerDataXhr, SentryWrappedXMLHttpRequest, Span } from '@sentry/types';
 import {
   BAGGAGE_HEADER_NAME,
-  SENTRY_XHR_DATA_KEY,
   addFetchInstrumentationHandler,
-  addXhrInstrumentationHandler,
   browserPerformanceTimeOrigin,
   dynamicSamplingContextToSentryBaggageHeader,
   generateSentryTraceHeader,
   stringMatchesSomePattern,
 } from '@sentry/utils';
+import { SENTRY_XHR_DATA_KEY, addXhrInstrumentationHandler } from '../instrument/xhr';
 
 import { addPerformanceInstrumentationHandler } from './instrument';
 import { WINDOW } from './types';

packages/browser-utils/src/common/debug-build.ts renamed to packages/browser-utils/src/debug-build.ts

@@ -12,4 +12,13 @@ export {
   addLcpInstrumentationHandler,
 } from './browser';
 
+export { addClickKeypressInstrumentationHandler } from './instrument/dom';
+
+export { addHistoryInstrumentationHandler } from './instrument/history';
+
+export {
+  addXhrInstrumentationHandler,
+  SENTRY_XHR_DATA_KEY,
+} from './instrument/xhr';
+
 export type { RequestInstrumentationOptions } from './browser';

packages/browser-utils/src/index.ts

@@ -1,13 +1,7 @@
-// TODO(v8): Move everything in this file into the browser package. Nothing here is generic and we run risk of leaking browser types into non-browser packages.
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/ban-types */
 import type { HandlerDataDom } from '@sentry/types';
 
-import { uuid4 } from '../misc';
-import { addNonEnumerableProperty, fill } from '../object';
-import { GLOBAL_OBJ } from '../worldwide';
-import { addHandler, maybeInstrument, triggerHandlers } from './_handlers';
+import { addHandler, addNonEnumerableProperty, fill, maybeInstrument, triggerHandlers, uuid4 } from '@sentry/utils';
+import { WINDOW } from '../browser/types';
 
 type SentryWrappedTarget = HTMLElement & { _sentryId?: string };
 
@@ -25,14 +19,13 @@ type RemoveEventListener = (
 type InstrumentedElement = Element & {
   __sentry_instrumentation_handlers__?: {
     [key in 'click' | 'keypress']?: {
-      handler?: Function;
+      handler?: unknown;
       /** The number of custom listeners attached to this element */
       refCount: number;
     };
   };
 };
 
-const WINDOW = GLOBAL_OBJ as unknown as Window;
 const DEBOUNCE_DURATION = 1000;
 
 let debounceTimerID: number | undefined;
@@ -71,7 +64,7 @@ export function instrumentDOM(): void {
   // could potentially prevent the event from bubbling up to our global listeners. This way, our handler are still
   // guaranteed to fire at least once.)
   ['EventTarget', 'Node'].forEach((target: string) => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
     const proto = (WINDOW as any)[target] && (WINDOW as any)[target].prototype;
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, no-prototype-builtins
     if (!proto || !proto.hasOwnProperty || !proto.hasOwnProperty('addEventListener')) {

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

@@ -1,15 +1,6 @@
-// TODO(v8): Move everything in this file into the browser package. Nothing here is generic and we run risk of leaking browser types into non-browser packages.
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/ban-types */
 import type { HandlerDataHistory } from '@sentry/types';
-
-import { fill } from '../object';
-import { supportsHistory } from '../supports';
-import { GLOBAL_OBJ } from '../worldwide';
-import { addHandler, maybeInstrument, triggerHandlers } from './_handlers';
-
-const WINDOW = GLOBAL_OBJ as unknown as Window;
+import { addHandler, fill, maybeInstrument, supportsHistory, triggerHandlers } from '@sentry/utils';
+import { WINDOW } from '../browser/types';
 
 let lastHref: string | undefined;
 
@@ -33,7 +24,7 @@ function instrumentHistory(): void {
   }
 
   const oldOnPopState = WINDOW.onpopstate;
-  WINDOW.onpopstate = function (this: WindowEventHandlers, ...args: any[]): any {
+  WINDOW.onpopstate = function (this: WindowEventHandlers, ...args: unknown[]) {
     const to = WINDOW.location.href;
     // keep track of the current URL state, as we always receive only the updated state
     const from = lastHref;
@@ -53,7 +44,7 @@ function instrumentHistory(): void {
   };
 
   function historyReplacementFunction(originalHistoryFunction: () => void): () => void {
-    return function (this: History, ...args: any[]): void {
+    return function (this: History, ...args: unknown[]): void {
       const url = args.length > 2 ? args[2] : undefined;
       if (url) {
         // coerce to string (this is what pushState does)