Skip to content

feat(replay): Add non-async flush for page unloads #6854

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from

Conversation

billyvg
Copy link
Member

@billyvg billyvg commented Jan 18, 2023

Add a method of using a non-async flush so that we are able to send a segment when the user unloads the page. This means the segment for blurs/unloads will be uncompressed if default settings are used.

Closes #6698 as we can avoid constant writes to sessionStorage and having to maintain additional state.

Add a method of using a non-async flush so that we are able to send a segment when the user unloads the page.
@billyvg billyvg force-pushed the feat-replay-flush-uncompressed-on-blur branch from 69d7dec to ba73d92 Compare January 18, 2023 17:52
@billyvg billyvg changed the title feat replay flush uncompressed on blur feat(replay): Add non-async flush for page unloads Jan 18, 2023
@github-actions
Copy link
Contributor

size-limit report 📦

Path Size
@sentry/browser - ES5 CDN Bundle (gzipped + minified) 19.82 KB (-0.01% 🔽)
@sentry/browser - ES5 CDN Bundle (minified) 61.47 KB (0%)
@sentry/browser - ES6 CDN Bundle (gzipped + minified) 18.5 KB (0%)
@sentry/browser - ES6 CDN Bundle (minified) 54.77 KB (0%)
@sentry/browser - Webpack (gzipped + minified) 20.21 KB (0%)
@sentry/browser - Webpack (minified) 66.17 KB (0%)
@sentry/react - Webpack (gzipped + minified) 20.24 KB (0%)
@sentry/nextjs Client - Webpack (gzipped + minified) 47.48 KB (0%)
@sentry/browser + @sentry/tracing - ES5 CDN Bundle (gzipped + minified) 26.74 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.22 KB (-0.6% 🔽)
@sentry/replay - Webpack (gzipped + minified) 37.93 KB (-0.75% 🔽)
@sentry/browser + @sentry/tracing + @sentry/replay - ES6 CDN Bundle (gzipped + minified) 60.47 KB (-0.44% 🔽)

@billyvg billyvg marked this pull request as ready for review January 18, 2023 18:24
@billyvg billyvg requested review from Lms24 and mydea January 18, 2023 18:24
@billyvg
Copy link
Member Author

billyvg commented Jan 18, 2023

@mydea After some testing, it looks like it's gets to the request part, but gets cancelled and the envelope does not end up getting sent.

});
}

public finishImmediate(): string {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After thinking about this, let's go with finishSync here maybe? That's maybe a bit clearer in what it does?
Also I we can save a few bytes by having finishSync be the actual implementation (instead of _finish) and using this in finish().

@@ -625,7 +625,7 @@ export class ReplayContainer implements ReplayContainerInterface {
// Send replay when the page/tab becomes hidden. There is no reason to send
// replay if it becomes visible, since no actions we care about were done
// while it was hidden
this._conditionalFlush();
this._conditionalFlush({ finishImmediate: true });
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

option could be sync: true, slightly shorter?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also because the immediate naming clashes a bit with finishImmediate, which is not actually sync, so IMHO using different naming here would make sense!

* synchronously retrieve pending events from buffer and send request asap.
*/
if (options.finishImmediate) {
void this._runFlush(options);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we need to use a fully sync code path here - as this is an async function, it may only be run in the next tick, which may be the problem. I'll try to see if I can try it locally...!

@mydea
Copy link
Member

mydea commented Jan 19, 2023

I made a PR to this branch here: #6859
My tests seemed to work, but maybe you can verify it from that branch? If that works, we can merge my PR into this one, then merge this one in! I think that's the superior (and more straightforward) fix for the unload use case then the session storage - hooray if we can avoid caching stuff on disk 🎉

@mydea mydea added the Package: replay Issues related to the Sentry Replay SDK label Jan 19, 2023
@mydea mydea self-assigned this Jan 19, 2023
@mydea mydea changed the base branch from master to develop February 2, 2023 09:48
@billyvg billyvg mentioned this pull request Feb 2, 2023
2 tasks
@Lms24
Copy link
Member

Lms24 commented Feb 13, 2023

In order to clean up our list of open PRs, I'm going to close this because of #6698 being closed:

I'm going to close this out for now as we have improved segment quality a significant amount already. This PR will add a bit of complexity and overhead, so let's hold off unless we really deem it necessary.

@billyvg feel free to reopen this anytime :)

@Lms24 Lms24 closed this Feb 13, 2023
@billyvg billyvg deleted the feat-replay-flush-uncompressed-on-blur branch October 22, 2024 15:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Package: replay Issues related to the Sentry Replay SDK
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants