fix(utils): Remove WINDOW from utils (#6024)

timfish · web-flow · commit c78fbf2bcd01 · 2022-10-24T15:20:08.000+02:00
This issue is caused by the fact that `Window` ends up in the utils type definitions.

This PR:
- Removes `WINDOW` from utils
- In utils, it's usage is replaced with the following at the top of the appropriate files:
   ```ts
   // eslint-disable-next-line deprecation/deprecation. 
   const WINDOW = getGlobalObject&lt;Window&gt;();
   ```
- Adds `WINDOW` to: 
  - `@sentry/browser` where it is exported for use elsewhere
  - `@sentry/tracing/browser` - Can be removed once tracing is split into browser/node code
  - The `Offline` and `ReportingObserver` integrations since they don't have any dependencies other than utils
    - These could probably just use `window` since they're not used outside the browser
- All downstream SDKs then import `WINDOW` from `@sentry/browser` or `@sentry/react`
diff --git a/packages/angular/src/tracing.ts b/packages/angular/src/tracing.ts
@@ -1,9 +1,9 @@
 /* eslint-disable max-lines */
 import { AfterViewInit, Directive, Injectable, Input, NgModule, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRouteSnapshot, Event, NavigationEnd, NavigationStart, ResolveEnd, Router } from '@angular/router';
-import { getCurrentHub } from '@sentry/browser';
+import { getCurrentHub, WINDOW } from '@sentry/browser';
 import { Span, Transaction, TransactionContext } from '@sentry/types';
-import { logger, stripUrlQueryAndFragment, timestampWithMs, WINDOW } from '@sentry/utils';
+import { logger, stripUrlQueryAndFragment, timestampWithMs } from '@sentry/utils';
 import { Observable, Subscription } from 'rxjs';
 import { filter, tap } from 'rxjs/operators';
 
diff --git a/packages/browser/src/client.ts b/packages/browser/src/client.ts
@@ -1,15 +1,9 @@
 import { BaseClient, getCurrentHub, getEnvelopeEndpointWithUrlEncodedAuth, Scope, SDK_VERSION } from '@sentry/core';
 import { ClientOptions, Event, EventHint, Options, Severity, SeverityLevel } from '@sentry/types';
-import {
-  createClientReportEnvelope,
-  dsnToString,
-  getEventDescription,
-  logger,
-  serializeEnvelope,
-  WINDOW,
-} from '@sentry/utils';
+import { createClientReportEnvelope, dsnToString, getEventDescription, logger, serializeEnvelope } from '@sentry/utils';
 
 import { eventFromException, eventFromMessage } from './eventbuilder';
+import { WINDOW } from './helpers';
 import { Breadcrumbs } from './integrations';
 import { BREADCRUMB_INTEGRATION_ID } from './integrations/breadcrumbs';
 import { BrowserTransportOptions } from './transports/types';
diff --git a/packages/browser/src/exports.ts b/packages/browser/src/exports.ts
@@ -45,6 +45,7 @@ export {
   InboundFilters,
 } from '@sentry/core';
 
+export { WINDOW } from './helpers';
 export { BrowserClient } from './client';
 export { makeFetchTransport, makeXHRTransport } from './transports';
 export {
diff --git a/packages/browser/src/helpers.ts b/packages/browser/src/helpers.ts
@@ -5,9 +5,12 @@ import {
   addExceptionTypeValue,
   addNonEnumerableProperty,
   getOriginalFunction,
+  GLOBAL_OBJ,
   markFunctionWrapped,
 } from '@sentry/utils';
 
+export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
+
 let ignoreOnError: number = 0;
 
 /**
diff --git a/packages/browser/src/index.ts b/packages/browser/src/index.ts
@@ -1,8 +1,8 @@
 export * from './exports';
 
 import { Integrations as CoreIntegrations } from '@sentry/core';
-import { WINDOW } from '@sentry/utils';
 
+import { WINDOW } from './helpers';
 import * as BrowserIntegrations from './integrations';
 
 let windowIntegrations = {};
diff --git a/packages/browser/src/integrations/breadcrumbs.ts b/packages/browser/src/integrations/breadcrumbs.ts
@@ -8,9 +8,10 @@ import {
   parseUrl,
   safeJoin,
   severityLevelFromString,
-  WINDOW,
 } from '@sentry/utils';
 
+import { WINDOW } from '../helpers';
+
 /** JSDoc */
 interface BreadcrumbsOptions {
   console: boolean;
diff --git a/packages/browser/src/integrations/httpcontext.ts b/packages/browser/src/integrations/httpcontext.ts
@@ -1,6 +1,7 @@
 import { addGlobalEventProcessor, getCurrentHub } from '@sentry/core';
 import { Event, Integration } from '@sentry/types';
-import { WINDOW } from '@sentry/utils';
+
+import { WINDOW } from '../helpers';
 
 /** HttpContext integration collects information about HTTP request headers */
 export class HttpContext implements Integration {
diff --git a/packages/browser/src/integrations/trycatch.ts b/packages/browser/src/integrations/trycatch.ts
@@ -1,7 +1,7 @@
 import { Integration, WrappedFunction } from '@sentry/types';
-import { fill, getFunctionName, getOriginalFunction, WINDOW } from '@sentry/utils';
+import { fill, getFunctionName, getOriginalFunction } from '@sentry/utils';
 
-import { wrap } from '../helpers';
+import { WINDOW, wrap } from '../helpers';
 
 const DEFAULT_EVENT_TARGET = [
   'EventTarget',
diff --git a/packages/browser/src/sdk.ts b/packages/browser/src/sdk.ts
@@ -12,11 +12,10 @@ import {
   resolvedSyncPromise,
   stackParserFromStackParserOptions,
   supportsFetch,
-  WINDOW,
 } from '@sentry/utils';
 
 import { BrowserClient, BrowserClientOptions, BrowserOptions } from './client';
-import { ReportDialogOptions, wrap as internalWrap } from './helpers';
+import { ReportDialogOptions, WINDOW, wrap as internalWrap } from './helpers';
 import { Breadcrumbs, Dedupe, GlobalHandlers, HttpContext, LinkedErrors, TryCatch } from './integrations';
 import { defaultStackParser } from './stack-parsers';
 import { makeFetchTransport, makeXHRTransport } from './transports';
diff --git a/packages/browser/src/transports/utils.ts b/packages/browser/src/transports/utils.ts
@@ -1,4 +1,6 @@
-import { isNativeFetch, logger, WINDOW } from '@sentry/utils';
+import { isNativeFetch, logger } from '@sentry/utils';
+
+import { WINDOW } from '../helpers';
 
 let cachedFetchImpl: FetchImpl;
 
diff --git a/packages/integrations/src/offline.ts b/packages/integrations/src/offline.ts
@@ -1,9 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { Event, EventProcessor, Hub, Integration } from '@sentry/types';
-import { logger, normalize, uuid4, WINDOW } from '@sentry/utils';
+import { GLOBAL_OBJ, logger, normalize, uuid4 } from '@sentry/utils';
 import localForage from 'localforage';
 
+export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
+
 type LocalForage = {
   setItem<T>(key: string, value: T, callback?: (err: any, value: T) => void): Promise<T>;
   iterate<T, U>(
diff --git a/packages/integrations/src/reportingobserver.ts b/packages/integrations/src/reportingobserver.ts
@@ -1,5 +1,7 @@
 import { EventProcessor, Hub, Integration } from '@sentry/types';
-import { supportsReportingObserver, WINDOW } from '@sentry/utils';
+import { GLOBAL_OBJ, supportsReportingObserver } from '@sentry/utils';
+
+export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
 
 interface Report {
   [key: string]: unknown;
diff --git a/packages/integrations/test/offline.test.ts b/packages/integrations/test/offline.test.ts
@@ -1,5 +1,5 @@
+import { WINDOW } from '@sentry/browser';
 import { Event, EventProcessor, Hub, Integration, IntegrationClass } from '@sentry/types';
-import { WINDOW } from '@sentry/utils';
 
 import { Item, Offline } from '../src/offline';
 
@@ -41,7 +41,7 @@ jest.mock('@sentry/utils', () => {
 
   return {
     ...originalModule,
-    get WINDOW() {
+    get GLOBAL_OBJ() {
       return {
         addEventListener: (_windowEvent: any, callback: any) => {
           eventListeners.push(callback);
diff --git a/packages/nextjs/src/performance/client.ts b/packages/nextjs/src/performance/client.ts
@@ -1,11 +1,11 @@
 import { getCurrentHub } from '@sentry/core';
+import { WINDOW } from '@sentry/react';
 import { Primitive, TraceparentData, Transaction, TransactionContext, TransactionSource } from '@sentry/types';
 import {
   baggageHeaderToDynamicSamplingContext,
   extractTraceparentData,
   logger,
   stripUrlQueryAndFragment,
-  WINDOW,
 } from '@sentry/utils';
 import type { NEXT_DATA as NextData } from 'next/dist/next-server/lib/utils';
 import { default as Router } from 'next/router';
diff --git a/packages/nextjs/test/index.client.test.ts b/packages/nextjs/test/index.client.test.ts
@@ -1,8 +1,9 @@
 import { BaseClient, getCurrentHub } from '@sentry/core';
 import * as SentryReact from '@sentry/react';
+import { WINDOW } from '@sentry/react';
 import { Integrations as TracingIntegrations } from '@sentry/tracing';
 import { Integration } from '@sentry/types';
-import { logger, WINDOW } from '@sentry/utils';
+import { logger } from '@sentry/utils';
 import { JSDOM } from 'jsdom';
 
 import { init, Integrations, nextRouterInstrumentation } from '../src/index.client';
diff --git a/packages/nextjs/test/performance/client.test.ts b/packages/nextjs/test/performance/client.test.ts
@@ -1,5 +1,5 @@
+import { WINDOW } from '@sentry/react';
 import { Transaction } from '@sentry/types';
-import { WINDOW } from '@sentry/utils';
 import { JSDOM } from 'jsdom';
 import { NEXT_DATA as NextData } from 'next/dist/next-server/lib/utils';
 import { default as Router } from 'next/router';
diff --git a/packages/react/src/reactrouter.tsx b/packages/react/src/reactrouter.tsx
@@ -1,5 +1,5 @@
+import { WINDOW } from '@sentry/browser';
 import { Transaction, TransactionSource } from '@sentry/types';
-import { WINDOW } from '@sentry/utils';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import * as React from 'react';
 
diff --git a/packages/react/src/reactrouterv3.ts b/packages/react/src/reactrouterv3.ts
@@ -1,5 +1,5 @@
+import { WINDOW } from '@sentry/browser';
 import { Primitive, Transaction, TransactionContext, TransactionSource } from '@sentry/types';
-import { WINDOW } from '@sentry/utils';
 
 import { Location, ReactRouterInstrumentation } from './types';
 
diff --git a/packages/react/src/reactrouterv6.tsx b/packages/react/src/reactrouterv6.tsx
@@ -1,8 +1,9 @@
 // Inspired from Donnie McNeal's solution:
 // https://gist.github.com/wontondon/e8c4bdf2888875e4c755712e99279536
 
+import { WINDOW } from '@sentry/browser';
 import { Transaction, TransactionContext, TransactionSource } from '@sentry/types';
-import { getNumberOfUrlSegments, logger, WINDOW } from '@sentry/utils';
+import { getNumberOfUrlSegments, logger } from '@sentry/utils';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import React from 'react';
 
diff --git a/packages/remix/src/performance/client.tsx b/packages/remix/src/performance/client.tsx
@@ -1,7 +1,6 @@
-import type { ErrorBoundaryProps } from '@sentry/react';
-import { withErrorBoundary } from '@sentry/react';
+import { ErrorBoundaryProps, WINDOW , withErrorBoundary } from '@sentry/react';
 import { Transaction, TransactionContext } from '@sentry/types';
-import { logger, WINDOW } from '@sentry/utils';
+import { logger } from '@sentry/utils';
 import * as React from 'react';
 
 const DEFAULT_TAGS = {
diff --git a/packages/tracing/src/browser/backgroundtab.ts b/packages/tracing/src/browser/backgroundtab.ts
@@ -1,8 +1,9 @@
-import { logger, WINDOW } from '@sentry/utils';
+import { logger } from '@sentry/utils';
 
 import { IdleTransaction } from '../idletransaction';
 import { SpanStatusType } from '../span';
 import { getActiveTransaction } from '../utils';
+import { WINDOW } from '.';
 
 /**
  * Add a listener that cancels and finishes a transaction when the global
diff --git a/packages/tracing/src/browser/browsertracing.ts b/packages/tracing/src/browser/browsertracing.ts
@@ -1,11 +1,12 @@
 /* eslint-disable max-lines */
 import { Hub } from '@sentry/core';
 import { EventProcessor, Integration, Transaction, TransactionContext } from '@sentry/types';
-import { baggageHeaderToDynamicSamplingContext, getDomElement, logger, WINDOW } from '@sentry/utils';
+import { baggageHeaderToDynamicSamplingContext, getDomElement, logger } from '@sentry/utils';
 
 import { startIdleTransaction } from '../hubextensions';
 import { DEFAULT_FINAL_TIMEOUT, DEFAULT_HEARTBEAT_INTERVAL, DEFAULT_IDLE_TIMEOUT } from '../idletransaction';
 import { extractTraceparentData } from '../utils';
+import { WINDOW } from '.';
 import { registerBackgroundTabDetection } from './backgroundtab';
 import { addPerformanceEntries, startTrackingLongTasks, startTrackingWebVitals } from './metrics';
 import {
diff --git a/packages/tracing/src/browser/index.ts b/packages/tracing/src/browser/index.ts
@@ -1,4 +1,8 @@
+import { GLOBAL_OBJ } from '@sentry/utils';
+
 export type { RequestInstrumentationOptions } from './request';
 
 export { BrowserTracing, BROWSER_TRACING_INTEGRATION_ID } from './browsertracing';
 export { instrumentOutgoingRequests, defaultRequestInstrumentationOptions } from './request';
+
+export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
diff --git a/packages/tracing/src/browser/metrics/index.ts b/packages/tracing/src/browser/metrics/index.ts
@@ -1,7 +1,8 @@
 /* eslint-disable max-lines */
 import { Measurements } from '@sentry/types';
-import { browserPerformanceTimeOrigin, htmlTreeAsString, logger, WINDOW } from '@sentry/utils';
+import { browserPerformanceTimeOrigin, htmlTreeAsString, logger } from '@sentry/utils';
 
+import { WINDOW } from '..';
 import { IdleTransaction } from '../../idletransaction';
 import { Transaction } from '../../transaction';
 import { getActiveTransaction, msToSec } from '../../utils';
diff --git a/packages/tracing/src/browser/router.ts b/packages/tracing/src/browser/router.ts
@@ -1,5 +1,7 @@
 import { Transaction, TransactionContext } from '@sentry/types';
-import { addInstrumentationHandler, logger, WINDOW } from '@sentry/utils';
+import { addInstrumentationHandler, logger } from '@sentry/utils';
+
+import { WINDOW } from '.';
 
 /**
  * Default function implementing pageload and navigation transactions
diff --git a/packages/tracing/src/browser/web-vitals/lib/getNavigationEntry.ts b/packages/tracing/src/browser/web-vitals/lib/getNavigationEntry.ts
@@ -14,8 +14,7 @@
  * limitations under the License.
  */
 
-import { WINDOW } from '@sentry/utils';
-
+import { WINDOW } from '../..';
 import { NavigationTimingPolyfillEntry } from '../types';
 
 const getNavigationEntryFromPerformanceTiming = (): NavigationTimingPolyfillEntry => {
diff --git a/packages/tracing/src/browser/web-vitals/lib/getVisibilityWatcher.ts b/packages/tracing/src/browser/web-vitals/lib/getVisibilityWatcher.ts
@@ -14,8 +14,7 @@
  * limitations under the License.
  */
 
-import { WINDOW } from '@sentry/utils';
-
+import { WINDOW } from '../..';
 import { onHidden } from './onHidden';
 
 let firstHiddenTime = -1;
diff --git a/packages/tracing/src/browser/web-vitals/lib/initMetric.ts b/packages/tracing/src/browser/web-vitals/lib/initMetric.ts
@@ -14,8 +14,7 @@
  * limitations under the License.
  */
 
-import { WINDOW } from '@sentry/utils';
-
+import { WINDOW } from '../..';
 import { Metric } from '../types';
 import { generateUniqueID } from './generateUniqueID';
 import { getActivationStart } from './getActivationStart';
diff --git a/packages/tracing/src/browser/web-vitals/lib/onHidden.ts b/packages/tracing/src/browser/web-vitals/lib/onHidden.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { WINDOW } from '@sentry/utils';
+import { WINDOW } from '../..';
 
 export interface OnHiddenCallback {
   (event: Event): void;
diff --git a/packages/tracing/test/browser/browsertracing.test.ts b/packages/tracing/test/browser/browsertracing.test.ts
@@ -1,7 +1,7 @@
-import { BrowserClient } from '@sentry/browser';
+import { BrowserClient, WINDOW } from '@sentry/browser';
 import { Hub, makeMain } from '@sentry/core';
 import type { BaseTransportOptions, ClientOptions, DsnComponents } from '@sentry/types';
-import { InstrumentHandlerCallback, InstrumentHandlerType, WINDOW } from '@sentry/utils';
+import { InstrumentHandlerCallback, InstrumentHandlerType } from '@sentry/utils';
 import { JSDOM } from 'jsdom';
 
 import { BrowserTracing, BrowserTracingOptions, getMetaContent } from '../../src/browser/browsertracing';
diff --git a/packages/utils/src/browser.ts b/packages/utils/src/browser.ts
@@ -1,10 +1,8 @@
 import { isString } from './is';
-import { GLOBAL_OBJ } from './worldwide';
+import { getGlobalObject } from './worldwide';
 
-/**
- * TODO: Move me to @sentry/browser when @sentry/utils no longer contains any browser code
- */
-export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
+// eslint-disable-next-line deprecation/deprecation
+const WINDOW = getGlobalObject<Window>();
 
 /**
  * Given a child DOM element, returns a query-selector statement describing that
diff --git a/packages/utils/src/instrument.ts b/packages/utils/src/instrument.ts
@@ -3,12 +3,15 @@
 /* eslint-disable @typescript-eslint/ban-types */
 import { WrappedFunction } from '@sentry/types';
 
-import { WINDOW } from './browser';
 import { isInstanceOf, isString } from './is';
 import { CONSOLE_LEVELS, logger } from './logger';
 import { fill } from './object';
 import { getFunctionName } from './stacktrace';
 import { supportsHistory, supportsNativeFetch } from './supports';
+import { getGlobalObject } from './worldwide';
+
+// eslint-disable-next-line deprecation/deprecation
+const WINDOW = getGlobalObject<Window>();
 
 export type InstrumentHandlerType =
   | 'console'
diff --git a/packages/utils/src/supports.ts b/packages/utils/src/supports.ts
@@ -1,5 +1,8 @@
-import { WINDOW } from './browser';
 import { logger } from './logger';
+import { getGlobalObject } from './worldwide';
+
+// eslint-disable-next-line deprecation/deprecation
+const WINDOW = getGlobalObject<Window>();
 
 /**
  * Tells whether current environment supports ErrorEvent objects
diff --git a/packages/utils/src/time.ts b/packages/utils/src/time.ts
@@ -1,5 +1,8 @@
-import { WINDOW } from './browser';
 import { dynamicRequire, isNodeEnv } from './node';
+import { getGlobalObject } from './worldwide';
+
+// eslint-disable-next-line deprecation/deprecation
+const WINDOW = getGlobalObject<Window>();
 
 /**
  * An object that can return the current timestamp in seconds since the UNIX epoch.
diff --git a/packages/utils/src/worldwide.ts b/packages/utils/src/worldwide.ts
@@ -80,7 +80,7 @@ export const GLOBAL_OBJ: InternalGlobal =
   {};
 
 /**
- * @deprecated Use GLOBAL_OBJ instead. This will be removed in v8
+ * @deprecated Use GLOBAL_OBJ instead or WINDOW from @sentry/browser. This will be removed in v8
  */
 export function getGlobalObject<T>(): T & InternalGlobal {
   return GLOBAL_OBJ as T & InternalGlobal;
diff --git a/packages/vue/src/index.bundle.ts b/packages/vue/src/index.bundle.ts
@@ -46,8 +46,7 @@ export {
   SDK_VERSION,
 } from '@sentry/browser';
 
-import { Integrations as BrowserIntegrations } from '@sentry/browser';
-import { WINDOW } from '@sentry/utils';
+import { Integrations as BrowserIntegrations, WINDOW } from '@sentry/browser';
 
 export { init } from './sdk';
 export { vueRouterInstrumentation } from './router';
diff --git a/packages/vue/src/router.ts b/packages/vue/src/router.ts
@@ -1,6 +1,5 @@
-import { captureException } from '@sentry/browser';
+import { captureException, WINDOW } from '@sentry/browser';
 import { Transaction, TransactionContext, TransactionSource } from '@sentry/types';
-import { WINDOW } from '@sentry/utils';
 
 import { getActiveTransaction } from './tracing';
 
