Missing styles in recording #58
Description
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 useRRWebAny ideas about where I should start to look?