feat(replay): Send replay data when page is unloaded

[mydea]

This ties into the changes from here: #6859

Currently, we only send replay data on blur. However, we should also listen to beforeunload, which is called when the page is closed.

[billyvg]

We use visibilitychange instead of unload https://github.com/getsentry/sentry-javascript/pull/6910/files#diff-37effab960cdba5170b96d00c73bf14c30c6d856a1c94de4f63fe1a06087bb97R436 -- See https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event#usage_notes

[mydea]

We use visibilitychange instead of unload https://github.com/getsentry/sentry-javascript/pull/6910/files#diff-37effab960cdba5170b96d00c73bf14c30c6d856a1c94de4f63fe1a06087bb97R436 -- See https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event#usage_notes

That didn't seem to trigger for me in time - I tried the following on desktop:

1. Open my test app
2. Enable "Preserve log" in network tab
3. Click around in test app (trigger changes)
4. Go to different page via breadcrumb

Without this change, no request was even tried to be sent. With this change, I see a successful HTTP request in the network tab.

[github-actions]

size-limit report 📦

Path	Size
@sentry/browser - ES5 CDN Bundle (gzipped + minified)	19.83 KB (+0.02% 🔺)
@sentry/browser - ES5 CDN Bundle (minified)	61.48 KB (0%)
@sentry/browser - ES6 CDN Bundle (gzipped + minified)	18.5 KB (+0.02% 🔺)
@sentry/browser - ES6 CDN Bundle (minified)	54.79 KB (0%)
@sentry/browser - Webpack (gzipped + minified)	20.22 KB (0%)
@sentry/browser - Webpack (minified)	66.19 KB (0%)
@sentry/react - Webpack (gzipped + minified)	20.25 KB (0%)
@sentry/nextjs Client - Webpack (gzipped + minified)	47.48 KB (0%)
@sentry/browser + @sentry/tracing - ES5 CDN Bundle (gzipped + minified)	26.75 KB (+0.01% 🔺)
@sentry/browser + @sentry/tracing - ES6 CDN Bundle (gzipped + minified)	25.03 KB (+0.01% 🔺)
@sentry/replay ES6 CDN Bundle (gzipped + minified)	43.25 KB (+0.12% 🔺)
@sentry/replay - Webpack (gzipped + minified)	37.97 KB (+0.11% 🔺)
@sentry/browser + @sentry/tracing + @sentry/replay - ES6 CDN Bundle (gzipped + minified)	60.59 KB (+0.07% 🔺)

[billyvg]

Moving our Slack conversation back to here... unload will give us an event that pagehide/visibilitychange does not: navigating away from the current page (at least pagehide seems to be less reliable). However, this comes at a cost of disabling bfcache. This is pretty disruptive for our clients as it will impact their customer's experiences and is something we should avoid.

I'm wondering what the overlap between pagehide and visibilitychange are, we may want to consider adding pagehide.

[mydea]

Moving our Slack conversation back to here... unload will give us an event that pagehide/visibilitychange does not: navigating away from the current page (at least pagehide seems to be less reliable). However, this comes at a cost of disabling bfcache. This is pretty disruptive for our clients as it will impact their customer's experiences and is something we should avoid.

I'm wondering what the overlap between pagehide and visibilitychange are, we may want to consider adding pagehide.

In my tests, pagehide was covered by visibility change, so I think it's fine to use only visibilitychange.

Regarding bfcache, I just checked this in chrome, and it seems we are not eligible anyhow because of:

Pages that have inflight fetch() or XHR are not currently eligible for back/forward cache.

Which we'll always have when we try to send stuff before unloading somehow.

[billyvg]

But we wont have any inflight requests on unload since we have no listeners for unload?

[mydea]

So we decided that we're OK with this data missing on moving away. Other cases like reloading the tab are handled via visibilitychange.