ref(replay): Use WINDOW instead of window (#6316)

Author: mydea

packages/replay/.eslintrc.js

@@ -39,8 +39,6 @@ module.exports = {
       rules: {
         // TODO (high-prio): Go through console logs and figure out which ones should be replaced with the SDK logger
         'no-console': 'off',
-        // TODO (high-pio): Re-enable this after migration
-        'no-restricted-globals': 'off',
         // TODO (high-prio): Re-enable this after migration
         '@typescript-eslint/explicit-member-accessibility': 'off',
         // TODO (high-prio): Remove this exception from naming convention after migration

packages/replay/config/rollup.config.core.ts

@@ -19,7 +19,7 @@ const config = defineConfig({
       format: 'esm',
     },
   ],
-  external: [...Object.keys(pkg.dependencies || {})],
+  external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})],
   plugins: [
     typescript({
       tsconfig: IS_PRODUCTION ? './config/tsconfig.core.json' : './tsconfig.json',

packages/replay/package.json

@@ -60,6 +60,9 @@
     "lodash.debounce": "^4.0.8",
     "rrweb": "^1.1.3"
   },
+  "peerDependencies": {
+    "@sentry/browser": "7.22.0"
+  },
   "engines": {
     "node": ">=12"
   },

packages/replay/src/createPerformanceEntry.ts

@@ -1,3 +1,4 @@
+import { WINDOW } from '@sentry/browser';
 import { browserPerformanceTimeOrigin } from '@sentry/utils';
 import { record } from 'rrweb';
 
@@ -60,7 +61,7 @@ function createPerformanceEntry(entry: AllPerformanceEntry): ReplayPerformanceEn
 function getAbsoluteTime(time: number): number {
   // browserPerformanceTimeOrigin can be undefined if `performance` or
   // `performance.now` doesn't exist, but this is already checked by this integration
-  return ((browserPerformanceTimeOrigin || window.performance.timeOrigin) + time) / 1000;
+  return ((browserPerformanceTimeOrigin || WINDOW.performance.timeOrigin) + time) / 1000;
 }
 
 // TODO: type definition!

packages/replay/src/eventBuffer.ts

@@ -12,6 +12,7 @@ interface CreateEventBufferParams {
 }
 
 export function createEventBuffer({ useCompression }: CreateEventBufferParams): IEventBuffer {
+  // eslint-disable-next-line no-restricted-globals
   if (useCompression && window.Worker) {
     const workerBlob = new Blob([workerString]);
     const workerUrl = URL.createObjectURL(workerBlob);

packages/replay/src/index.ts

@@ -1,4 +1,5 @@
 /* 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';
@@ -232,7 +233,7 @@ export class Replay implements Integration {
       return;
     }
     // XXX: See method comments above
-    window.setTimeout(() => this.start());
+    setTimeout(() => this.start());
   }
 
   /**
@@ -396,8 +397,8 @@ export class Replay implements Integration {
    * first flush.
    */
   setInitialState(): void {
-    const urlPath = `${window.location.pathname}${window.location.hash}${window.location.search}`;
-    const url = `${window.location.origin}${urlPath}`;
+    const urlPath = `${WINDOW.location.pathname}${WINDOW.location.hash}${WINDOW.location.search}`;
+    const url = `${WINDOW.location.origin}${urlPath}`;
 
     this.performanceEvents = [];
 
@@ -414,9 +415,9 @@ export class Replay implements Integration {
    */
   addListeners(): void {
     try {
-      document.addEventListener('visibilitychange', this.handleVisibilityChange);
-      window.addEventListener('blur', this.handleWindowBlur);
-      window.addEventListener('focus', this.handleWindowFocus);
+      WINDOW.document.addEventListener('visibilitychange', this.handleVisibilityChange);
+      WINDOW.addEventListener('blur', this.handleWindowBlur);
+      WINDOW.addEventListener('focus', this.handleWindowFocus);
 
       // There is no way to remove these listeners, so ensure they are only added once
       if (!this.hasInitializedCoreListeners) {
@@ -440,7 +441,7 @@ export class Replay implements Integration {
     }
 
     // PerformanceObserver //
-    if (!('PerformanceObserver' in window)) {
+    if (!('PerformanceObserver' in WINDOW)) {
       return;
     }
 
@@ -475,10 +476,10 @@ export class Replay implements Integration {
    */
   removeListeners(): void {
     try {
-      document.removeEventListener('visibilitychange', this.handleVisibilityChange);
+      WINDOW.document.removeEventListener('visibilitychange', this.handleVisibilityChange);
 
-      window.removeEventListener('blur', this.handleWindowBlur);
-      window.removeEventListener('focus', this.handleWindowFocus);
+      WINDOW.removeEventListener('blur', this.handleWindowBlur);
+      WINDOW.removeEventListener('focus', this.handleWindowFocus);
 
       if (this.performanceObserver) {
         this.performanceObserver.disconnect();
@@ -665,7 +666,7 @@ export class Replay implements Integration {
    * page will also trigger a change to a hidden state.
    */
   handleVisibilityChange: () => void = () => {
-    if (document.visibilityState === 'visible') {
+    if (WINDOW.document.visibilityState === 'visible') {
       this.doChangeToForegroundTasks();
     } else {
       this.doChangeToBackgroundTasks();
@@ -980,13 +981,13 @@ export class Replay implements Integration {
   addMemoryEntry(): Promise<void[]> | undefined {
     // window.performance.memory is a non-standard API and doesn't work on all browsers
     // so we check before creating the event.
-    if (!('memory' in window.performance)) {
+    if (!('memory' in WINDOW.performance)) {
       return;
     }
 
     return this.createPerformanceSpans([
       // @ts-ignore memory doesn't exist on type Performance as the API is non-standard (we check that it exists above)
-      createMemoryEntry(window.performance.memory),
+      createMemoryEntry(WINDOW.performance.memory),
     ]);
   }
 

packages/replay/src/session/deleteSession.ts

@@ -1,17 +1,19 @@
+import { WINDOW } from '@sentry/browser';
+
 import { REPLAY_SESSION_KEY } from './constants';
 
 /**
  * Deletes a session from storage
  */
 export function deleteSession(): void {
-  const hasSessionStorage = 'sessionStorage' in window;
+  const hasSessionStorage = 'sessionStorage' in WINDOW;
 
   if (!hasSessionStorage) {
     return;
   }
 
   try {
-    window.sessionStorage.removeItem(REPLAY_SESSION_KEY);
+    WINDOW.sessionStorage.removeItem(REPLAY_SESSION_KEY);
   } catch {
     // Ignore potential SecurityError exceptions
   }

packages/replay/src/session/fetchSession.ts

@@ -1,3 +1,5 @@
+import { WINDOW } from '@sentry/browser';
+
 import { SampleRates } from '../types';
 import { REPLAY_SESSION_KEY } from './constants';
 import { Session } from './Session';
@@ -6,15 +8,15 @@ import { Session } from './Session';
  * Fetches a session from storage
  */
 export function fetchSession({ sessionSampleRate, errorSampleRate }: SampleRates): Session | null {
-  const hasSessionStorage = 'sessionStorage' in window;
+  const hasSessionStorage = 'sessionStorage' in WINDOW;
 
   if (!hasSessionStorage) {
     return null;
   }
 
   try {
     // This can throw if cookies are disabled
-    const sessionStringFromStorage = window.sessionStorage.getItem(REPLAY_SESSION_KEY);
+    const sessionStringFromStorage = WINDOW.sessionStorage.getItem(REPLAY_SESSION_KEY);
 
     if (!sessionStringFromStorage) {
       return null;

packages/replay/src/session/saveSession.ts

@@ -1,14 +1,16 @@
+import { WINDOW } from '@sentry/browser';
+
 import { REPLAY_SESSION_KEY } from './constants';
 import { Session } from './Session';
 
 export function saveSession(session: Session): void {
-  const hasSessionStorage = 'sessionStorage' in window;
+  const hasSessionStorage = 'sessionStorage' in WINDOW;
   if (!hasSessionStorage) {
     return;
   }
 
   try {
-    window.sessionStorage.setItem(REPLAY_SESSION_KEY, JSON.stringify(session));
+    WINDOW.sessionStorage.setItem(REPLAY_SESSION_KEY, JSON.stringify(session));
   } catch {
     // Ignore potential SecurityError exceptions
   }

packages/replay/src/util/isBrowser.ts

@@ -1,5 +1,6 @@
 import { isNodeEnv } from '@sentry/utils';
 
 export function isBrowser(): boolean {
+  // eslint-disable-next-line no-restricted-globals
   return typeof window !== 'undefined' && !isNodeEnv();
 }