rrweb icon indicating copy to clipboard operation
rrweb copied to clipboard

[Bug]: rrwebSnapshot.rebuild(snapshot, { doc : document }) returns a NULL object.

Open Racro opened this issue 1 year ago • 0 comments

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.

Racro avatar Nov 01 '23 21:11 Racro