rrweb
rrweb copied to clipboard
[Bug]: rrwebSnapshot.rebuild(snapshot, { doc : document }) returns a NULL object.
Preflight Checklist
- [X] I have searched the issue tracker for a bug report that matches the one I want to file, without success.
What package is this bug report for?
rrweb-snapshot
Version
v2.0.0
Expected Behavior
I am writing an extension to capture a snapshot of www.google.com and replay it locally. I am able to capture the snapshot using rrwebSnapshot.snapshot(document)
and it is the correct format. I store the snapshot in the localStorage.
When i try to rebuild the snapshot to replay it, I expected to get the DOM tree back. I use the code provided below.
Actual Behavior
I am getting a NULL object instead of the DOM tree from the rebuild function. rebuiltDocument variable is undefined.
Steps to Reproduce
The code used is this. I have injected a content script within www.google.com to capture the screenshot.
document.getElementById('captureSnapshot').addEventListener('click', function() {
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
const activeTab = tabs[0];
chrome.tabs.sendMessage(activeTab.id, { action: 'getSnapshot' }, function(response) {
// Store the DOM snapshot in localStorage
const compressedData = JSON.stringify(response);
localStorage.setItem('domSnapshot', compressedData);
alert('DOM snapshot saved to localStorage!');
});
});
});
document.getElementById('replaySnapshot').addEventListener('click', function() {
const snapshotString = localStorage.getItem('domSnapshot');
const snapshot = JSON.parse(snapshotString);
const { document: rebuiltDocument } = rrwebSnapshot.rebuild(snapshot, { doc: document });
// Clear the current content and append the rebuilt content
document.body.innerHTML = '';
document.body.appendChild(rebuiltDocument.documentElement);
// Further steps have been commented
// const serializer = new XMLSerializer();
// const htmlString = serializer.serializeToString(rebuiltDocument);
// const blob = new Blob([htmlString], { type: 'text/html' });
// const blobURL = URL.createObjectURL(blob);
// chrome.tabs.create({ url: blobURL });
});
Testcase Gist URL
No response
Additional Information
I want to understand if I am using the rebuild function incorrectly.