ref(replay): Export WINDOW within Replay instead of importing it from Browser (#6386)

In preparation to generating CDN bundles, this change copies the `WINDOW` constant declaration from `@sentry/browser` to the Replay package and updates the imports to use the package-internal version of `WINDOW`. This has two advantages:

* When building CDN bundles, we don't bundle contents from `@sentry/browser` anymore. This previously caused the generated bundles to not work correctly and it unnecessarily increased bundle size
* By not importing anything from `@sentry/browser` we avoid a circular dependency one we export the Replay integration from the Browser SDK.

Author: Lms24

packages/replay/src/session/constants.ts renamed to packages/replay/src/constants.ts

@@ -1,3 +1,10 @@
+import { GLOBAL_OBJ } from '@sentry/utils';
+
+// exporting WINDOW from within the @sentry/replay instead of importing it from @sentry/browser
+// this avoids the Browser package being bundled into the CDN bundle as well as a
+// circular dependency between the Browser and Replay packages in the future
+export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
+
 export const REPLAY_SESSION_KEY = 'sentryReplaySession';
 export const REPLAY_EVENT_NAME = 'replay_event';
 export const RECORDING_EVENT_NAME = 'replay_recording';

packages/replay/src/createPerformanceEntry.ts

@@ -1,7 +1,7 @@
-import { WINDOW } from '@sentry/browser';
 import { browserPerformanceTimeOrigin } from '@sentry/utils';
 import { record } from 'rrweb';
 
+import { WINDOW } from './constants';
 import { AllPerformanceEntry, PerformanceNavigationTiming, PerformancePaintTiming } from './types';
 import { isIngestHost } from './util/isIngestHost';
 

packages/replay/src/index.ts

@@ -1,29 +1,29 @@
 /* eslint-disable max-lines */ // TODO: We might want to split this file up
-import { WINDOW } from '@sentry/browser';
 import { addGlobalEventProcessor, getCurrentHub, Scope, setContext } from '@sentry/core';
 import { Breadcrumb, Client, Event, Integration } from '@sentry/types';
 import { addInstrumentationHandler, createEnvelope, logger } from '@sentry/utils';
 import debounce from 'lodash.debounce';
 import { PerformanceObserverEntryList } from 'perf_hooks';
 import { EventType, record } from 'rrweb';
 
-import { breadcrumbHandler } from './coreHandlers/breadcrumbHandler';
-import { spanHandler } from './coreHandlers/spanHandler';
-import { createMemoryEntry, createPerformanceEntries, ReplayPerformanceEntry } from './createPerformanceEntry';
-import { createEventBuffer, IEventBuffer } from './eventBuffer';
 import {
   DEFAULT_ERROR_SAMPLE_RATE,
   DEFAULT_SESSION_SAMPLE_RATE,
   MAX_SESSION_LIFE,
   REPLAY_EVENT_NAME,
   SESSION_IDLE_DURATION,
   VISIBILITY_CHANGE_TIMEOUT,
-} from './session/constants';
+  WINDOW,
+} from './constants';
+import { breadcrumbHandler } from './coreHandlers/breadcrumbHandler';
+import { spanHandler } from './coreHandlers/spanHandler';
+import { createMemoryEntry, createPerformanceEntries, ReplayPerformanceEntry } from './createPerformanceEntry';
+import { createEventBuffer, IEventBuffer } from './eventBuffer';
 import { deleteSession } from './session/deleteSession';
 import { getSession } from './session/getSession';
 import { saveSession } from './session/saveSession';
 import { Session } from './session/Session';
