Skip to content

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
@ryan953 ryan953 requested a review from scttcper December 12, 2023 18:28
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
@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

4 participants