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): Visually compare & diff react hydration errors on the Replay Details page #61477

Merged
merged 11 commits into from
Dec 13, 2023

Conversation

ryan953
Copy link
Member

@ryan953 ryan953 commented Dec 8, 2023

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.

SCR-20231208-ninr

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

fixes #61613

@ryan953 ryan953 requested a review from a team as a code owner December 8, 2023 22:41
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Dec 8, 2023
@ryan953 ryan953 changed the title wip - visually compare react hydration errors with replay feat(replay): Visually compare react hydration errors with replay Dec 12, 2023
@ryan953 ryan953 changed the title feat(replay): Visually compare react hydration errors with replay feat(replay): Visually compare & diff react hydration errors on the Replay Details page Dec 12, 2023
replay={replay}
initialTimeOffsetMs={{offsetMs: leftTimestamp - 1}}
>
<div id="leftSide" style={{display: 'contents', width: '50%'}}>
Copy link
Member

Choose a reason for hiding this comment

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

Let's get rid of the inline styles

ryan953 added a commit that referenced this pull request Dec 12, 2023

return (
<CrumbItem
as={onClick ? 'button' : 'span'}
as={onClick && !forceSpan ? 'button' : 'span'}
Copy link
Member Author

Choose a reason for hiding this comment

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

fix that nesting issue i see

@ryan953 ryan953 enabled auto-merge (squash) December 13, 2023 23:00
@ryan953 ryan953 merged commit 7dea10a into master Dec 13, 2023
40 checks passed
@ryan953 ryan953 deleted the react-hydration-visual-compare branch December 13, 2023 23:17
@github-actions github-actions bot locked and limited conversation to collaborators Dec 29, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Scope: Frontend Automatically applied to PRs that change frontend components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Use the hydration breadcrumbs to display a modal with a diff
3 participants