-import type {
+import {
   AllPerformanceEntry,
   InstrumentationTypeBreadcrumb,
   InstrumentationTypeSpan,

packages/replay/src/session/deleteSession.ts

@@ -1,6 +1,4 @@
-import { WINDOW } from '@sentry/browser';
-
-import { REPLAY_SESSION_KEY } from './constants';
+import { REPLAY_SESSION_KEY, WINDOW } from '../constants';
 
 /**
  * Deletes a session from storage

packages/replay/src/session/fetchSession.ts

@@ -1,7 +1,5 @@
-import { WINDOW } from '@sentry/browser';
-
+import { REPLAY_SESSION_KEY, WINDOW } from '../constants';
 import { SampleRates } from '../types';
-import { REPLAY_SESSION_KEY } from './constants';
 import { Session } from './Session';
 
 /**

packages/replay/src/session/saveSession.ts

@@ -1,6 +1,4 @@
-import { WINDOW } from '@sentry/browser';
-
-import { REPLAY_SESSION_KEY } from './constants';
+import { REPLAY_SESSION_KEY, WINDOW } from '../constants';
 import { Session } from './Session';
 
 export function saveSession(session: Session): void {

packages/replay/src/util/isInternal.ts

@@ -1,5 +1,4 @@
-import { WINDOW } from '@sentry/browser';
-
+import { WINDOW } from '../constants';
 import { isBrowser } from './isBrowser';
 
 /**

packages/replay/src/util/isSessionExpired.ts

@@ -1,4 +1,4 @@
-import { MAX_SESSION_LIFE } from '../session/constants';
+import { MAX_SESSION_LIFE } from '../constants';
 import { Session } from '../session/Session';
 import { isExpired } from './isExpired';
 

packages/replay/test/unit/flush.test.ts

@@ -1,10 +1,9 @@
-import { WINDOW } from '@sentry/browser';
 import * as SentryUtils from '@sentry/utils';
 import { BASE_TIMESTAMP, mockRrweb, mockSdk } from '@test';
 
+import { SESSION_IDLE_DURATION, WINDOW } from '../../src/constants';
 import { Replay } from './../../src';
 import { createPerformanceEntries } from './../../src/createPerformanceEntry';
-import { SESSION_IDLE_DURATION } from './../../src/session/constants';
 import { useFakeTimers } from './../../test/utils/use-fake-timers';
 
 useFakeTimers();

packages/replay/test/unit/index-errorSampleRate.test.ts

@@ -1,13 +1,13 @@
 jest.unmock('@sentry/browser');
 
-import { captureException, WINDOW } from '@sentry/browser';
+import { captureException } from '@sentry/browser';
 import { BASE_TIMESTAMP, RecordMock } from '@test';
 import { PerformanceEntryResource } from '@test/fixtures/performanceEntry/resource';
 import { resetSdkMock } from '@test/mocks';
 import { DomHandler, MockTransportSend } from '@test/types';
 
+import { REPLAY_SESSION_KEY, VISIBILITY_CHANGE_TIMEOUT, WINDOW } from '../../src/constants';
 import { Replay } from './../../src';
-import { REPLAY_SESSION_KEY, VISIBILITY_CHANGE_TIMEOUT } from './../../src/session/constants';
 import { useFakeTimers } from './../utils/use-fake-timers';
 
 useFakeTimers();

packages/replay/test/unit/index-handleGlobalEvent.test.ts

@@ -2,8 +2,8 @@ import { Error } from '@test/fixtures/error';
 import { Transaction } from '@test/fixtures/transaction';
 import { resetSdkMock } from '@test/mocks';
 
+import { REPLAY_EVENT_NAME } from '../../src/constants';
 import { Replay } from './../../src';
-import { REPLAY_EVENT_NAME } from './../../src/session/constants';
 import { useFakeTimers } from './../utils/use-fake-timers';
 
 useFakeTimers();

packages/replay/test/unit/index-noSticky.test.ts

@@ -3,8 +3,8 @@ import { Transport } from '@sentry/types';
 import * as SentryUtils from '@sentry/utils';
 import { BASE_TIMESTAMP, mockRrweb, mockSdk } from '@test';
 
+import { SESSION_IDLE_DURATION, VISIBILITY_CHANGE_TIMEOUT } from '../../src/constants';
 import { Replay } from './../../src';
-import { SESSION_IDLE_DURATION, VISIBILITY_CHANGE_TIMEOUT } from './../../src/session/constants';
 import { useFakeTimers } from './../utils/use-fake-timers';
 
 useFakeTimers();

packages/replay/test/unit/index.test.ts

@@ -1,15 +1,14 @@
 jest.mock('./../../src/util/isInternal', () => ({
   isInternal: jest.fn(() => true),
 }));
-import { WINDOW } from '@sentry/browser';
 import { BASE_TIMESTAMP, RecordMock } from '@test';
 import { PerformanceEntryResource } from '@test/fixtures/performanceEntry/resource';
 import { resetSdkMock } from '@test/mocks';
 import { DomHandler, MockTransportSend } from '@test/types';
 import { EventType } from 'rrweb';
 
 import { Replay } from '../../src';
-import { MAX_SESSION_LIFE, REPLAY_SESSION_KEY, VISIBILITY_CHANGE_TIMEOUT } from '../../src/session/constants';
+import { MAX_SESSION_LIFE, REPLAY_SESSION_KEY, VISIBILITY_CHANGE_TIMEOUT, WINDOW } from '../../src/constants';
 import { RecordingEvent } from '../../src/types';
 import { useFakeTimers } from '../utils/use-fake-timers';
 

packages/replay/test/unit/session/Session.test.ts

@@ -24,8 +24,8 @@ jest.mock('@sentry/utils', () => {
 });
 
 import * as Sentry from '@sentry/browser';
-import { WINDOW } from '@sentry/browser';
 
+import { WINDOW } from '../../../src/constants';
 import { Session } from '../../../src/session/Session';
 
 type CaptureEventMockType = jest.MockedFunction<typeof Sentry.captureEvent>;

packages/replay/test/unit/session/createSession.test.ts

@@ -1,6 +1,6 @@
-import { WINDOW } from '@sentry/browser';
 import * as Sentry from '@sentry/core';
 
+import { WINDOW } from '../../../src/constants';
 import { createSession } from '../../../src/session/createSession';
 import { saveSession } from '../../../src/session/saveSession';
 

packages/replay/test/unit/session/deleteSession.test.ts

@@ -1,6 +1,4 @@
-import { WINDOW } from '@sentry/browser';
-
-import { REPLAY_SESSION_KEY } from '../../../src/session/constants';
+import { REPLAY_SESSION_KEY, WINDOW } from '../../../src/constants';
 import { deleteSession } from '../../../src/session/deleteSession';
 
 const storageEngine = WINDOW.sessionStorage;

packages/replay/test/unit/session/fetchSession.test.ts

@@ -1,6 +1,4 @@
-import { WINDOW } from '@sentry/browser';
-
-import { REPLAY_SESSION_KEY } from '../../../src/session/constants';
+import { REPLAY_SESSION_KEY, WINDOW } from '../../../src/constants';
 import { fetchSession } from '../../../src/session/fetchSession';
 
 const oldSessionStorage = WINDOW.sessionStorage;

packages/replay/test/unit/session/getSession.test.ts

@@ -1,5 +1,4 @@
-import { WINDOW } from '@sentry/browser';
-
+import { WINDOW } from '../../../src/constants';
 import * as CreateSession from '../../../src/session/createSession';
 import * as FetchSession from '../../../src/session/fetchSession';
 import { getSession } from '../../../src/session/getSession';

packages/replay/test/unit/session/saveSession.test.ts

@@ -1,6 +1,4 @@
-import { WINDOW } from '@sentry/browser';
-
-import { REPLAY_SESSION_KEY } from '../../../src/session/constants';
+import { REPLAY_SESSION_KEY, WINDOW } from '../../../src/constants';
 import { saveSession } from '../../../src/session/saveSession';
 import { Session } from '../../../src/session/Session';
 

packages/replay/test/unit/stop.test.ts

@@ -1,10 +1,9 @@
-import { WINDOW } from '@sentry/browser';
 import * as SentryUtils from '@sentry/utils';
 // mock functions need to be imported first
 import { BASE_TIMESTAMP, mockRrweb, mockSdk } from '@test';
 
+import { SESSION_IDLE_DURATION, WINDOW } from '../../src/constants';
 import { Replay } from './../../src';
-import { SESSION_IDLE_DURATION } from './../../src/session/constants';
 import { useFakeTimers } from './../utils/use-fake-timers';
 
 useFakeTimers();