Skip to content

ref(replay): Extract sendReplay functionality into functions #6751

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jan 13, 2023
Merged

ref(replay): Extract sendReplay functionality into functions #6751

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fa46ba0
ref(replay): Extract replay sending into functions
mydea Jan 12, 2023
7113183
fix(replay): Ensure timestamp is always consistent, even after retries
mydea Jan 12, 2023
e87a5c1
ref: Fix `SendReplayData` type name
mydea Jan 12, 2023
dff1a44
ref: Rename `events` to `recordingData` for replays
mydea Jan 12, 2023
caec2f7
ref: Bring back rate limiting behavior
mydea Jan 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/replay/jest.setup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
import { getCurrentHub } from '@sentry/core';
import type { ReplayRecordingData,Transport } from '@sentry/types';
import type { ReplayRecordingData, Transport } from '@sentry/types';

import type { ReplayContainer, Session } from './src/types';

Expand Down Expand Up @@ -34,7 +34,7 @@ type SentReplayExpected = {
replayEventPayload?: ReplayEventPayload;
recordingHeader?: RecordingHeader;
recordingPayloadHeader?: RecordingPayloadHeader;
events?: ReplayRecordingData;
recordingData?: ReplayRecordingData;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

great change, "event" is overloaded enough already 😅

};

// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
Expand Down Expand Up @@ -79,7 +79,7 @@ function checkCallForSentReplay(
const [[replayEventHeader, replayEventPayload], [recordingHeader, recordingPayload] = []] = envelopeItems;

// @ts-ignore recordingPayload is always a string in our tests
const [recordingPayloadHeader, events] = recordingPayload?.split('\n') || [];
const [recordingPayloadHeader, recordingData] = recordingPayload?.split('\n') || [];

const actualObj: Required<SentReplayExpected> = {
// @ts-ignore Custom envelope
Expand All @@ -91,7 +91,7 @@ function checkCallForSentReplay(
// @ts-ignore Custom envelope
recordingHeader: recordingHeader,
recordingPayloadHeader: recordingPayloadHeader && JSON.parse(recordingPayloadHeader),
events,
recordingData,
};

const isObjectContaining = expected && 'sample' in expected && 'inverse' in expected;
Expand Down
3 changes: 3 additions & 0 deletions packages/replay/src/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,6 @@ export const MASK_ALL_TEXT_SELECTOR = 'body *:not(style), body *:not(script)';
export const DEFAULT_FLUSH_MIN_DELAY = 5_000;
export const DEFAULT_FLUSH_MAX_DELAY = 15_000;
export const INITIAL_FLUSH_DELAY = 5_000;

export const RETRY_BASE_INTERVAL = 5000;
export const RETRY_MAX_COUNT = 3;
229 changes: 16 additions & 213 deletions packages/replay/src/replay.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,11 @@
/* eslint-disable max-lines */ // TODO: We might want to split this file up
import { addGlobalEventProcessor, captureException, getCurrentHub, setContext } from '@sentry/core';
import type { Breadcrumb, ReplayEvent, ReplayRecordingMode, TransportMakeRequestResponse } from '@sentry/types';
import { addGlobalEventProcessor, captureException, getCurrentHub } from '@sentry/core';
import type { Breadcrumb, ReplayRecordingMode } from '@sentry/types';
import type { RateLimits } from '@sentry/utils';
import { addInstrumentationHandler, disabledUntil, isRateLimited, logger, updateRateLimits } from '@sentry/utils';
import { addInstrumentationHandler, disabledUntil, logger } from '@sentry/utils';
import { EventType, record } from 'rrweb';

import {
MAX_SESSION_LIFE,
REPLAY_EVENT_NAME,
SESSION_IDLE_DURATION,
UNABLE_TO_SEND_REPLAY,
VISIBILITY_CHANGE_TIMEOUT,
WINDOW,
} from './constants';
import { MAX_SESSION_LIFE, SESSION_IDLE_DURATION, VISIBILITY_CHANGE_TIMEOUT, WINDOW } from './constants';
import { breadcrumbHandler } from './coreHandlers/breadcrumbHandler';
import { handleFetchSpanListener } from './coreHandlers/handleFetch';
import { handleGlobalEventListener } from './coreHandlers/handleGlobalEvent';
Expand All @@ -34,28 +27,19 @@ import type {
RecordingOptions,
ReplayContainer as ReplayContainerInterface,
ReplayPluginOptions,
SendReplay,
Session,
} from './types';
import { addEvent } from './util/addEvent';
import { addMemoryEntry } from './util/addMemoryEntry';
import { createBreadcrumb } from './util/createBreadcrumb';
import { createPerformanceEntries } from './util/createPerformanceEntries';
import { createPerformanceSpans } from './util/createPerformanceSpans';
import { createRecordingData } from './util/createRecordingData';
import { createReplayEnvelope } from './util/createReplayEnvelope';
import { debounce } from './util/debounce';
import { isExpired } from './util/isExpired';
import { isSessionExpired } from './util/isSessionExpired';
import { overwriteRecordDroppedEvent, restoreRecordDroppedEvent } from './util/monkeyPatchRecordDroppedEvent';
import { prepareReplayEvent } from './util/prepareReplayEvent';

/**
* Returns true to return control to calling function, otherwise continue with normal batching
*/

const BASE_RETRY_INTERVAL = 5000;
const MAX_RETRY_COUNT = 3;
import { sendReplay } from './util/sendReplay';
import { RateLimitError } from './util/sendReplayRequest';

/**
* The main replay container class, which holds all the state and methods for recording and sending replays.
Expand Down Expand Up @@ -86,9 +70,6 @@ export class ReplayContainer implements ReplayContainerInterface {

private _performanceObserver: PerformanceObserver | null = null;

private _retryCount: number = 0;
private _retryInterval: number = BASE_RETRY_INTERVAL;

private _debouncedFlush: ReturnType<typeof debounce>;
private _flushLock: Promise<unknown> | null = null;

Expand Down Expand Up @@ -129,11 +110,6 @@ export class ReplayContainer implements ReplayContainerInterface {
initialUrl: '',
};

/**
* A RateLimits object holding the rate-limit durations in case a sent replay event was rate-limited.
*/
private _rateLimits: RateLimits = {};

public constructor({
options,
recordingOptions,
Expand Down Expand Up @@ -837,14 +813,20 @@ export class ReplayContainer implements ReplayContainerInterface {
const segmentId = this.session.segmentId++;
this._maybeSaveSession();

await this._sendReplay({
await sendReplay({
replayId,
events: recordingData,
recordingData,
segmentId,
includeReplayStartTimestamp: segmentId === 0,
eventContext,
session: this.session,
options: this.getOptions(),
timestamp: new Date().getTime(),
});
} catch (err) {
if (err instanceof RateLimitError) {
this._handleRateLimit(err.rateLimits);
}
this._handleException(err);
}
}
Expand Down Expand Up @@ -897,185 +879,6 @@ export class ReplayContainer implements ReplayContainerInterface {
}
};

/**
* Send replay attachment using `fetch()`
*/
private async _sendReplayRequest({
events,
replayId,
segmentId: segment_id,
includeReplayStartTimestamp,
eventContext,
timestamp = new Date().getTime(),
}: SendReplay): Promise<void | TransportMakeRequestResponse> {
const recordingData = createRecordingData({
events,
headers: {
segment_id,
},
});

const { urls, errorIds, traceIds, initialTimestamp } = eventContext;

const hub = getCurrentHub();
const client = hub.getClient();
const scope = hub.getScope();
const transport = client && client.getTransport();
const dsn = client?.getDsn();

if (!client || !scope || !transport || !dsn || !this.session || !this.session.sampled) {
return;
}

const baseEvent: ReplayEvent = {
// @ts-ignore private api
type: REPLAY_EVENT_NAME,
...(includeReplayStartTimestamp ? { replay_start_timestamp: initialTimestamp / 1000 } : {}),
timestamp: timestamp / 1000,
error_ids: errorIds,
trace_ids: traceIds,
urls,
replay_id: replayId,
segment_id,
replay_type: this.session.sampled,
};

const replayEvent = await prepareReplayEvent({ scope, client, replayId, event: baseEvent });

if (!replayEvent) {
// Taken from baseclient's `_processEvent` method, where this is handled for errors/transactions
client.recordDroppedEvent('event_processor', 'replay_event', baseEvent);
__DEBUG_BUILD__ && logger.log('An event processor returned `null`, will not send event.');
return;
}

replayEvent.tags = {
...replayEvent.tags,
sessionSampleRate: this._options.sessionSampleRate,
errorSampleRate: this._options.errorSampleRate,
};

/*
For reference, the fully built event looks something like this:
{
"type": "replay_event",
"timestamp": 1670837008.634,
"error_ids": [
"errorId"
],
"trace_ids": [
"traceId"
],
"urls": [
"https://example.com"
],
"replay_id": "eventId",
"segment_id": 3,
"replay_type": "error",
"platform": "javascript",
"event_id": "eventId",
"environment": "production",
"sdk": {
"integrations": [
"BrowserTracing",
"Replay"
],
"name": "sentry.javascript.browser",
"version": "7.25.0"
},
"sdkProcessingMetadata": {},
"tags": {
"sessionSampleRate": 1,
"errorSampleRate": 0,
}
}
*/

const envelope = createReplayEnvelope(replayEvent, recordingData, dsn, client.getOptions().tunnel);

try {
const response = await transport.send(envelope);
// TODO (v8): we can remove this guard once transport.send's type signature doesn't include void anymore
if (response) {
this._rateLimits = updateRateLimits(this._rateLimits, response);
if (isRateLimited(this._rateLimits, 'replay')) {
this._handleRateLimit();
}
}
return response;
} catch {
throw new Error(UNABLE_TO_SEND_REPLAY);
}
}

/**
* Reset the counter of retries for sending replays.
*/
private _resetRetries(): void {
this._retryCount = 0;
this._retryInterval = BASE_RETRY_INTERVAL;
}

/**
* Finalize and send the current replay event to Sentry
*/
private async _sendReplay({
replayId,
events,
segmentId,
includeReplayStartTimestamp,
eventContext,
}: SendReplay): Promise<unknown> {
// short circuit if there's no events to upload (this shouldn't happen as _runFlush makes this check)
if (!events.length) {
return;
}

try {
await this._sendReplayRequest({
events,
replayId,
segmentId,
includeReplayStartTimestamp,
eventContext,
});
this._resetRetries();
return true;
} catch (err) {
// Capture error for every failed replay
setContext('Replays', {
_retryCount: this._retryCount,
});
this._handleException(err);

// If an error happened here, it's likely that uploading the attachment
// failed, we'll can retry with the same events payload
if (this._retryCount >= MAX_RETRY_COUNT) {
throw new Error(`${UNABLE_TO_SEND_REPLAY} - max retries exceeded`);
}

// will retry in intervals of 5, 10, 30
this._retryInterval = ++this._retryCount * this._retryInterval;

return await new Promise((resolve, reject) => {
setTimeout(async () => {
try {
await this._sendReplay({
replayId,
events,
segmentId,
includeReplayStartTimestamp,
eventContext,
});
resolve(true);
} catch (err) {
reject(err);
}
}, this._retryInterval);
});
}
}

/** Save the session, if it is sticky */
private _maybeSaveSession(): void {
if (this.session && this._options.stickySession) {
Expand All @@ -1086,14 +889,14 @@ export class ReplayContainer implements ReplayContainerInterface {
/**
* Pauses the replay and resumes it after the rate-limit duration is over.
*/
private _handleRateLimit(): void {
private _handleRateLimit(rateLimits: RateLimits): void {
// in case recording is already paused, we don't need to do anything, as we might have already paused because of a
// rate limit
if (this.isPaused()) {
return;
}

const rateLimitEnd = disabledUntil(this._rateLimits, 'replay');
const rateLimitEnd = disabledUntil(rateLimits, 'replay');
const rateLimitDuration = rateLimitEnd - Date.now();

if (rateLimitDuration > 0) {
Expand Down
10 changes: 5 additions & 5 deletions packages/replay/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,17 @@ import type { eventWithTime, recordOptions } from './types/rrweb';
export type RecordingEvent = eventWithTime;
export type RecordingOptions = recordOptions;

export type RecordedEvents = Uint8Array | string;

export type AllPerformanceEntry = PerformancePaintTiming | PerformanceResourceTiming | PerformanceNavigationTiming;

export interface SendReplay {
events: RecordedEvents;
export interface SendReplayData {
recordingData: ReplayRecordingData;
replayId: string;
segmentId: number;
includeReplayStartTimestamp: boolean;
eventContext: PopEventContext;
timestamp?: number;
timestamp: number;
session: Session;
options: ReplayPluginOptions;
}

export type InstrumentationTypeBreadcrumb = 'dom' | 'scope';
Expand Down
Loading