From 98e2f334d7c8455215968016f59ebb49acd96b7c Mon Sep 17 00:00:00 2001 From: Anthony Teo Date: Mon, 29 Mar 2021 20:52:03 -0500 Subject: [PATCH 1/3] Consider allevents for inactivity --- package.json | 2 +- src/replay/index.ts | 13 ++++++------- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index c4a5a9af..1273592b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@highlight-run/rrweb", - "version": "0.10.0", + "version": "0.10.1", "description": "record and replay the web", "scripts": { "test": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.test.ts", diff --git a/src/replay/index.ts b/src/replay/index.ts index ac8ddca3..69736ef4 100644 --- a/src/replay/index.ts +++ b/src/replay/index.ts @@ -246,6 +246,7 @@ export class Replayer { ); }, 1); } + console.log('POGGES'); } public on(event: string, handler: Handler) { @@ -292,16 +293,14 @@ export class Replayer { // Preprocessing to get all active/inactive segments in a session const allIntervals: Array = []; const metadata = this.getMetaData(); - const userInteractionEvents = [ + const allEvents = [ { timestamp: metadata.startTime }, - ...this.service.state.context.events.filter((ev) => - this.isUserInteraction(ev), - ), + ...this.service.state.context.events, { timestamp: metadata.endTime }, ]; - for (let i = 1; i < userInteractionEvents.length; i++) { - const currentInterval = userInteractionEvents[i - 1]; - const _event = userInteractionEvents[i]; + for (let i = 1; i < allEvents.length; i++) { + const currentInterval = allEvents[i - 1]; + const _event = allEvents[i]; if ( _event.timestamp! - currentInterval.timestamp! > SKIP_TIME_THRESHOLD From 87ac0c720f4261013a32c0311d816cbf7196ce12 Mon Sep 17 00:00:00 2001 From: Anthony Teo Date: Mon, 29 Mar 2021 20:53:00 -0500 Subject: [PATCH 2/3] Remove log --- src/replay/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/replay/index.ts b/src/replay/index.ts index 69736ef4..11d6c935 100644 --- a/src/replay/index.ts +++ b/src/replay/index.ts @@ -246,7 +246,6 @@ export class Replayer { ); }, 1); } - console.log('POGGES'); } public on(event: string, handler: Handler) { From 1f0013d931f6e130926557f0aa08221649565e44 Mon Sep 17 00:00:00 2001 From: Anthony Teo Date: Tue, 30 Mar 2021 12:30:57 -0500 Subject: [PATCH 3/3] skip inactive --- src/replay/index.ts | 35 +++++++++++++++++++++++------------ src/types.ts | 1 - 2 files changed, 23 insertions(+), 13 deletions(-) diff --git a/src/replay/index.ts b/src/replay/index.ts index 11d6c935..97840cde 100644 --- a/src/replay/index.ts +++ b/src/replay/index.ts @@ -137,7 +137,6 @@ export class Replayer { logConfig: defaultLogConfig, inactiveThreshold: 0.02, inactiveSkipTime: SKIP_TIME_INTERVAL, - maxSkipSpeed: 360, }; this.config = Object.assign({}, defaultConfig, config); if (!this.config.logConfig.replayLogger) @@ -529,19 +528,23 @@ export class Replayer { * This will add more value to the custom event and allows the client to react for custom-event. */ this.emitter.emit(ReplayerEvents.CustomEvent, event); + this.handleInactivity(event.timestamp); }; break; case EventType.Meta: - castFn = () => + castFn = () => { this.emitter.emit(ReplayerEvents.Resize, { width: event.data.width, height: event.data.height, }); + this.handleInactivity(event.timestamp); + }; break; case EventType.FullSnapshot: castFn = () => { this.rebuildFullSnapshot(event, isSync); this.iframe.contentWindow!.scrollTo(event.data.initialOffset); + this.handleInactivity(event.timestamp); }; break; case EventType.IncrementalSnapshot: @@ -592,7 +595,6 @@ export class Replayer { private handleInactivity(timestamp: number, resetNext?: boolean) { if (timestamp === this.inactiveEndTimestamp || resetNext) { this.inactiveEndTimestamp = null; - this.backToNormal(); } if (this.config.skipInactive && !this.inactiveEndTimestamp) { for (const interval of this.getActivityIntervals()) { @@ -606,15 +608,24 @@ export class Replayer { } } if (this.inactiveEndTimestamp) { - const skipTime = this.inactiveEndTimestamp! - timestamp!; - const payload = { - speed: Math.min( - Math.round(skipTime / this.config.inactiveSkipTime), - this.config.maxSkipSpeed, - ), - }; - this.speedService.send({ type: 'FAST_FORWARD', payload }); - this.emitter.emit(ReplayerEvents.SkipStart, payload); + const skipOffset = + this.inactiveEndTimestamp - this.getMetaData().startTime; + if (this.service.state.matches('paused')) { + this.service.send({ + type: 'PLAY', + payload: { timeOffset: skipOffset }, + }); + } else { + this.service.send({ type: 'PAUSE' }); + this.service.send({ + type: 'PLAY', + payload: { timeOffset: skipOffset }, + }); + } + this.iframe.contentDocument + ?.getElementsByTagName('html')[0] + .classList.remove('rrweb-paused'); + this.emitter.emit(ReplayerEvents.Start); } } } diff --git a/src/types.ts b/src/types.ts index 4615b953..91e3d51a 100644 --- a/src/types.ts +++ b/src/types.ts @@ -511,7 +511,6 @@ export type playerConfig = { logConfig: LogReplayConfig; inactiveThreshold: number; inactiveSkipTime: number; - maxSkipSpeed: number; }; export type LogReplayConfig = {