Skip to content
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

feat(replay): Capture hydration error breadcrumb #9759

Merged
merged 13 commits into from Dec 12, 2023

Conversation

scttcper
Copy link
Member

@scttcper scttcper commented Dec 6, 2023

Adds a hydration error breadcrumb replay.hydrate-error for nextjs / other react ssr frameworks.

fixes #9649

Adds a hydration error breadcrumb for nextjs / other ssr frameworks
Copy link
Contributor

github-actions bot commented Dec 6, 2023

size-limit report 📦

Path Size
@sentry/browser (incl. Tracing, Replay, Feedback) - Webpack (gzipped) 75.04 KB (+0.24% 🔺)
@sentry/browser (incl. Tracing, Replay) - Webpack (gzipped) 66.38 KB (+0.22% 🔺)
@sentry/browser (incl. Tracing, Replay) - Webpack with treeshaking flags (gzipped) 59.99 KB (+0.25% 🔺)
@sentry/browser (incl. Tracing) - Webpack (gzipped) 31.13 KB (0%)
@sentry/browser (incl. Feedback) - Webpack (gzipped) 29.74 KB (0%)
@sentry/browser - Webpack (gzipped) 21.39 KB (0%)
@sentry/browser (incl. Tracing, Replay, Feedback) - ES6 CDN Bundle (gzipped) 71.6 KB (+0.18% 🔺)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (gzipped) 63.32 KB (+0.21% 🔺)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (gzipped) 29.66 KB (0%)
@sentry/browser - ES6 CDN Bundle (gzipped) 21.71 KB (0%)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (minified & uncompressed) 199.52 KB (+0.19% 🔺)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (minified & uncompressed) 89.89 KB (0%)
@sentry/browser - ES6 CDN Bundle (minified & uncompressed) 64.86 KB (0%)
@sentry/browser (incl. Tracing) - ES5 CDN Bundle (gzipped) 32.33 KB (0%)
@sentry/react (incl. Tracing, Replay) - Webpack (gzipped) 66.75 KB (+0.22% 🔺)
@sentry/react - Webpack (gzipped) 21.44 KB (0%)
@sentry/nextjs Client (incl. Tracing, Replay) - Webpack (gzipped) 83.48 KB (+0.18% 🔺)
@sentry/nextjs Client - Webpack (gzipped) 48.23 KB (0%)
@sentry-internal/feedback - Webpack (gzipped) 16.19 KB (0%)

@scttcper scttcper changed the title WIP feat(replay): Capture hydration error breadcrumb feat(replay): Capture hydration error breadcrumb Dec 12, 2023
@scttcper scttcper marked this pull request as ready for review December 12, 2023 01:30
@scttcper
Copy link
Member Author

i don't know how reviews work in this repo so i tagged some names i saw in blame

Copy link
Member

@AbhiPrasad AbhiPrasad left a comment

Choose a reason for hiding this comment

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

We can cut a release asap to get this out after we merge in.

IMO doesn't feel amazing to have react specific logic in replay integration like this, but there's not really a better place to keep it I guess :/

In the future, you can tag @getsentry/ team-web-sdk-frontend (no space) and it'll round robin two of of the js sdk maintainers to review.

packages/replay/src/coreHandlers/handleBeforeSendEvent.ts Outdated Show resolved Hide resolved
packages/replay/src/coreHandlers/handleBeforeSendEvent.ts Outdated Show resolved Hide resolved
@scttcper
Copy link
Member Author

renamed to replay.hydrate-error, i think we're ready to go

Copy link
Member

@AbhiPrasad AbhiPrasad left a comment

Choose a reason for hiding this comment

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

One more naming thing and we are good 🚢 🇮🇹

Please make sure you squash commit - we allow for merge but thats to make gitflow work properly between develop and master.

packages/replay/src/coreHandlers/handleBeforeSendEvent.ts Outdated Show resolved Hide resolved
packages/replay/src/coreHandlers/handleBeforeSendEvent.ts Outdated Show resolved Hide resolved
@scttcper scttcper merged commit a05de17 into develop Dec 12, 2023
85 checks passed
@scttcper scttcper deleted the scttcper/hydration-error branch December 12, 2023 18:25
ryan953 added a commit to getsentry/sentry that referenced this pull request Dec 13, 2023
…eplay Details page (#61477)

Reads the new `session-replay-show-hydration-errors` feature flag which
controls if we show `replay.hydrate-error` crumbs on the Replay Details
page.

These crumbs have a poor design right now, but they have a button which
will open a Modal that shows a visual side-by-side comparison of before
& after the hydration error happened. Also, it shows a diff of the html.

<img width="1426" alt="SCR-20231208-ninr"
src="https://github.com/getsentry/sentry/assets/187460/2b5b172d-024d-4535-98d9-86493405c523">


Depends on #61612
See related SDK change:
getsentry/sentry-javascript#9759

fixes #61613

---------

Co-authored-by: Scott Cooper <scttcper@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add a breadcrumb when a hydration error happens
4 participants