[Bug]: Null Showing on the replay

[tomcrofty]

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

Version

v1.1.3

Expected Behavior

Replay should look identical to recorded events

Actual Behavior

Looks similar however "null" shows everywhere as text

Steps to Reproduce

Recording Code:

rrwebRecord({
    emit(event) {
        // push event into the events array
        events.push(event);
    },
    sampling: {
        // do not record mouse movement
        mousemove: false,
        // do not record mouse interaction
        mouseInteraction: false,
        // set the interval of scrolling event
        scroll: 150, // do not emit twice in 150ms
        // set the interval of media interaction event
        media: 800,
        // set the timing of record input
        input: 'last', // When input mulitple characters, only record the final input
    },
    inlineStylesheet: true,
    blockSelector: 'link[href="https://use.fontawesome.com/ea731dcb6f.css"], style#fa-v4-font-face'
});

Replay Code:

const events = {!! $data !!};

const replayer = new rrweb.Replayer(events, {
    root: document.getElementById("player"),
    data: {
        autoPlay: true,
    }
});

replayer.play();

Testcase Gist URL

https://rrwebdebug.com/play/index.html?url=https%3A%2F%2Fgist.github.com%2Ftomcrofty%2F2cca6793752850d3d792e78d9d5ee5f0&version=1.0.0-alpha.1&play=on

Additional Information

I've tried so many variations of the recording code which is clearly the culprit here, any ideas what I'm doing wrong? You can try the debug URL I posted to see the same result from the recording.

[tomcrofty]

Just done a bit more digging into this, after decoding the data stored in the DB, there's no reference to anything such as:

textContent: "null"

However, there's plenty of references to:

textContent: null

Which one would assume would mean that when recreating the page based on the events would not output "null" as text. It seems to be placed before and after every element almost behaving like a psuedo element.

[tomcrofty]

Interestingly when replacing all ocurrences of:

textContent: null

with:

textContent: ""

All the issues go away, for now that's my temporary solution but it's obviously not too ideal

[tomcrofty]

[stevenmyhre]

I also had to hack the nulls away.

[Yuyz0112]

Could you check your backend/transport layer? Looks like that parts add null to undefined fields instead of omitting it.

[stevenmyhre]

Before it even hits the server the payload contains empty textContent:

Payload of events returned from .record callback:

{"type":5,"textContent":"","rootId":2222,"id":2822},{"type":3,"textContent":" ","rootId":2222,"id":2823},{"type":2,"tagName":"hr","attributes":{},"childN...