xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Expose constant SKIP_TIME_THRESHOLD as inactivePeriodThreshold in replayer (#1408)

Browse Source 
Expose constant SKIP_TIME_THRESHOLD as `inactivePeriodThreshold` config setting in replayer
This commit is contained in:
Antonio Villegas
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 5956f9b4aa
commit 2ac93b18c7
5 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
guide.md
View File

@@ -301,6 +301,7 @@ The replayer accepts options as its constructor's second parameter, and it has t
| root | document.body | the root element of replayer | | root | document.body | the root element of replayer |
| loadTimeout | 0 | timeout of loading remote style sheet | | loadTimeout | 0 | timeout of loading remote style sheet |
| skipInactive | false | whether to skip inactive time | | skipInactive | false | whether to skip inactive time |
| inactivePeriodThreshold | 10000 | the threshold in milliseconds for what should be considered an inactive period |
| showWarning | true | whether to print warning messages during replay | | showWarning | true | whether to print warning messages during replay |
| showDebug | false | whether to print debug messages during replay | | showDebug | false | whether to print debug messages during replay |
| blockClass | 'rr-block' | element with the class name will display as a blocked area | | blockClass | 'rr-block' | element with the class name will display as a blocked area |

2
packages/rrweb-player/src/Controller.svelte
View File

@@ -114,7 +114,7 @@
const totalEvents = context.events.length; const totalEvents = context.events.length;
const start = context.events[0].timestamp; const start = context.events[0].timestamp;
const end = context.events[totalEvents - 1].timestamp; const end = context.events[totalEvents - 1].timestamp;
const periods = getInactivePeriods(context.events); const periods = getInactivePeriods(context.events, replayer.config.inactivePeriodThreshold);
// calculate the indicator width. // calculate the indicator width.
const getWidth = ( const getWidth = (
startTime: number, startTime: number,

8
packages/rrweb-player/src/utils.ts
View File

@@ -161,20 +161,18 @@ function isUserInteraction(event: eventWithTime): boolean {
); );
} }
// Forked from 'rrweb' replay/index.ts. A const threshold of inactive time.
const SKIP_TIME_THRESHOLD = 10 * 1000;
/** /**
* Get periods of time when no user interaction happened from a list of events. * Get periods of time when no user interaction happened from a list of events.
* @param events - all events * @param events - all events
* @param inactivePeriodThreshold - threshold of inactive time in milliseconds
* @returns periods of time consist with [start time, end time] * @returns periods of time consist with [start time, end time]
*/ */
export function getInactivePeriods(events: eventWithTime[]) { export function getInactivePeriods(events: eventWithTime[], inactivePeriodThreshold: number) {
const inactivePeriods: [number, number][] = []; const inactivePeriods: [number, number][] = [];
let lastActiveTime = events[0].timestamp; let lastActiveTime = events[0].timestamp;
for (const event of events) { for (const event of events) {
if (!isUserInteraction(event)) continue; if (!isUserInteraction(event)) continue;
if (event.timestamp - lastActiveTime > SKIP_TIME_THRESHOLD) { if (event.timestamp - lastActiveTime > inactivePeriodThreshold) {
inactivePeriods.push([lastActiveTime, event.timestamp]); inactivePeriods.push([lastActiveTime, event.timestamp]);
} }
lastActiveTime = event.timestamp; lastActiveTime = event.timestamp;

4
packages/rrweb/src/replay/index.ts
View File

@@ -82,7 +82,6 @@ import './styles/style.css';
import canvasMutation from './canvas'; import canvasMutation from './canvas';
import { deserializeArg } from './canvas/deserialize-args'; import { deserializeArg } from './canvas/deserialize-args';
const SKIP_TIME_THRESHOLD = 10 * 1000;
const SKIP_TIME_INTERVAL = 5 * 1000; const SKIP_TIME_INTERVAL = 5 * 1000;
// https://github.com/rollup/rollup/issues/1267#issuecomment-296395734 // https://github.com/rollup/rollup/issues/1267#issuecomment-296395734
@@ -179,6 +178,7 @@ export class Replayer {
root: document.body, root: document.body,
loadTimeout: 0, loadTimeout: 0,
skipInactive: false, skipInactive: false,
inactivePeriodThreshold: 10 * 1000,
showWarning: true, showWarning: true,
showDebug: false, showDebug: false,
blockClass: 'rr-block', blockClass: 'rr-block',
@@ -692,7 +692,7 @@ export class Replayer {
if ( if (
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
_event.delay! - event.delay! > _event.delay! - event.delay! >
SKIP_TIME_THRESHOLD * this.config.inactivePeriodThreshold *
this.speedService.state.context.timer.speed this.speedService.state.context.timer.speed
) { ) {
this.nextUserInteractionEvent = _event; this.nextUserInteractionEvent = _event;

1
packages/rrweb/src/types.ts
View File

@@ -170,6 +170,7 @@ export type playerConfig = {
root: Element; root: Element;
loadTimeout: number; loadTimeout: number;
skipInactive: boolean; skipInactive: boolean;
inactivePeriodThreshold: number;
showWarning: boolean; showWarning: boolean;
showDebug: boolean; showDebug: boolean;
blockClass: string; blockClass: string;