remove the internal use of resume API

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

View File

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

View File

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

View File

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

View File

@@ -85,18 +85,4 @@ describe('replayer', function (this: ISuite) {
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,
);
});
});