From efa01a811dc1b6e8885e588f2e1cb5249b725d2e Mon Sep 17 00:00:00 2001 From: luocq3 Date: Thu, 8 Sep 2022 09:15:15 +0800 Subject: [PATCH 1/4] fix: iframe input hook (#990) --- packages/rrweb/src/record/observer.ts | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts index 5322df3cd2..2ba0dd15a4 100644 --- a/packages/rrweb/src/record/observer.ts +++ b/packages/rrweb/src/record/observer.ts @@ -428,18 +428,25 @@ function initInputObserver({ const handlers: Array< listenerHandler | hookResetter > = events.map((eventName) => on(eventName, eventHandler, doc)); - const propertyDescriptor = Object.getOwnPropertyDescriptor( - HTMLInputElement.prototype, + + const currentWindow = doc.defaultView; + if(!currentWindow) { + return () => { + handlers.forEach((h) => h()); + }; + } + const propertyDescriptor = currentWindow.Object.getOwnPropertyDescriptor( + currentWindow.HTMLInputElement.prototype, 'value', ); const hookProperties: Array<[HTMLElement, string]> = [ - [HTMLInputElement.prototype, 'value'], - [HTMLInputElement.prototype, 'checked'], - [HTMLSelectElement.prototype, 'value'], - [HTMLTextAreaElement.prototype, 'value'], + [currentWindow.HTMLInputElement.prototype, 'value'], + [currentWindow.HTMLInputElement.prototype, 'checked'], + [currentWindow.HTMLSelectElement.prototype, 'value'], + [currentWindow.HTMLTextAreaElement.prototype, 'value'], // Some UI library use selectedIndex to set select value - [HTMLSelectElement.prototype, 'selectedIndex'], - [HTMLOptionElement.prototype, 'selected'], + [currentWindow.HTMLSelectElement.prototype, 'selectedIndex'], + [currentWindow.HTMLOptionElement.prototype, 'selected'], ]; if (propertyDescriptor && propertyDescriptor.set) { handlers.push( @@ -449,7 +456,7 @@ function initInputObserver({ // mock to a normal event eventHandler({ target: this as EventTarget } as Event); }, - }), + }, false, currentWindow), ), ); } From d1f97dfb32d7714971747b94ad85f66c5eecf1de Mon Sep 17 00:00:00 2001 From: luocongqiu Date: Thu, 8 Sep 2022 15:27:34 +0800 Subject: [PATCH 2/4] Update observer.ts --- packages/rrweb/src/record/observer.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts index 2ba0dd15a4..8cc114ba50 100644 --- a/packages/rrweb/src/record/observer.ts +++ b/packages/rrweb/src/record/observer.ts @@ -428,9 +428,8 @@ function initInputObserver({ const handlers: Array< listenerHandler | hookResetter > = events.map((eventName) => on(eventName, eventHandler, doc)); - const currentWindow = doc.defaultView; - if(!currentWindow) { + if (!currentWindow) { return () => { handlers.forEach((h) => h()); }; From 1ac63f8e86724f481793c0f4be6f8a0a14d11223 Mon Sep 17 00:00:00 2001 From: luocq3 Date: Fri, 9 Sep 2022 08:55:58 +0800 Subject: [PATCH 3/4] format code with prettier --- packages/rrweb/src/record/observer.ts | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts index 8cc114ba50..b11f2e2405 100644 --- a/packages/rrweb/src/record/observer.ts +++ b/packages/rrweb/src/record/observer.ts @@ -450,12 +450,18 @@ function initInputObserver({ if (propertyDescriptor && propertyDescriptor.set) { handlers.push( ...hookProperties.map((p) => - hookSetter(p[0], p[1], { - set() { - // mock to a normal event - eventHandler({ target: this as EventTarget } as Event); + hookSetter( + p[0], + p[1], + { + set() { + // mock to a normal event + eventHandler({ target: this as EventTarget } as Event); + }, }, - }, false, currentWindow), + false, + currentWindow, + ), ), ); } @@ -691,7 +697,10 @@ function initMediaInteractionObserver({ const handler = (type: MediaInteractions) => throttle((event: Event) => { const target = getEventTarget(event); - if (!target || isBlocked(target as Node, blockClass, blockSelector, true)) { + if ( + !target || + isBlocked(target as Node, blockClass, blockSelector, true) + ) { return; } const { currentTime, volume, muted } = target as HTMLMediaElement; From e42d0086c592a752af80ae232e1a6438f2712ae3 Mon Sep 17 00:00:00 2001 From: luocq3 Date: Fri, 9 Sep 2022 08:59:25 +0800 Subject: [PATCH 4/4] format all code with prettier --- CODE_OF_CONDUCT.md | 22 ++++++++-------- CONTRIBUTING.md | 6 +++++ docs/observer.zh_CN.md | 6 ++--- docs/recipes/record-and-replay.zh_CN.md | 7 +++-- docs/replay.md | 5 ++++ docs/sandbox.md | 3 +++ docs/sandbox.zh_CN.md | 2 +- docs/serialization.md | 16 +++++++----- docs/serialization.zh_CN.md | 16 +++++------- guide.md | 2 +- packages/rrweb-player/README.md | 8 +++--- packages/rrweb/src/record/mutation.ts | 3 ++- .../record/observers/canvas/canvas-manager.ts | 26 ++++++++++++++----- packages/rrweb/src/types.ts | 4 +-- packages/rrweb/src/utils.ts | 2 +- packages/rrweb/test/events/ordering.ts | 4 +-- packages/rrweb/test/integration.test.ts | 2 +- 17 files changed, 80 insertions(+), 54 deletions(-) diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 4e4b2926a2..eddf527f60 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -17,23 +17,23 @@ diverse, inclusive, and healthy community. Examples of behavior that contributes to a positive environment for our community include: -* Demonstrating empathy and kindness toward other people -* Being respectful of differing opinions, viewpoints, and experiences -* Giving and gracefully accepting constructive feedback -* Accepting responsibility and apologizing to those affected by our mistakes, +- Demonstrating empathy and kindness toward other people +- Being respectful of differing opinions, viewpoints, and experiences +- Giving and gracefully accepting constructive feedback +- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience -* Focusing on what is best not just for us as individuals, but for the +- Focusing on what is best not just for us as individuals, but for the overall community Examples of unacceptable behavior include: -* The use of sexualized language or imagery, and sexual attention or +- The use of sexualized language or imagery, and sexual attention or advances of any kind -* Trolling, insulting or derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or email +- Trolling, insulting or derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or email address, without their explicit permission -* Other conduct which could reasonably be considered inappropriate in a +- Other conduct which could reasonably be considered inappropriate in a professional setting ## Enforcement Responsibilities @@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban. ### 4. Permanent Ban **Community Impact**: Demonstrating a pattern of violation of community -standards, including sustained inappropriate behavior, harassment of an +standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. **Consequence**: A permanent ban from any sort of public interaction within diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 5ae2f1e1d0..e7a0df1668 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,17 @@ # Contributing to rrweb + We want to make contributing to this project as easy and transparent as possible. ## Our Development Process + The majority of development on rrweb will occur through GitHub. Accordingly, the process for contributing will follow standard GitHub protocol. ## Pull Requests + We actively welcome your pull requests. + 1. Fork the repo and create your branch from `master`. 2. If you've added code that should be tested, add tests 3. If you've changed APIs, update the documentation. @@ -15,10 +19,12 @@ We actively welcome your pull requests. 5. Make sure your code lints and typechecks. ## Issues + We use GitHub issues to track public bugs. Please ensure your description is clear and has sufficient instructions to be able to reproduce the issue. ## License + rrweb is [MIT licensed](https://github.com/rrweb-io/rrweb/blob/master/LICENSE). By contributing to rrweb, you agree that your contributions will be licensed diff --git a/docs/observer.zh_CN.md b/docs/observer.zh_CN.md index baaa123c6b..9da4a40d6a 100644 --- a/docs/observer.zh_CN.md +++ b/docs/observer.zh_CN.md @@ -57,8 +57,8 @@ body 在[序列化设计](./serialization.zh_CN.md)中已经介绍了我们需要维护一个 `id -> Node` 的映射，因此当出现新增节点时，我们需要将新节点序列化并加入映射中。但由于我们为了去重新增节点，选择在所有 mutation 记录遍历完毕之后才进行序列化，在以下示例中就会出现问题： -1. mutation 记录1，新增节点 n1。我们暂不处理，等待最终去重后序列化。 -2. mutation 记录2，n1 新增属性 a1。我们试图将它记录成一次增量快照，但会发现无法从映射中找到 n1 对应的 id，因为此时它还未被序列化。 +1. mutation 记录 1，新增节点 n1。我们暂不处理，等待最终去重后序列化。 +2. mutation 记录 2，n1 新增属性 a1。我们试图将它记录成一次增量快照，但会发现无法从映射中找到 n1 对应的 id，因为此时它还未被序列化。 由此可见，由于我们对新增节点进行了延迟序列化的处理，所有 mutation 记录也都需要先收集，再新增节点去重并序列化之后再做处理。 @@ -119,4 +119,4 @@ function hookSetter( } ``` -注意为了避免我们在 setter 中的逻辑阻塞被录制页面的正常交互，我们应该把逻辑放入 event loop 中异步执行。 \ No newline at end of file +注意为了避免我们在 setter 中的逻辑阻塞被录制页面的正常交互，我们应该把逻辑放入 event loop 中异步执行。 diff --git a/docs/recipes/record-and-replay.zh_CN.md b/docs/recipes/record-and-replay.zh_CN.md index 0c103fc1ec..6661cffba3 100644 --- a/docs/recipes/record-and-replay.zh_CN.md +++ b/docs/recipes/record-and-replay.zh_CN.md @@ -8,8 +8,8 @@ const stopFn = rrweb.record({ emit(event) { // 保存获取到的 event 数据 - } -}) + }, +}); ``` 你可以使用任何方式保存录制的数据，例如通过网络请求将数据传入至后端持久化保存，但请确保： @@ -22,9 +22,8 @@ const stopFn = rrweb.record({ 回放时只需要获取一段录制数据，并传入 rrweb 提供的 Replayer： ```js -const events = GET_YOUR_EVENTS +const events = GET_YOUR_EVENTS; const replayer = new rrweb.Replayer(events); replayer.play(); ``` - diff --git a/docs/replay.md b/docs/replay.md index 9c200491ca..662935046e 100644 --- a/docs/replay.md +++ b/docs/replay.md @@ -1,7 +1,9 @@ # Replay + A design principle of rrweb is to process as little as possible on the recording side, minimizing the impact on the recorded page. This means we need to do some special processing on the replay side. ## High precision timer + During replay, we will get the complete snapshot chain at one time. If all the snapshots are executed in sequence, we can directly get the last state of the recorded page, but what we need is to synchronously initialize the first full snapshot, and then apply the remaining incremental snapshots asynchronously. Using a time interval we replay each incremental snapshot one after the other, which requires a high-precision timer. The reason why **high precision** is emphasized is because the native `setTimeout` does not guarantee accurate execution after the set delay time, for example, when the main thread is blocked. @@ -11,6 +13,7 @@ For our replay function, this imprecise delay is unacceptable and can lead to va At the same time, the custom timer is also the basis for our "fast forward" function. ## Completing missing nodes + The delay serialization strategy when rrweb uses MutationObserver is mentioned in the [incremental snapshot design](./observer.md), which may result in the following scenarios where we cannot record a full incremental snapshot: ``` @@ -29,6 +32,7 @@ During replay, when we process the incremental snapshot of the new `foo`, we kno After processing the incremental snapshot of the new n1, we normally process and insert `bar`. After the replay is completed, we check whether the neighbor node id of `foo` points to a node which is in the missing node pool. If it matches, then it will be removed from the pool and be inserted into the DOM tree. ## Simulation Hover + CSS styles for the `:hover` selector are present in many web pages, but we can't trigger the hover state via JavaScript. So when playing back we need to simulate the hover state to make the style display correctly. The specific method includes two parts: @@ -37,6 +41,7 @@ The specific method includes two parts: 2. When playing back the mouse up mouse interaction event, add the `.:hover` class name to the event target and all its ancestors, and remove it when the mouse moves away again. ## Play from any point in time + In addition to the basic replay features, we also want players like `rrweb-player` to provide similar functionality to video players, such as dragging and dropping to the progress bar to any point in time. In actual implementation, we pass a start time to the method. We can then divide the snapshot chain into two parts: The parts before and the part after the start time. Then, the snapshot chain before the start time is executed synchronously, and then the snapshot chain after the starting times uses the normal asynchronous execution. This way we can achieve starting replay from any point in time. diff --git a/docs/sandbox.md b/docs/sandbox.md index de9b0dbd94..4e7f396d44 100644 --- a/docs/sandbox.md +++ b/docs/sandbox.md @@ -5,6 +5,7 @@ In the [serialization design](./serialization.md) we mentioned the "de-scripting There are many kinds of scripting behaviors. A filtering approach to getting rid of these scripts will never be a complete solution, and once a script slips through and is executed, it may cause irreversible unintended consequences. So we use the iframe sandbox feature provided by HTML for browser-level restrictions. ## iframe sandbox + We reconstruct the recorded DOM in an `iframe` element when we rebuild the snapshot. By setting its `sandbox` attribute, we can disable the following behavior: - Form submission @@ -14,6 +15,7 @@ We reconstruct the recorded DOM in an `iframe` element when we rebuild the snaps This is in line with our expectations, especially when dealing with JS scripts is safer and more reliable than implementing this security ourselves. ## Avoid link jumps + When you click the a element link, the default event is to jump to the URL corresponding to its href attribute. During replay, we will ensure visually correct replay by rebuilding the page DOM after the jump, and the original jump should be prohibited. Usually we will capture all an elements click events through the event handler proxy and disable the default event via `event.preventDefault()`. But when we put the replay page in the sandbox, all the event handlers will not be executed, and we will not be able to implement the event delegation. @@ -21,6 +23,7 @@ Usually we will capture all an elements click events through the event handler p When replaying interactive events, note that replaying the JS `click` event is not nessecary because click events do not have any impact when JS is disabled. However, in order to optimize the replay effect, we can add special animation effects to visualize elements being clicked with the mouse, to clearly show the viewer that a click has occurred. ## iframe style settings + Since we're rebuilding the DOM in an iframe, we can't affect the elements in the iframe through the CSS stylesheet of the parent page. But if JS scripts are not allowed to execute, the `noscript` tag will be displayed, and we want to hide it. So we need to dynamically add styles to the iframe. The sample code is as follows: ```typescript diff --git a/docs/sandbox.zh_CN.md b/docs/sandbox.zh_CN.md index 32f847b39d..57ba2e614b 100644 --- a/docs/sandbox.zh_CN.md +++ b/docs/sandbox.zh_CN.md @@ -42,4 +42,4 @@ for (let idx = 0; idx < injectStyleRules.length; idx++) { } ``` -需要注意的是这个插入的 style 元素在被录制页面中并不存在，所以我们不能将其序列化，否则 `id -> Node` 的映射将出现错误。 \ No newline at end of file +需要注意的是这个插入的 style 元素在被录制页面中并不存在，所以我们不能将其序列化，否则 `id -> Node` 的映射将出现错误。 diff --git a/docs/serialization.md b/docs/serialization.md index c34feee64e..a231e8e96b 100644 --- a/docs/serialization.md +++ b/docs/serialization.md @@ -1,4 +1,5 @@ # Serialization + If you only need to record and replay changes within the browser locally, then we can simply save the current view by deep copying the DOM object. For example, the following code implementation (simplified example with jQuery, saves only the body part): ```javascript @@ -18,6 +19,7 @@ We do not use an existing open source solutions such as [parse5](https://github. 2. This part of the code needs to run on the recorded page, and we want to control the amount of code as much as possible, only retaining the necessary functions. ## Special handling in serialization + The reason why our serialization method is non-standard is because we still need to do the following parts: 1. Output needs to be descriptive. All JavaScript in the original recorded page should not be executed on replay. In rrweb we do this by replacing `script` tags with placeholder `noscript` tags in snapshots. The content inside the script is no longer important. We instead record any changes to the DOM that scripts cause, and we ​​do not need to fully record large amounts of script content that may be present on the original web page. @@ -26,6 +28,7 @@ The reason why our serialization method is non-standard is because we still need 4. We want to record the contents of the CSS style sheet. If the recorded page links to external style sheets, we can get its parsed CSS rules from the browser, generate an inline style sheet containing all these rules. This way stylesheets that are not always accessible (for example, because they are located on an intranet or localhost) are included in the recording and can be replayed correctly. ## Uniquely identifies + At the same time, our serialization should also include both full and incremental types. Full serialization can transform a DOM tree into a corresponding tree data structure. For example, the following DOM tree: @@ -33,8 +36,7 @@ For example, the following DOM tree: ```html -
-
+
``` @@ -100,10 +102,10 @@ Imagine if we recorded the click of a button on the same page and played it back ```javascript type clickSnapshot = { - source: 'MouseInteraction'; - type: 'Click'; - node: HTMLButtonElement; -} + source: 'MouseInteraction', + type: 'Click', + node: HTMLButtonElement, +}; ``` The operation can be executed again by `snapshot.node.click()`. @@ -119,5 +121,5 @@ type clickSnapshot = { source: 'MouseInteraction'; type: 'Click'; id: Number; -} +}; ``` diff --git a/docs/serialization.zh_CN.md b/docs/serialization.zh_CN.md index 76d029d22f..5ffa94cc51 100644 --- a/docs/serialization.zh_CN.md +++ b/docs/serialization.zh_CN.md @@ -22,7 +22,7 @@ $('body').replaceWith(snapshot); 1. 去脚本化。被录制页面中的所有 JavaScript 都不应该被执行，例如我们会在重建快照时将 `script` 标签改为 `noscript` 标签，此时 script 内部的内容就不再重要，录制时可以简单记录一个标记值而不需要将可能存在的大量脚本内容全部记录。 2. 记录没有反映在 HTML 中的视图状态。例如 `` 输入后的值不会反映在其 HTML 中，而是通过 `value` 属性记录，我们在序列化时就需要读出该值并且以属性的形式回放成 ``。 -3. 相对路径转换为绝对路径。回放时我们会将被录制的页面放置在一个 `