636b02780e
Fixes a browser 'lock up' at record time due to a presence of large amounts of css in <style> elements, which are split over multiple text nodes, which triggers the new code added in #1437 (see that PR for full explanation of why this all exists). #1437 was not written with performance in mind as it was believed to be an edge case, but things like Grammarly browser extension (#1603) among other scenarios were triggering pathological behavior, some of which was solved in #1615. See also https://github.com/rrweb-io/rrweb/pull/1640#issuecomment-2633505804 for further discussion. * Fix the case when there are multiple matches and we end up not finding a unique one - just go with the best guess when there are many splits by looking at the previous chunk's size * Also add '0px' -> '0' stylesheet normalization, which also fixes the sample problem in a different way * Add new test and modify it so that it can trigger a failure in the absence of the '0px' normalization; there may be other unknown ways of triggering a similar bug, so ensure that the primary 'best guess' method doesn't suffer a regression * Leverage the 'best guess' method so that we can quit after 100 iterations trying to find a unique substring; hopefully this bit along with the `iterLimit` already added will prevent any future pathological cases. Failing example extracted from large files identified by Paul D'Ambra (Posthog) ... see comment from MartinWorkfully: https://github.com/PostHog/posthog-js/issues/1668
rrweb-snapshot
Snapshot the DOM into a stateful and serializable data structure. Also, provide the ability to rebuild the DOM via snapshot.
API
This module export following methods:
snapshot
snapshot will traverse the DOM and return a stateful and serializable data structure which can represent the current DOM view.
There are several things will be done during snapshot:
- Inline some DOM states into HTML attributes, e.g, HTMLInputElement's value.
- Turn script tags into
noscripttags to avoid scripts being executed. - Try to inline stylesheets to make sure local stylesheets can be used.
- Make relative paths in href, src, CSS to be absolute paths.
- Give an id to each Node, and return the id node map when snapshot finished.
rebuild
rebuild will build the DOM according to the taken snapshot.
There are several things will be done during rebuild:
- Add data-rrid attribute if the Node is an Element.
- Create some extra DOM node like text node to place inline CSS and some states.
- Add data-extra-child-index attribute if Node has some extra child DOM.
serializeNodeWithId
serializeNodeWithId can serialize a node into snapshot format with id.
buildNodeWithSN
buildNodeWithSN will build DOM from serialized node and store serialized information in the mirror.getMeta(node).
Sponsors
Become a sponsor and get your logo on our README on Github with a link to your site.
Gold Sponsors 🥇
Silver Sponsors 🥈
Bronze Sponsors 🥉
Backers
Core Team Members
Yuyz0112 |
Yun Feng |
eoghanmurray |
Juice10 open for rrweb consulting |
Who's using rrweb?
|
|
|
|
|
|
|
|
|
|
|
|
|