Session Replay Playback Issues

[mrxbox98]

Bug Description

Bug description

Self hosted PostHog. I've faced numerous issues playing back session replay recordings in both Chrome and Safari.

Issue 1: Replay will randomly crash with message "We're unable to play this recording"

In devtools console this the logs:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-Medium.woff. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 403.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-SemiBold.woff. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 403.

downloadable font: download failed (font-family: "MatterSQ" style:normal weight:500 stretch:100 src index:1): bad URI or cross-site access not allowed source: https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-Medium.woff
downloadable font: download failed (font-family: "MatterSQ" style:normal weight:700 stretch:100 src index:1): bad URI or cross-site access not allowed source: https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-SemiBold.woff
Error: Player tried to seek to a position that hasn't loaded yet [console.ts:40:19](https://redacted/node_modules/.pnpm/@sentry+utils@7.112.1/node_modules/@sentry/src/instrument/console.ts)
Error: Player tried to seek to a position that hasn't loaded yet

The crash only seems to happen on an event but I can't be 100% sure.

Issue 2: Complete blank white screen.

Multiple of my session replays are just completely blank white screens but in the seeker there are events. Console logs:

[replayer] Node with id '258' not found.  
Object { source: 0, texts: [], attributes: (2) […], removes: [], adds: [] }
[console.ts:40:19](https://redacted/node_modules/.pnpm/@sentry+utils@7.112.1/node_modules/@sentry/src/instrument/console.ts)
[replayer] Node with id '12648' not found.  
Object { source: 0, texts: [], attributes: (1) […], removes: [], adds: [] }
[console.ts:40:19](https://redacted/node_modules/.pnpm/@sentry+utils@7.112.1/node_modules/@sentry/src/instrument/console.ts)
[replayer] Node with id '12648' not found.  
Object { source: 0, texts: [], attributes: (1) […], removes: [], adds: [] }
[console.ts:40:19](https://redacted/node_modules/.pnpm/@sentry+utils@7.112.1/node_modules/@sentry/src/instrument/console.ts)
[replayer] Node with id '22' not found.  
Object { source: 0, texts: [], attributes: (2) […], removes: [], adds: [] }
[console.ts:40:19](https://redacted/node_modules/.pnpm/@sentry+utils@7.112.1/node_modules/@sentry/src/instrument/console.ts)
[replayer] Node with id '24' not found.  
Object { source: 0, texts: [], attributes: (2) […], removes: [], adds: [] }
[console.ts:40:19](https://redacted/node_modules/.pnpm/@sentry+utils@7.112.1/node_modules/@sentry/src/instrument/console.ts)
[replayer] Node with id '24' not found.  
Object { source: 0, texts: [], attributes: (1) […], removes: [], adds: [] }

Issue 3: Infinite Buffering

I can't be sure what causes this and there wasn't anything in the console that was relevant.

How to reproduce

1. View a recording on chrome or firefox.

Additional context

Debug info

- [x] PostHog Hobby self-hosted with `docker compose`, version/commit: 5d761a1f68cdcabd869e746f2457186aec2ef7c2

[madjam002]

Happening for me on d3026887dfcdc9a08c71050ae5e1eace62f61d86 too, around 5% of recordings work for me, not sure if it's a problem with posthog-js/rrweb recorder or not, I'm guessing not seeing as this is probably just affecting hobby installations.

I've been regularly updating posthog for the past 2 months and it hasn't been working on any of those versions.

[mrxbox98]

For me, replays sometimes work on the main page when I preview then from the last 5 menu (I sometimes have to reload a few times). They never work in the actual session replay viewer though.

[desto12]

Same issue here!!!