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): Calculate hydration diff timestamps based on related hydration breadcrumbs #72561

Merged
merged 4 commits into from
Jun 18, 2024

Conversation

ryan953
Copy link
Member

@ryan953 ryan953 commented Jun 11, 2024

Related to #70199

@ryan953 ryan953 requested a review from a team as a code owner June 11, 2024 21:54
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Jun 11, 2024
Copy link

codecov bot commented Jun 11, 2024

Bundle Report

Changes will decrease total bundle size by 681.18kB ⬇️

Bundle name Size Change
app-webpack-bundle-array-push 27.31MB 681.18kB ⬇️

.getRRWebFrames()
.findIndex(frame => frame.timestamp < eventTimestampMs);
const leftFrame = frames.at(Math.max(0, leftReplayFrameIndex));
const leftOffsetMs = replayStartTimestamp - (leftFrame?.timestamp ?? 0);
Copy link
Member

Choose a reason for hiding this comment

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

am i misunderstanding, or is replayStartTimestamp smaller than leftFrame.timestamp? so this could be negative?

Copy link
Member

Choose a reason for hiding this comment

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

(or is it being negative expected)

Copy link
Member Author

Choose a reason for hiding this comment

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

I set some Math.max() in here, so we'll never get a negative number back.

For the left side, a 0 offset is probably ok to deal with. We could have either an empty html page (unlikely, because we need some html to load the sdk!) or it's just a really early snapshot.

If the right side is 0 then it's a problem for the diff views... I think in that case those views should deal with that themselves... for example we could show an error to the user. 0 in that case might mean that there's no 2nd snapshot to compare against.

Comment on lines 20 to 29
// These stub types should be coming from the sdk, but they're hard-coded until
// the SDK updates to the latest version... once that happens delete this!
type StubBreadcrumbTypes = {
category: 'replay.hydrate-error';
timestamp: number;
type: '';
data?: {
url?: string;
};
};
Copy link
Member Author

Choose a reason for hiding this comment

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

depends on getsentry/sentry-javascript#12521 being released

@ryan953 ryan953 requested review from a team and removed request for a team June 18, 2024 22:40
@michellewzhang
Copy link
Member

nice tests👍

@ryan953 ryan953 merged commit d29adfe into master Jun 18, 2024
41 checks passed
@ryan953 ryan953 deleted the ryan953/hydration-error-diff-offsets branch June 18, 2024 23:06
Copy link

sentry-io bot commented Jun 18, 2024

Suspect Issues

This pull request was deployed and Sentry observed the following issues:

  • ‼️ TypeError: Cannot read properties of undefined (reading 'next') /replays/:replaySlug/ View Issue
  • ‼️ TypeError: Cannot read properties of undefined (reading 'next') /issues/:groupId/ View Issue
  • ‼️ TypeError: Cannot read properties of undefined (reading 'next') /replays/:replaySlug/ View Issue
  • ‼️ TypeError: Cannot read properties of undefined (reading 'next') /issues/:groupId/events/:eventId/replays/ View Issue
  • ‼️ TypeError: i.data.mutations is undefined /replays/:replaySlug/ View Issue

Did you find this useful? React with a 👍 or 👎

@michellewzhang michellewzhang added the Trigger: Revert add to a merged PR to revert it (skips CI) label Jun 19, 2024
@getsentry-bot
Copy link
Contributor

PR reverted: 986296c

getsentry-bot added a commit that referenced this pull request Jun 19, 2024
…lated hydration breadcrumbs (#72561)"

This reverts commit d29adfe.

Co-authored-by: michellewzhang <56095982+michellewzhang@users.noreply.github.com>
ryan953 added a commit that referenced this pull request Jun 24, 2024
…dration breadcrumbs (#73095)

This is the 2nd try at #72561
The original was reverted in
986296c
because of some errors that popped up:
-
https://sentry.sentry.io/issues/5505399172/?project=11276&referrer=github-pr-bot
-
https://sentry.sentry.io/issues/5505401256/?project=11276&referrer=github-pr-bot
-
https://sentry.sentry.io/issues/5505436186/?project=11276&referrer=github-pr-bot
-
https://sentry.sentry.io/issues/5505439753/?project=11276&referrer=github-pr-bot
-
https://sentry.sentry.io/issues/5505459069/?project=11276&referrer=github-pr-bot

The difference now is that I've improved the types to include
`data.mutations.next`. The real but though was that before, in
`breadcrumbItem.tsx`, we were doing the left/right timestamp math only
for crumbs that have that mutations.next field...

That problem is fixed now because we're checking the crumb type first,
then defer to the new `<CrumbHydrationButton>` which will get the
offsets and render all at once.
Without that fix, we were basically trying to get the left/right offsets
for any breadcrumb type, which would easily explode.

Related to #70199
@github-actions github-actions bot locked and limited conversation to collaborators Jul 4, 2024
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 Trigger: Revert add to a merged PR to revert it (skips CI)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants