[Gitflow] Merge develop into master

packages/integration-tests/suites/replay/errors/errorMode/test.ts

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 
 import { sentryTest } from '../../../../utils/fixtures';
-import { envelopeRequestParser } from '../../../../utils/helpers';
+import { envelopeRequestParser, waitForErrorRequest } from '../../../../utils/helpers';
 import {
   expectedClickBreadcrumb,
   expectedConsoleBreadcrumb,
@@ -10,6 +10,7 @@ import {
 import {
   getReplayEvent,
   getReplayRecordingContent,
+  isReplayEvent,
   shouldSkipReplayTest,
   waitForReplayRequest,
 } from '../../../../utils/replayHelpers';
@@ -26,14 +27,18 @@ sentryTest(
     const reqPromise0 = waitForReplayRequest(page, 0);
     const reqPromise1 = waitForReplayRequest(page, 1);
     const reqPromise2 = waitForReplayRequest(page, 2);
+    const reqErrorPromise = waitForErrorRequest(page);
 
     await page.route('https://dsn.ingest.sentry.io/**/*', route => {
       const event = envelopeRequestParser(route.request());
       // error events have no type field
       if (event && !event.type && event.event_id) {
         errorEventId = event.event_id;
       }
-      callsToSentry++;
+      // We only want to count errors & replays here
+      if (event && (!event.type || isReplayEvent(event))) {
+        callsToSentry++;
+      }
 
       return route.fulfill({
         status: 200,
@@ -46,13 +51,16 @@ sentryTest(
 
     await page.goto(url);
     await page.click('#go-background');
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
     expect(callsToSentry).toEqual(0);
 
     await page.click('#error');
     const req0 = await reqPromise0;
 
     await page.click('#go-background');
     const req1 = await reqPromise1;
+    await reqErrorPromise;
 
     expect(callsToSentry).toEqual(3); // 1 error, 2 replay events
 
@@ -69,11 +77,12 @@ sentryTest(
     const event2 = getReplayEvent(req2);
     const content2 = getReplayRecordingContent(req2);
 
+    expect(callsToSentry).toBe(4); // 1 error, 3 replay events
+
     expect(event0).toEqual(
       getExpectedReplayEvent({
         contexts: { replay: { error_sample_rate: 1, session_sample_rate: 0 } },
-        // @ts-ignore this is fine
-        error_ids: [errorEventId],
+        error_ids: [errorEventId!],
         replay_type: 'error',
       }),
     );
@@ -97,7 +106,6 @@ sentryTest(
     expect(event1).toEqual(
       getExpectedReplayEvent({
         contexts: { replay: { error_sample_rate: 1, session_sample_rate: 0 } },
-        // @ts-ignore this is fine
         replay_type: 'error', // although we're in session mode, we still send 'error' as replay_type
         replay_start_timestamp: undefined,
         segment_id: 1,
@@ -108,14 +116,12 @@ sentryTest(
     // Also the second snapshot should have a full snapshot, as we switched from error to session
     // mode which triggers another checkout
     expect(content1.fullSnapshots).toHaveLength(1);
-    expect(content1.incrementalSnapshots).toHaveLength(0);
 
     // The next event should just be a normal replay event as we're now in session mode and
     // we continue recording everything
     expect(event2).toEqual(
       getExpectedReplayEvent({
         contexts: { replay: { error_sample_rate: 1, session_sample_rate: 0 } },
-        // @ts-ignore this is fine
         replay_type: 'error',
         replay_start_timestamp: undefined,
         segment_id: 2,

packages/integration-tests/suites/replay/errors/errorsInSession/test.ts

@@ -39,7 +39,6 @@ sentryTest(
     const url = await getLocalTestPath({ testDir: __dirname });
 
     await page.goto(url);
-    await page.click('#go-background');
     const req0 = await reqPromise0;
 
     await page.click('#error');
@@ -57,7 +56,6 @@ sentryTest(
       getExpectedReplayEvent({
         replay_start_timestamp: undefined,
         segment_id: 1,
-        // @ts-ignore this is fine
         error_ids: [errorEventId],
         urls: [],
       }),

packages/integration-tests/suites/replay/errors/init.js

@@ -2,8 +2,8 @@ import * as Sentry from '@sentry/browser';
 
 window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
-  flushMinDelay: 500,
-  flushMaxDelay: 500,
+  flushMinDelay: 1000,
+  flushMaxDelay: 1000,
 });
 
 Sentry.init({

packages/integration-tests/utils/helpers.ts

@@ -108,6 +108,23 @@ async function getSentryEvents(page: Page, url?: string): Promise<Array<Event>>
   return eventsHandle.jsonValue();
 }
 
+export function waitForErrorRequest(page: Page): Promise<Request> {
+  return page.waitForRequest(req => {
+    const postData = req.postData();
+    if (!postData) {
+      return false;
+    }
+
+    try {
+      const event = envelopeRequestParser(req);
+
+      return !event.type;
+    } catch {
+      return false;
+    }
+  });
+}
+
 /**
  * Waits until a number of requests matching urlRgx at the given URL arrive.
  * If the timout option is configured, this function will abort waiting, even if it hasn't reveived the configured

packages/integration-tests/utils/replayHelpers.ts

@@ -64,7 +64,7 @@ export function waitForReplayRequest(page: Page, segmentId?: number): Promise<Re
   });
 }
 
-function isReplayEvent(event: Event): event is ReplayEvent {
+export function isReplayEvent(event: Event): event is ReplayEvent {
   return event.type === 'replay_event';
 }
 

packages/replay/src/constants.ts

@@ -14,9 +14,6 @@ export const UNABLE_TO_SEND_REPLAY = 'Unable to send Replay';
 // The idle limit for a session
 export const SESSION_IDLE_DURATION = 300_000; // 5 minutes in ms
 
-// Grace period to keep a session when a user changes tabs or hides window
-export const VISIBILITY_CHANGE_TIMEOUT = SESSION_IDLE_DURATION;
-
 // The maximum length of a session
 export const MAX_SESSION_LIFE = 3_600_000; // 60 minutes
 

packages/replay/src/replay.ts

@@ -4,13 +4,7 @@ import { captureException, getCurrentHub } from '@sentry/core';
 import type { Breadcrumb, ReplayRecordingMode } from '@sentry/types';
 import { logger } from '@sentry/utils';
 
-import {
-  ERROR_CHECKOUT_TIME,
-  MAX_SESSION_LIFE,
-  SESSION_IDLE_DURATION,
-  VISIBILITY_CHANGE_TIMEOUT,
-  WINDOW,
-} from './constants';
+import { ERROR_CHECKOUT_TIME, MAX_SESSION_LIFE, SESSION_IDLE_DURATION, WINDOW } from './constants';
 import { setupPerformanceObserver } from './coreHandlers/performanceObserver';
 import { createEventBuffer } from './eventBuffer';
 import { getSession } from './session/getSession';
@@ -367,7 +361,7 @@ export class ReplayContainer implements ReplayContainerInterface {
    * Returns true if session is not expired, false otherwise.
    * @hidden
    */
-  public checkAndHandleExpiredSession(expiry?: number): boolean | void {
+  public checkAndHandleExpiredSession(): boolean | void {
     const oldSessionId = this.getSessionId();
 
     // Prevent starting a new session if the last user activity is older than
@@ -382,7 +376,7 @@ export class ReplayContainer implements ReplayContainerInterface {
 
     // --- There is recent user activity --- //
     // This will create a new session if expired, based on expiry length
-    if (!this._loadAndCheckSession(expiry)) {
+    if (!this._loadAndCheckSession()) {
       return;
     }
 
@@ -412,9 +406,9 @@ export class ReplayContainer implements ReplayContainerInterface {
    * Loads (or refreshes) the current session.
    * Returns false if session is not recorded.
    */
-  private _loadAndCheckSession(expiry = SESSION_IDLE_DURATION): boolean {
+  private _loadAndCheckSession(): boolean {
     const { type, session } = getSession({
-      expiry,
+      expiry: SESSION_IDLE_DURATION,
       stickySession: Boolean(this._options.stickySession),
       currentSession: this.session,
       sessionSampleRate: this._options.sessionSampleRate,
@@ -626,7 +620,7 @@ export class ReplayContainer implements ReplayContainerInterface {
       return;
     }
 
-    const expired = isSessionExpired(this.session, VISIBILITY_CHANGE_TIMEOUT);
+    const expired = isSessionExpired(this.session, SESSION_IDLE_DURATION);
 
     if (breadcrumb && !expired) {
       this._createCustomBreadcrumb(breadcrumb);
@@ -646,10 +640,10 @@ export class ReplayContainer implements ReplayContainerInterface {
       return;
     }
 
-    const isSessionActive = this.checkAndHandleExpiredSession(VISIBILITY_CHANGE_TIMEOUT);
+    const isSessionActive = this.checkAndHandleExpiredSession();
 
     if (!isSessionActive) {
-      // If the user has come back to the page within VISIBILITY_CHANGE_TIMEOUT
+      // If the user has come back to the page within SESSION_IDLE_DURATION
       // ms, we will re-use the existing session, otherwise create a new
       // session
       __DEBUG_BUILD__ && logger.log('[Replay] Document has become active, but session has expired');

packages/replay/test/integration/errorSampleRate.test.ts

@@ -5,7 +5,7 @@ import {
   ERROR_CHECKOUT_TIME,
   MAX_SESSION_LIFE,
   REPLAY_SESSION_KEY,
-  VISIBILITY_CHANGE_TIMEOUT,
+  SESSION_IDLE_DURATION,
   WINDOW,
 } from '../../src/constants';
 import type { ReplayContainer } from '../../src/replay';
@@ -154,15 +154,15 @@ describe('Integration | errorSampleRate', () => {
     });
   });
 
-  it('does not send a replay when triggering a full dom snapshot when document becomes visible after [VISIBILITY_CHANGE_TIMEOUT]ms', async () => {
+  it('does not send a replay when triggering a full dom snapshot when document becomes visible after [SESSION_IDLE_DURATION]ms', async () => {
     Object.defineProperty(document, 'visibilityState', {
       configurable: true,
       get: function () {
         return 'visible';
       },
     });
 
-    jest.advanceTimersByTime(VISIBILITY_CHANGE_TIMEOUT + 1);
+    jest.advanceTimersByTime(SESSION_IDLE_DURATION + 1);
 
     document.dispatchEvent(new Event('visibilitychange'));
 
@@ -186,8 +186,8 @@ describe('Integration | errorSampleRate', () => {
 
     expect(replay).not.toHaveLastSentReplay();
 
-    // User comes back before `VISIBILITY_CHANGE_TIMEOUT` elapses
-    jest.advanceTimersByTime(VISIBILITY_CHANGE_TIMEOUT - 100);
+    // User comes back before `SESSION_IDLE_DURATION` elapses
+    jest.advanceTimersByTime(SESSION_IDLE_DURATION - 100);
     Object.defineProperty(document, 'visibilityState', {
       configurable: true,
       get: function () {

packages/replay/test/integration/events.test.ts

@@ -40,7 +40,7 @@ describe('Integration | events', () => {
     // Create a new session and clear mocks because a segment (from initial
     // checkout) will have already been uploaded by the time the tests run
     clearSession(replay);
-    replay['_loadAndCheckSession'](0);
+    replay['_loadAndCheckSession']();
     mockTransportSend.mockClear();
   });
 
@@ -93,7 +93,7 @@ describe('Integration | events', () => {
 
   it('has correct timestamps when there are events earlier than initial timestamp', async function () {
     clearSession(replay);
-    replay['_loadAndCheckSession'](0);
+    replay['_loadAndCheckSession']();
     mockTransportSend.mockClear();
     Object.defineProperty(document, 'visibilityState', {
       configurable: true,

packages/replay/test/integration/flush.test.ts

@@ -1,6 +1,6 @@
 import * as SentryUtils from '@sentry/utils';
 
-import { DEFAULT_FLUSH_MIN_DELAY, SESSION_IDLE_DURATION, WINDOW } from '../../src/constants';
+import { DEFAULT_FLUSH_MIN_DELAY, WINDOW } from '../../src/constants';
 import type { ReplayContainer } from '../../src/replay';
 import type { EventBuffer } from '../../src/types';
 import * as AddMemoryEntry from '../../src/util/addMemoryEntry';
@@ -95,7 +95,7 @@ describe('Integration | flush', () => {
     jest.setSystemTime(new Date(BASE_TIMESTAMP));
     sessionStorage.clear();
     clearSession(replay);
-    replay['_loadAndCheckSession'](SESSION_IDLE_DURATION);
+    replay['_loadAndCheckSession']();
     mockRecord.takeFullSnapshot.mockClear();
     Object.defineProperty(WINDOW, 'location', {
       value: prevLocation,

packages/replay/test/integration/rateLimiting.test.ts

@@ -1,7 +1,7 @@
 import { getCurrentHub } from '@sentry/core';
 import type { Transport } from '@sentry/types';
 
-import { DEFAULT_FLUSH_MIN_DELAY, SESSION_IDLE_DURATION } from '../../src/constants';
+import { DEFAULT_FLUSH_MIN_DELAY } from '../../src/constants';
 import type { ReplayContainer } from '../../src/replay';
 import * as SendReplayRequest from '../../src/util/sendReplayRequest';
 import { BASE_TIMESTAMP, mockSdk } from '../index';
@@ -46,7 +46,7 @@ describe('Integration | rate-limiting behaviour', () => {
     // Create a new session and clear mocks because a segment (from initial
     // checkout) will have already been uploaded by the time the tests run
     clearSession(replay);
-    replay['_loadAndCheckSession'](0);
+    replay['_loadAndCheckSession']();
 
     mockSendReplayRequest.mockClear();
   });
@@ -57,7 +57,7 @@ describe('Integration | rate-limiting behaviour', () => {
     jest.setSystemTime(new Date(BASE_TIMESTAMP));
     clearSession(replay);
     jest.clearAllMocks();
-    replay['_loadAndCheckSession'](SESSION_IDLE_DURATION);
+    replay['_loadAndCheckSession']();
   });
 
   afterAll(() => {

packages/replay/test/integration/sendReplayEvent.test.ts

@@ -2,7 +2,7 @@ import * as SentryCore from '@sentry/core';
 import type { Transport } from '@sentry/types';
 import * as SentryUtils from '@sentry/utils';
 
-import { DEFAULT_FLUSH_MIN_DELAY, SESSION_IDLE_DURATION, WINDOW } from '../../src/constants';
+import { DEFAULT_FLUSH_MIN_DELAY, WINDOW } from '../../src/constants';
 import type { ReplayContainer } from '../../src/replay';
 import { addEvent } from '../../src/util/addEvent';
 import * as SendReplayRequest from '../../src/util/sendReplayRequest';
@@ -59,7 +59,7 @@ describe('Integration | sendReplayEvent', () => {
     // Create a new session and clear mocks because a segment (from initial
     // checkout) will have already been uploaded by the time the tests run
     clearSession(replay);
-    replay['_loadAndCheckSession'](0);
+    replay['_loadAndCheckSession']();
 
     mockSendReplayRequest.mockClear();
   });
@@ -69,7 +69,7 @@ describe('Integration | sendReplayEvent', () => {
     await new Promise(process.nextTick);
     jest.setSystemTime(new Date(BASE_TIMESTAMP));
     clearSession(replay);
-    replay['_loadAndCheckSession'](SESSION_IDLE_DURATION);
+    replay['_loadAndCheckSession']();
   });
 
   afterAll(() => {