remove the internal use of resume API
This commit is contained in:
8
guide.md
8
guide.md
@@ -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 = {
|
||||
|
||||
@@ -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 = {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user