Commit Graph

84 Commits

Author SHA1 Message Date
Yun Feng
1935bf606f console plugin fix (#832)
* fix: empty payload in console-plugin

* update unit test
2022-02-10 11:30:58 +08:00
Alex Dehe Ng
69acc73136 close all pages to avoid EPERM error on Windows 10 (#830) 2022-02-08 23:07:18 +08:00
Yun Feng
d192b405ea fix: an error when I stop the recording process (#828)
canvas-manager.ts:35 Uncaught TypeError: this.resetObservers is not a function
2022-02-08 22:49:26 +08:00
yz-yu
c5b4096293 refactoring observer options (#826) 2022-02-05 14:35:33 +08:00
Cristi Constantin
ef0e3317e2 Fix inline image issues (#822)
* Fix inline image issues

* Fixed img srcset

Reverted image crossOrigin change

* Tweak rebuilding img srcset
2022-02-04 14:50:27 +08:00
Justin Halsall
38ff3d8f63 Only record canvas when specified (#825)
* Add very basic webgl support

* document the default

* only capture rr_dataURL in 2d canvas contexts

* rr_dataURL no longer part of webgl snapshot

* ignore __diff_output__ from jest-image-snapshot

* Rename generic "Monorepo" to "RRWeb Monorepo"

* Serialize WebGL variables

* Move rrweb test port number to unique port

rrweb-snapshot uses 3030, rrweb uses 3031

* Prepare for WebGL2

* Split up canvas replay and record webgl vars

* fix typo

* fix typo part 2

* fix typo

* Handle non-variables too

* provide correct context for warning

* (De)Serialize a lot of different objects

* monorepo root should be the first in the list

* Upgrade puppeteer to 11.x

* Correctly de-serialize webgl variables

* Encode arrayBuffers contents to base64

* rename contents to base64

* add webgl2 support and serialize HTMLImageElements

* Support serializing ImageData

* Correctly classify WebGL2 events

* Serialize format changed

* check if canvas has contents before we save the dataURL

* Remove blank dataURL

* reference original file not type defintion file

* update types

* rename code worspace

* update dependencies

* add spector to inspect webgl

* remove live server settings from code workspace

* Save canvas context in the node

Prevents from saving webgl canvases as 2d dataUrls

* remove extra braces

* add ICanvas type

* use ICanvas from rrweb-snapshot in rrweb instead of OgmentedCanvas

* add snapshots and webgl 2 tests

* Upgrade to puppeteer 12.0.1

* Revert back to puppeteer 9.1.1

* Keep index order consistent between replay and record

* keep correct index order in webgl2

* fixed forgotten import

* buffer up pending canvas mutations

* unify the way webgl and webgl2 get patched

* fix parsing error

* Add types for serialize-args

* Add debugging for webgl replay

* Move start-server to utils

* turn off debug mode by default

* Move pendingCanvasMutations to local object and fix if/else statement

* Always save pending mutations

* only use assert snapshot as it's clearer whats going on

* Ugly fix for now

* Making the tests more DRY

* flush at the end of each request animation frame

* Looks like the promise made this test more predictable

* add waitForRAF

* Make nested iframe recording robust no matter the test speed

* mute noisy error in test

* force a requestAnimationFrame

* Bundle events within one frame together as much as possible

WebGL events need to be bundled together as much as possible so they don't accidentally get split over multiple animation frames.

 `newFrame: true` is used to indicate the start of an new animation frame in the recording, and that the event shouldn't be bundled with the previous events.

* Rename RafStamps

* Override event.delay

* cleanup

* Add tests for addDelay

* Add webgl e2e test

* Remove settimeout

* DRY-up test

* Preload images in webgl

* Add e2e test for webgl image preloading

* don't turn on devtools by default!

* Remove spector

* close server after use

* Add imageMap parameter

* Make e2e image test more robust

* document debug mode

* cleanup

* WebGL recording in iframes & Safari 14 support

* fix tests

* don't save null objects as WebGLVar

* group (de)serialized webgl variables by context

* Fix test

* fix tests

* bundle webgl mutations on request animation frame

Instead of fixing it on the replay side we buffer up webgl canvas mutations and wait for a new RAF to flush them. This allows us to remove `newFrame` from the events and simplify things a little

* Add canvas element to mutation observer file

* Add Canvas (Mutation) Manager

Allows you to do `record.freezePage()` and canvas events will get paused.

Based on https://github.com/rrweb-io/rrweb/pull/756#issuecomment-1007566907

* cleanup

* Make sure the correct </body> gets replaced

* Perf: Speed up check to see if canvas is blank

* Access unpatched getImageData

* Use is2DCanvasBlank only for 2d context

* Only record canvas when recordCanvas is true
2022-02-03 22:21:37 +08:00
yz-yu
14ea6362ba impl sequential id plugins (#819)
Also introduce a new kind of plugin: event processor
2022-02-03 20:00:47 +08:00
Justin Halsall
ab9fed0c7e Add WebGL support (#756)
* Add very basic webgl support

* document the default

* only capture rr_dataURL in 2d canvas contexts

* rr_dataURL no longer part of webgl snapshot

* ignore __diff_output__ from jest-image-snapshot

* Rename generic "Monorepo" to "RRWeb Monorepo"

* Serialize WebGL variables

* Move rrweb test port number to unique port

rrweb-snapshot uses 3030, rrweb uses 3031

* Prepare for WebGL2

* Split up canvas replay and record webgl vars

* fix typo

* fix typo part 2

* fix typo

* Handle non-variables too

* provide correct context for warning

* (De)Serialize a lot of different objects

* monorepo root should be the first in the list

* Upgrade puppeteer to 11.x

* Correctly de-serialize webgl variables

* Encode arrayBuffers contents to base64

* rename contents to base64

* add webgl2 support and serialize HTMLImageElements

* Support serializing ImageData

* Correctly classify WebGL2 events

* Serialize format changed

* check if canvas has contents before we save the dataURL

* Remove blank dataURL

* reference original file not type defintion file

* update types

* rename code worspace

* update dependencies

* add spector to inspect webgl

* remove live server settings from code workspace

* Save canvas context in the node

Prevents from saving webgl canvases as 2d dataUrls

* remove extra braces

* add ICanvas type

* use ICanvas from rrweb-snapshot in rrweb instead of OgmentedCanvas

* add snapshots and webgl 2 tests

* Upgrade to puppeteer 12.0.1

* Revert back to puppeteer 9.1.1

* Keep index order consistent between replay and record

* keep correct index order in webgl2

* fixed forgotten import

* buffer up pending canvas mutations

* unify the way webgl and webgl2 get patched

* fix parsing error

* Add types for serialize-args

* Add debugging for webgl replay

* Move start-server to utils

* turn off debug mode by default

* Move pendingCanvasMutations to local object and fix if/else statement

* Always save pending mutations

* only use assert snapshot as it's clearer whats going on

* Ugly fix for now

* Making the tests more DRY

* flush at the end of each request animation frame

* Looks like the promise made this test more predictable

* add waitForRAF

* Make nested iframe recording robust no matter the test speed

* mute noisy error in test

* force a requestAnimationFrame

* Bundle events within one frame together as much as possible

WebGL events need to be bundled together as much as possible so they don't accidentally get split over multiple animation frames.

 `newFrame: true` is used to indicate the start of an new animation frame in the recording, and that the event shouldn't be bundled with the previous events.

* Rename RafStamps

* Override event.delay

* cleanup

* Add tests for addDelay

* Add webgl e2e test

* Remove settimeout

* DRY-up test

* Preload images in webgl

* Add e2e test for webgl image preloading

* don't turn on devtools by default!

* Remove spector

* close server after use

* Add imageMap parameter

* Make e2e image test more robust

* document debug mode

* cleanup

* WebGL recording in iframes & Safari 14 support

* fix tests

* don't save null objects as WebGLVar

* group (de)serialized webgl variables by context

* Fix test

* fix tests

* bundle webgl mutations on request animation frame

Instead of fixing it on the replay side we buffer up webgl canvas mutations and wait for a new RAF to flush them. This allows us to remove `newFrame` from the events and simplify things a little

* Add canvas element to mutation observer file

* Add Canvas (Mutation) Manager

Allows you to do `record.freezePage()` and canvas events will get paused.

Based on https://github.com/rrweb-io/rrweb/pull/756#issuecomment-1007566907

* cleanup

* Make sure the correct </body> gets replaced

* Perf: Speed up check to see if canvas is blank

* Access unpatched getImageData

* Use is2DCanvasBlank only for 2d context
2022-02-03 19:58:23 +08:00
Yun Feng
5ec7d9e740 fix: custom style rules don't get inserted into some iframe elements (#823)
* fix: custom style rules don't get inserted into some iframe elements

* code style tweak
2022-02-03 19:58:01 +08:00
Yun Feng
c1111ed79d disable smooth scroll behavior in sync mode (#824) 2022-02-03 19:53:33 +08:00
Cristi Constantin
b0dc3885d9 Fixes and tweaks (#795)
* Implemented image restore from rr_dataURL

* Implement saving images in the snapshot

* Fixed image saving, added a test

* Rename data-src to data-rrweb-src

* Updated the guide

* Rename recordImages to inlineImages and try catch

* A fix, some tweaks and 2 new log warnings

* Handle CORS errors when reading CSS rules

* Fix after merge

* Improve try catch for the inline image

* PR comments tweaks

* Fix typescript lint

* Small tweaks

* Fix a log warning
2022-01-28 10:26:23 +08:00
Gabriel Stellini
a5d1215bd1 Update css-font-loading-module (#784)
Co-authored-by: Gabriel Stellini <gabriel.stellini@fusonic.net>
2022-01-27 22:55:38 +08:00
Yun Feng
156b760a33 feat: add observer for 'selected' setter of HTMLOptionElement and try to fix issue #746 (#810)
* feat: add observer for 'selected' setter of HTMLOptionElement and try to fix issue #746

* style: add description of mechanism
2022-01-26 13:54:39 +08:00
Yun Feng
0c27ad22b2 improve robustness of inlineImages feature (#812)
* fix: add inlineImages option to rrrweb recorder and try to make the code more robust

* Improve robustness
2022-01-25 09:56:57 +08:00
Yanzhen Yu
ca5ecba4eb chore(release): publish new version
- rrweb@1.1.1
 - rrweb-player@0.7.12
2022-01-24 23:44:16 +08:00
Yanzhen Yu
661c746b14 fix #811 expose inlineImages to record 2022-01-24 23:42:36 +08:00
Yanzhen Yu
e9ea287bc5 chore(release): publish new version
- rrdom@0.1.0
 - rrweb@1.1.0
 - rrweb-player@0.7.11
 - rrweb-snapshot@1.1.12
2022-01-23 15:53:54 +08:00
Yanzhen Yu
c788ba66e1 make sure emit EventCast after cast fn 2022-01-18 23:54:28 +08:00
Yanzhen Yu
fb8ea8e657 update plugin docs 2022-01-16 16:01:41 +08:00
yz-yu
a307c5c5bb impl #796 observe media volume change (#798) 2022-01-16 15:39:43 +08:00
Cristi Constantin
69a1b9ffe6 Save images offline, in the snapshot (#770)
* Implemented image restore from rr_dataURL

* Implement saving images in the snapshot

* Fixed image saving, added a test

* Rename data-src to data-rrweb-src

* Updated the guide

* Rename recordImages to inlineImages and try catch
2022-01-11 23:54:58 +08:00
Lucky Feng
320a454c49 rrdom (#613)
* create rrdom package

* test(rrdom): add unit tests for polyfill.ts

* fix(rrweb snapshot): type check errors

Errors are caused by the declaration similarity of @types/mocha and @types/jest if we install both of them in the whole project.

* Set tagNames to upper case by default

This mirrors the `Element.tagName` implementation:

```
For DOM trees which represent HTML documents, the returned tag name is always in the canonical upper-case form. For example, tagName called on a <div> element returns "DIV".
```
https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName

* Add workspace file

* VSCode settings for rrdom tests

* Add basic test for RRDocument

* Only setup jest tests for rrdom

* mock Node type and Event type for nodejs environment

* test(rrdom): add snapshot for document.test.ts

* fix issue of nwsapi import and add unit tests for rrdom

* fix: querySelectorAll returns nothing when querying elements with ids and classNames

* fix: error of unit test for Event polyfill

Since Event class is built in nodejs after v15.0.0

* add a dummy implementation of canvas

* add style element support

* add unit test for style element

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
2022-01-11 23:15:57 +08:00
Justin Halsall
588b3d6f62 Add option to spoof url in repl (#786)
Really helps when experiencing CORS issues or when loading images in webgl
2022-01-04 09:42:19 +08:00
Yanzhen Yu
5a0a1353c5 fix lint 2021-12-26 20:46:17 +08:00
Yanzhen Yu
bdbd204103 chore(release): publish new version
- rrweb@1.0.8
 - rrweb-player@0.7.10
 - rrweb-snapshot@1.1.11
2021-12-23 23:07:03 +08:00
champ
88d3ac152c fix #783 (#785) 2021-12-23 17:40:03 +08:00
Yanzhen Yu
28cdbe7745 ignore invalid error event 2021-12-22 21:25:58 +08:00
Yanzhen Yu
3a6ef74a17 update test snapshot 2021-12-22 21:20:09 +08:00
John Pham
0439967789 Fix animations on pseudo-elements not pausing when replayer is paused (#776) 2021-12-22 21:18:39 +08:00
Yanzhen Yu
a07a97cfb6 close #736 #773
trigger meta update after add events
2021-12-15 15:05:17 +08:00
Eoghan Murray
ac592dc537 Fix bug where style.opacity was incorrectly deleted when style.opacity was set to zero (#765)
- this had the effect of making things visible which should have been invisible
 - not sure what I was thinking with 'potentially non-standard browsers', maybe I thought I was covering return values from getPropertyValue of null or false. Could potentially add explicit tests for null or false, but as there is no evidence for these non-standard browsers, leaving as-is
2021-12-10 01:26:43 +08:00
Cristi Constantin
ce9e97ffd2 Small regex fix for older browsers (#762) 2021-12-02 19:39:53 +08:00
Lucky Feng
f75679015d rrweb: replace onerror with addEventListener('error',handler) in the rrweb console plugin (#761) 2021-11-30 13:18:57 +08:00
Yanzhen Yu
1f267082cb update test snapshots 2021-11-16 02:37:48 +08:00
Yanzhen Yu
7223e929a3 chore(release): publish new version
- rrweb@1.0.7
 - rrweb-player@0.7.9
 - rrweb-snapshot@1.1.10
2021-11-16 02:27:22 +08:00
Yanzhen Yu
a01c97f70d try to read style sheet content from JS API 2021-11-16 02:26:49 +08:00
Yanzhen Yu
5066806e61 fix bundle config 2021-11-16 02:17:19 +08:00
Yanzhen Yu
78526a3aae fix #698, replay scroll on iframe document 2021-11-07 14:39:43 +08:00
Yanzhen Yu
3d5b43890e close #745, keep textarea text node clean 2021-11-07 10:52:46 +08:00
Justin Halsall
a261f3d4de add root scripts and update contribution guide (#750) 2021-11-06 09:00:07 +08:00
Yanzhen Yu
18d66dca7c do not transform xlink:href when the value is an id
close #566, #741
2021-10-31 11:24:41 +08:00
Eoghan Murray
ad2ca9ee55 Don't throw away information about the iframe src (#733)
* Don't throw away information about the iframe src

* contentDocument is the important one as to whether we are recording an iframe directly
2021-10-26 00:04:44 +08:00
Omair Nabiel
e9405c560a fix: if handleProgressClick invoked after finished, start from where user clicked (#727) 2021-10-14 13:40:50 +08:00
Yanzhen Yu
cabd5eb157 chore(release): publish new version
- rrweb@1.0.6
 - rrweb-player@0.7.8
 - rrweb-snapshot@1.1.9
2021-10-13 00:42:54 +08:00
yz-yu
6483a594ac update repl tools and script, close #338 (#722) 2021-10-07 14:14:58 +08:00
yz-yu
18e4356be9 migrate to jest (#721)
* migrate rrweb-snapshot tests to jest

* migrate rrweb tests to jest
2021-10-06 15:31:42 +08:00
Yanzhen Yu
5622738e61 fix lock file registry 2021-10-06 13:19:53 +08:00
Yanzhen Yu
2afd4a27e6 upgrade rollup and rollup plugins 2021-10-06 12:14:12 +08:00
Eoghan Murray
333ba18239 Record when a doc is in compatMode and trigger this mode upon replay (#697)
* Hygiene: clean up the xhtml namespace attribute; this is an artefact of the `serializeToString` method which we are using (I think) to be consistent with whitespace and to clean up invalid attributes. I'm removing as was confused as am adding tests related to doctypes

* Record when a document is in `compatMode` and trigger this mode on the iframe upon replay

 https://developer.mozilla.org/en-US/docs/Web/API/Document/compatMode

 the included DOCTYPE was picked up from https://stackoverflow.com/questions/18976213/ - there may be better ways of triggering compatMode

* Don't write an extra DOCTYPE if there's one already present in the snapshot. Rely instead on whatever doctype is there to trigger the BackCompat mode

* Modify to write the correct doctype if we can sniff xhtml - don't have any evidence that this will make a difference

* Dev convenience: Ignore files generated by editors

* Typo fix

* Was getting a 2000ms timeout on the 'before' hook I believe

* Change certain tests to go directly to their localhost page instead of loading the html content programmatically in order to avoid triggering an incorrect BackCompat mode (incorrect in that the html content has a correct doctype)

* Add test based on motivating site that had images lined up in a square which were all different sizes; very old style percentage width/height attributes were doing the right thing in quirksmode, which is what we are testing for here

* Fixup rrweb test html to include a valid doctype and avoid BackCompat to ensure we're not accidentally testing against quirks modes. I didn't find an elegant way of avoiding the `BackCompat` when adding a minimal iframe, so some BackCompat has slipped in here, I don't think there's much harm
2021-10-06 09:34:22 +08:00
Pavel Hurieiev
4ff6e41877 fix(rrweb-snapshot): don't exclude @import CSS rules from the output and use CSSRule.cssText instead when they throw an exception while accessing their CSSStyleSheet.cssRules property (#720) 2021-10-06 09:20:41 +08:00