Missing styles in recording

Hi!

First I want to say that this project is amazing to use, simple and fast to implement! 😃

I have 2 react SPA, one is relativley straight forward, while the other is much more complex. The simple site works perfectly! 😃

But the slightly more complex site looks like this:

But in the records it looks like this instead:

This site uses styled-components heavily, and the grey color comes from the default index.scss.

My code looks like this:

const useRRWeb = () => {
    const [allow, setAllow] = useState(false)
    const eventsRef = useRef([])

    const allowRecording = () => setAllow(true)
    const getRandom = () => Math.random().toString(36).substring(7);
    import("rrweb").then(({record}) => {
        record({
            emit: (event) => {
                eventsRef.current.push(event)
            }
        })
    })
    useEffect(() => {
        if (!allow)
            return;

        const sessionId = getRandom() + getRandom() + getRandom();
        const save = () => {
            const events = eventsRef.current
            const body = JSON.stringify({events});
            eventsRef.current = [];

            fetch(getUrl(sessionId), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body,
            }).catch(() => {
                eventsRef.current.unshift(events)
            });
        }
        const saveInterval = setInterval(save, 10 * 1000);

        record({
            emit: (event) => {
                eventsRef.current.push(event)
            }
        })

        return () => {
            clearInterval(saveInterval)
            save()
        }
    }, [allow])

    return [allow, allowRecording]
}
export default useRRWeb

Any ideas about where I should start to look?

[havard024]

@Yuyz0112 I’m also experiencing styling issues, using ionic with angular with a rrweb sentry integratioon, I have a public web page you can look at. You can’t really navigate much, but you can trigger an exception which will trigger the call to sentry with the rrweb events.

Here’s the url to the public webpage: https://vehicle-registry-staging.nor1.se/

The button to trigger the exception is on the bottom of the left menu.

And this is how the replay looks (You can barely see anything, but the layout and colors are off)

[alexcroox]

I’ve not had much luck in getting different results using Vue and:

“rrweb”: “^0.7.29”, “rrweb-player”: “^0.4.3”

Is anyone else seeing styles in their playback now?