Skip to content

Disable onAddHoverClass and duplicate full snapshot #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Apr 7, 2021
Merged

Disable onAddHoverClass and duplicate full snapshot #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
710194c
Don't rebuild full snapshot
Apr 7, 2021
cc84180
Add config for hover class
Apr 7, 2021
324217b
Merge branch 'master' into john/hig-334-add-config-to-toggle-addhover…
Apr 7, 2021
e305d00
Revert "Update rrweb (#35)"
Apr 7, 2021
63b4fbf
Bump version
Apr 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,3 @@ es
lib

temp

*.log
8 changes: 1 addition & 7 deletions .npmignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1 @@
.vscode
.idea
node_modules
package-lock.json
yarn.lock
temp
*.log
!**/node_modules
2 changes: 0 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@

# rrweb

**[We are hiring!(in mainland China)](https://mp.weixin.qq.com/s/VhFwemIzaXec-hI3zyltfg)**

**[The new adventure of the rrweb community](http://www.myriptide.com/rrweb-community/)**

[![Build Status](https://travis-ci.org/rrweb-io/rrweb.svg?branch=master)](https://travis-ci.org/rrweb-io/rrweb)
Expand Down
2 changes: 0 additions & 2 deletions README.zh_CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@

# rrweb

**[招聘：和我们一起，做难的事情!](https://mp.weixin.qq.com/s/VhFwemIzaXec-hI3zyltfg)**

**[rrweb 社区新的征程](http://www.myriptide.com/rrweb-community-cn/)**

[![Build Status](https://travis-ci.org/rrweb-io/rrweb.svg?branch=master)](https://travis-ci.org/rrweb-io/rrweb)
Expand Down
2 changes: 1 addition & 1 deletion docs/observer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ In the first case, two mutation records will be generated, namely adding node n1

Due to the second case, when processing new nodes we must traverse all its descendants to ensure that all new nodes are recorded, however this strategy will cause n2 to be (incorrectly) recorded during the first record. Then, when processing the second record, adding a the node for a second time will result in a DOM structure that is inconsistent with the original page during replay.

Therefore, when dealing with multiple mutation records in a callback, we need to "lazily" process the newly-added nodes, that is, first collect all raw, unprocessed nodes when we go through each mutation record, and then after we've been through all the mutation records we determine the order in which the nodes were added to the DOM. When these new nodes are added, we perform deduplication to ensure that each node is only recorded once and we check no nodes were missed.
Therefore, when dealing with multiple mutation records in a callback, we need to "lazily" process the newly-added nodes, that is, first collect all raw, unprocessed nodes when we go through each mutation record, and then after we've been through all the mutation records we determine the the order nodes were added to the DOM. When new these nodes are added we perform deduplication to ensure that each node is only recorded once and we check no nodes were missed.

We already introduced in the [serialization design document](./serialization.md) that we need to maintain a mapping of `id -> Node`, so when new nodes appear, we need to serialize the new nodes and add them to the map. But since we want to perform deduplication, and thus only serialize after all the mutation records have been processed, some problems may arise, as demonstrated in the following example:

Expand Down
6 changes: 3 additions & 3 deletions docs/recipes/customize-replayer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,17 +53,17 @@ And there are some ways to listen rrweb-player's state:
```js
// get current timing
rrwebPlayer.addEventListener('ui-update-current-time', (event) => {
console.log(event.payload);
console.log(event.detail.payload);
});

// get current state
rrwebPlayer.addEventListener('ui-update-player-state', (event) => {
console.log(event.payload);
console.log(event.detail.payload);
});

// get current progress
rrwebPlayer.addEventListener('ui-update-progress', (event) => {
console.log(event.payload);
console.log(event.detail.payload);
});
```

Expand Down
6 changes: 3 additions & 3 deletions docs/recipes/customize-replayer.zh_CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,17 +53,17 @@ rrwebPlayer.goto(3000);
```js
// 当前播放时间
rrwebPlayer.addEventListener('ui-update-current-time', (event) => {
console.log(event.payload);
console.log(event.detail.payload);
});

// 当前播放状态
rrwebPlayer.addEventListener('ui-update-player-state', (event) => {
console.log(event.payload);
console.log(event.detail.payload);
});

// 当前播放进度
rrwebPlayer.addEventListener('ui-update-progress', (event) => {
console.log(event.payload);
console.log(event.detail.payload);
});
```

Expand Down
13 changes: 5 additions & 8 deletions guide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Guide

[中文指南](./guide.zh_CN.md)
[中文指南](./guide.md)

> You may also want to read the [recipes](./docs/recipes/index.md) to find some use real-world use case, or read the [design docs](./docs) to know more technical details of rrweb.

Expand Down Expand Up @@ -142,11 +142,8 @@ The parameter of `rrweb.record` accepts the following options.
| checkoutEveryNms | - | take a full snapshot after every N ms<br />refer to the [checkout](#checkout) chapter |
| blockClass | 'rr-block' | Use a string or RegExp to configure which elements should be blocked, refer to the [privacy](#privacy) chapter |
| ignoreClass | 'rr-ignore' | Use a string or RegExp to configure which elements should be ignored, refer to the [privacy](#privacy) chapter |
| blockSelector | null | Use a string or RegExp to configure which selector should be blocked, refer to the [privacy](#privacy) chapter |
| maskAllInputs | false | mask all input content as \* |
| maskInputOptions | {} | mask some kinds of input \*<br />refer to the [list](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L72) |
| maskInputFn | - | customize mask input content recording logic |
| slimDOMOptions | {} | remove unnecessary parts of the DOM <br />refer to the [list](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L91) |
| inlineStylesheet | true | whether to inline the stylesheet in the events |
| hooks | {} | hooks for events<br />refer to the [list](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207) |
| packFn | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
Expand Down Expand Up @@ -290,7 +287,7 @@ The replayer accepts options as its constructor's second parameter, and it has t
| showDebug | false | whether to print debug messages during replay |
| blockClass | 'rr-block' | element with the class name will display as a blocked area |
| liveMode | false | whether to enable live mode |
| insertStyleRules | [] | accepts multiple CSS rule string, which will be injected into the replay iframe |
| inertStyleRules | [] | accepts multiple CSS rule string, which will be injected into the replay iframe |
| triggerFocus | true | whether to trigger focus during replay |
| UNSAFE_replayCanvas | false | whether to replay the canvas element. **Enable this will remove the sandbox, which is unsafe.** |
| mouseTail | true | whether to show mouse tail during replay. Set to false to disable mouse tail. A complete config can be found in this [type](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) |
Expand Down Expand Up @@ -378,9 +375,9 @@ And there are three rrweb-replayer event will be emitted in the same way:

| Event | Description | Value |
| ---------------------- | -------------------------------- | ----------------------- |
| ui-update-current-time | current time has changed | { payload } |
| ui-update-player-state | current player state has changed | { payload } |
| ui-update-progress | current progress has changed | { payload } |
| ui-update-current-time | current time has changed | { detail: { payload } } |
| ui-update-player-state | current player state has changed | { detail: { payload } } |
| ui-update-progress | current progress has changed | { detail: { payload } } |

## REPL tool

Expand Down
15 changes: 6 additions & 9 deletions guide.zh_CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,19 +137,16 @@ setInterval(save, 10 * 1000);
| checkoutEveryNth | - | 每 N 次事件重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节 |
| checkoutEveryNms | - | 每 N 毫秒重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节 |
| blockClass | 'rr-block' | 字符串或正则表达式，可用于自定义屏蔽元素的类名，详见[“隐私”](#隐私)章节 |
| blockSelector | null | 字符串或正则表达式，可用于自定义屏蔽元素的选择器，详见[“隐私”](#隐私)章节 |
| ignoreClass | 'rr-ignore' | 字符串或正则表达式，可用于自定义忽略元素的类名，详见[“隐私”](#隐私)章节 |
| maskAllInputs | false | 将所有输入内容记录为 \* |
| maskInputOptions | {} | 选择将特定类型的输入框内容记录为 \*<br />类型详见[列表](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L72) |
| maskInputFn | - | 自定义特定类型的输入框内容记录逻辑 |
| slimDOMOptions | {} | 去除 DOM 中不必要的部分 <br />类型详见[列表](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L91) |
| inlineStylesheet | true | 是否将样式表内联 |
| hooks | {} | 各类事件的回调<br />类型详见[列表](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207) |
| packFn | - | 数据压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
| sampling | - | 数据抽样策略，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
| recordCanvas | false | 是否记录 canvas 内容 |
| collectFonts | false | 是否记录页面中的字体文件 |
| recordLog | false | 是否记录 console 输出，详见[console 录制和播放](./docs/recipes/console.zh_CN.md) |
| recordLog | false | 是否记录console 输出，详见[console录制和播放](./docs/recipes/console.zh_CN.md) |

#### 隐私

Expand Down Expand Up @@ -286,12 +283,12 @@ replayer.pause(5000);
| showDebug | false | 是否在回放过程中打印 debug 信息 |
| blockClass | 'rr-block' | 需要在回放时展示为隐藏区域的元素类名 |
| liveMode | false | 是否开启直播模式 |
| insertStyleRules | [] | 可以传入多个 CSS rule string，用于自定义回放时 iframe 内的样式 |
| inertStyleRules | [] | 可以传入多个 CSS rule string，用于自定义回放时 iframe 内的样式 |
| triggerFocus | true | 回放时是否回放 focus 交互 |
| UNSAFE_replayCanvas | false | 回放时是否回放 canvas 内容，**开启后将会关闭沙盒策略，导致一定风险** |
| mouseTail | true | 是否在回放时增加鼠标轨迹。传入 false 可关闭，传入对象可以定制轨迹持续时间、样式等，配置详见[类型](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) |
| unpackFn | - | 数据解压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md) |
| logConfig | - | console logger 数据播放设置，详见[console 录制和播放](./docs/recipes/console.zh_CN.md) |
| logConfig | - | console logger数据播放设置，详见[console录制和播放](./docs/recipes/console.zh_CN.md) |

#### 使用 rrweb-player

Expand Down Expand Up @@ -376,9 +373,9 @@ replayer.on(EVENT_NAME, (payload) => {

| 事件类型 | 描述 | 值 |
| ---------------------- | -------------- | ----------------------- |
| ui-update-current-time | 当前回放时间点 | { payload } |
| ui-update-player-state | 当前回放状态 | { payload } |
| ui-update-progress | 当前回放百分比 | { payload } |
| ui-update-current-time | 当前回放时间点 | { detail: { payload } } |
| ui-update-player-state | 当前回放状态 | { detail: { payload } } |
| ui-update-progress | 当前回放百分比 | { detail: { payload } } |

## REPL 工具

Expand Down
4 changes: 1 addition & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@highlight-run/rrweb",
"version": "0.10.5",
"version": "0.10.6",
"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",
Expand Down Expand Up @@ -44,13 +44,11 @@
"jest-snapshot": "^23.6.0",
"mini-css-extract-plugin": "^1.3.8",
"mocha": "^5.2.0",
"prettier": "2.2.1",
"puppeteer": "^1.11.0",
"rollup": "^2.3.3",
"rollup-plugin-commonjs": "^9.2.0",
"rollup-plugin-node-resolve": "^3.4.0",
"rollup-plugin-postcss": "^3.1.1",
"rollup-plugin-rename-node-modules": "^1.1.0",
"rollup-plugin-terser": "^5.3.0",
"rollup-plugin-typescript": "^1.0.0",
"style-loader": "^2.0.0",
Expand Down
2 changes: 0 additions & 2 deletions rollup.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import typescript from 'rollup-plugin-typescript';
import resolve from 'rollup-plugin-node-resolve';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';
import renameNodeModules from 'rollup-plugin-rename-node-modules';
import pkg from './package.json';

function toRecordPath(path) {
Expand Down Expand Up @@ -138,7 +137,6 @@ for (const c of baseConfigs) {
{
format: 'esm',
dir: 'es/rrweb',
plugins: [renameNodeModules('ext')],
},
],
});
Expand Down
8 changes: 2 additions & 6 deletions scripts/repl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,11 +81,7 @@ function getCode(): string {
width: 1600,
height: 900,
},
args: [
'--start-maximized',
'--ignore-certificate-errors',
'--no-sandbox',
],
args: ['--start-maximized', '--ignore-certificate-errors'],
});
const page = await browser.newPage();
await page.goto(url, {
Expand Down Expand Up @@ -132,7 +128,7 @@ function getCode(): string {
width: 1600,
height: 900,
},
args: ['--start-maximized', '--no-sandbox'],
args: ['--start-maximized'],
});
const page = await browser.newPage();
await page.goto('about:blank');
Expand Down
1 change: 1 addition & 0 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export {
IncrementalSource,
MouseInteractions,
ReplayerEvents,
HighlightConfiguration,
} from './types';

const { addCustomEvent } = record;
Expand Down
37 changes: 0 additions & 37 deletions src/record/iframe-manager.ts
View file
Open in desktop

This file was deleted.

Loading