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

remove the internal use of resume API

Browse Source
This commit is contained in:
Yanzhen Yu
2020-08-09 13:03:12 +08:00
parent 54baa27b36
commit 006b709c00
4 changed files with 10 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
guide.md
View File

@@ -133,7 +133,7 @@ rrweb.record({
}); });
// send last two events array to the backend // send last two events array to the backend
window.onerror = function() { window.onerror = function () {
const len = eventsMatrix.length; const len = eventsMatrix.length;
const events = eventsMatrix[len - 2].concat(eventsMatrix[len - 1]); const events = eventsMatrix[len - 2].concat(eventsMatrix[len - 1]);
const body = JSON.stringify({ events }); const body = JSON.stringify({ events });
@@ -168,7 +168,7 @@ rrweb.record({
}); });
// send last two events array to the backend // send last two events array to the backend
window.onerror = function() { window.onerror = function () {
const len = eventsMatrix.length; const len = eventsMatrix.length;
const events = eventsMatrix[len - 2].concat(eventsMatrix[len - 1]); const events = eventsMatrix[len - 2].concat(eventsMatrix[len - 1]);
const body = JSON.stringify({ events }); const body = JSON.stringify({ events });
@@ -260,7 +260,6 @@ So rrweb expose a public API `on` which allow developers listen to the events an
| ---------------------- | ---------------------------------- | | ---------------------- | ---------------------------------- |
| start | started to replay | | start | started to replay |
| pause | paused the replay | | pause | paused the replay |
| resume | resumed the replay |
| finish | finished the replay | | finish | finished the replay |
| fullsnapshot-rebuilded | rebuilded a full snapshot | | fullsnapshot-rebuilded | rebuilded a full snapshot |
| load-stylesheet-start | started to load remote stylesheets | | load-stylesheet-start | started to load remote stylesheets |
@@ -298,8 +297,7 @@ class Replayer {
public getMetaData(): playerMetaData; public getMetaData(): playerMetaData;
public getTimeOffset(): number; public getTimeOffset(): number;
public play(timeOffset?: number): void; public play(timeOffset?: number): void;
public pause(): void; public pause(timeOffset?: number): void;
public resume(timeOffset?: number): void;
} }
type playerConfig = { type playerConfig = {

11
guide.zh_CN.md
View File

@@ -108,7 +108,7 @@ setInterval(save, 10 * 1000);
#### 重新制作快照 #### 重新制作快照
默认情况下，要重放内容需要所有的event，如果你不想存储所有的event，可以使用`checkout`配置。 默认情况下，要重放内容需要所有的 event，如果你不想存储所有的 event，可以使用`checkout`配置。
**多数时候你不必这样配置**。但比如在页面错误发生时，你只想捕获最近的几次 event ，这里有一个例子： **多数时候你不必这样配置**。但比如在页面错误发生时，你只想捕获最近的几次 event ，这里有一个例子：
@@ -129,7 +129,7 @@ rrweb.record({
}); });
// 向后端传送最新的两个 event 数组 // 向后端传送最新的两个 event 数组
window.onerror = function() { window.onerror = function () {
const len = eventsMatrix.length; const len = eventsMatrix.length;
const events = eventsMatrix[len - 2].concat(eventsMatrix[len - 1]); const events = eventsMatrix[len - 2].concat(eventsMatrix[len - 1]);
const body = JSON.stringify({ events }); const body = JSON.stringify({ events });
@@ -143,7 +143,7 @@ window.onerror = function() {
}; };
``` ```
由于rrweb 使用了增量快照机制，我们不能指定数量来捕获最近的几次 event。上面这个例子，你可以拿到最新的 200-400 个 event 来发送给你的后端。 由于 rrweb 使用了增量快照机制，我们不能指定数量来捕获最近的几次 event。上面这个例子，你可以拿到最新的 200-400 个 event 来发送给你的后端。
类似的，你可以通过配置 `checkoutEveryNms` 来捕获最近指定时间的 event : 类似的，你可以通过配置 `checkoutEveryNms` 来捕获最近指定时间的 event :
@@ -164,7 +164,7 @@ rrweb.record({
}); });
// 向后端传送最新的两个 event 数组 // 向后端传送最新的两个 event 数组
window.onerror = function() { window.onerror = function () {
const len = eventsMatrix.length; const len = eventsMatrix.length;
const events = eventsMatrix[len - 2].concat(eventsMatrix[len - 1]); const events = eventsMatrix[len - 2].concat(eventsMatrix[len - 1]);
const body = JSON.stringify({ events }); const body = JSON.stringify({ events });
@@ -274,8 +274,7 @@ class Replayer {
public getMetaData(): playerMetaData; public getMetaData(): playerMetaData;
public getTimeOffset(): number; public getTimeOffset(): number;
public play(timeOffset?: number): void; public play(timeOffset?: number): void;
public pause(): void; public pause(timeOffset?: number): void;
public resume(timeOffset?: number): void;
} }
type playerConfig = { type playerConfig = {

4
src/replay/index.ts
View File

@@ -434,7 +434,7 @@ export class Replayer {
// all loaded and timer not released yet // all loaded and timer not released yet
if (unloadSheets.size === 0 && timer !== -1) { if (unloadSheets.size === 0 && timer !== -1) {
if (beforeLoadState.matches('playing')) { if (beforeLoadState.matches('playing')) {
this.resume(this.getCurrentTime()); this.play(this.getCurrentTime());
} }
this.emitter.emit(ReplayerEvents.LoadStylesheetEnd); this.emitter.emit(ReplayerEvents.LoadStylesheetEnd);
if (timer) { if (timer) {
@@ -451,7 +451,7 @@ export class Replayer {
this.emitter.emit(ReplayerEvents.LoadStylesheetStart); this.emitter.emit(ReplayerEvents.LoadStylesheetStart);
timer = window.setTimeout(() => { timer = window.setTimeout(() => {
if (beforeLoadState.matches('playing')) { if (beforeLoadState.matches('playing')) {
this.resume(this.getCurrentTime()); this.play(this.getCurrentTime());
} }
// mark timer was called // mark timer was called
timer = -1; timer = -1;

14
test/replayer.test.ts
View File

@@ -85,18 +85,4 @@ describe('replayer', function (this: ISuite) {
events.filter((e) => e.timestamp - events[0].timestamp >= 1500).length, events.filter((e) => e.timestamp - events[0].timestamp >= 1500).length,
); );
}); });
it('can resume at any time offset', async () => {
const actionLength = await this.page.evaluate(`
const { Replayer } = rrweb;
const replayer = new Replayer(events);
replayer.play(1500);
replayer.pause();
replayer.resume(1500);
replayer['timer']['actions'].length;
`);
expect(actionLength).to.equal(
events.filter((e) => e.timestamp - events[0].timestamp >= 1500).length,
);
});
}); });