ref(replay): Use WINDOW instead of window

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/jest.setup.ts

@@ -10,6 +10,12 @@ global.__SENTRY_REPLAY_VERSION__ = 'version:Test';
 
 type MockTransport = jest.MockedFunction<Transport['send']>;
 
+jest.mock('./src/util/isBrowser', () => {
+  return {
+    isBrowser: () => true,
+  };
+});
+
 afterEach(() => {
   const hub = getCurrentHub();
   if (typeof hub?.getClient !== 'function') {

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';
@@ -38,6 +39,7 @@ import { captureInternalException } from './util/captureInternalException';
 import { createBreadcrumb } from './util/createBreadcrumb';
 import { createPayload } from './util/createPayload';
 import { dedupePerformanceEntries } from './util/dedupePerformanceEntries';
+import { isBrowser } from './util/isBrowser';
 import { isExpired } from './util/isExpired';
 import { isSessionExpired } from './util/isSessionExpired';
 
@@ -53,8 +55,6 @@ const MEDIA_SELECTORS = 'img,image,svg,path,rect,area,video,object,picture,embed
 
 let _initialized = false;
 
-const isBrowser = typeof window !== 'undefined';
-
 export class Replay implements Integration {
   /**
    * @inheritDoc
@@ -210,7 +210,7 @@ export class Replay implements Integration {
       maxWait: this.options.flushMaxDelay,
     });
 
-    if (isBrowser && _initialized) {
+    if (isBrowser() && _initialized) {
       const error = new Error('Multiple Sentry Session Replay instances are not supported');
       captureInternalException(error);
       throw error;
@@ -229,11 +229,11 @@ export class Replay implements Integration {
    * here to avoid any future issues.
    */
   setupOnce(): void {
-    if (!isBrowser) {
+    if (!isBrowser()) {
       return;
     }
     // XXX: See method comments above
-    window.setTimeout(() => this.start());
+    setTimeout(() => this.start());
   }
 
   /**
@@ -243,7 +243,7 @@ export class Replay implements Integration {
    * PerformanceObserver, Recording, Sentry SDK, etc)
    */
   start(): void {
-    if (!isBrowser) {
+    if (!isBrowser()) {
       return;
     }
 
@@ -309,7 +309,7 @@ export class Replay implements Integration {
    * does not support a teardown
    */
   stop(): void {
-    if (!isBrowser) {
+    if (!isBrowser()) {
       return;
     }
 
@@ -397,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 = [];
 
@@ -415,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) {
@@ -441,7 +441,7 @@ export class Replay implements Integration {
     }
 
     // PerformanceObserver //
-    if (!('PerformanceObserver' in window)) {
+    if (!('PerformanceObserver' in WINDOW)) {
       return;
     }
 
@@ -476,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();
@@ -666,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();
@@ -981,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

@@ -0,0 +1,5 @@
+import { isNodeEnv } from '@sentry/utils';
+
+export function isBrowser(): boolean {
+  return !isNodeEnv();
+}

packages/replay/src/util/isInternal.ts

@@ -1,9 +1,10 @@
-const isBrowser = typeof window !== 'undefined';
+import { WINDOW } from '@sentry/browser';
+import { isBrowser } from './isBrowser';
 
 /**
  * Returns true if we are currently recording an internal to Sentry replay
  * (e.g. on https://sentry.io )
  */
 export function isInternal(): boolean {
-  return isBrowser && ['sentry.io', 'dev.getsentry.net'].includes(window.location.host);
+  return isBrowser() && ['sentry.io', 'dev.getsentry.net'].includes(WINDOW.location.host);
 }