Skip to content

feat(replay): Update rrweb to 1.105.0 & add breadcrumb when encountering large mutation - #7314

Merged
mydea merged 6 commits into
developfrom
fn/update-rrweb
Mar 7, 2023
Merged

feat(replay): Update rrweb to 1.105.0 & add breadcrumb when encountering large mutation#7314
mydea merged 6 commits into
developfrom
fn/update-rrweb

Conversation

@mydea

@mydeamydea commented Mar 1, 2023

Copy link
Copy Markdown
Member

This updates rrweb to 1.105.0, which fixes a bug and introduces onMutation option.

We use this onMutation to create a breadcrumb when we encounter a large mutation. We can later use this to analyse how often this happens.

@mydea
mydea requested review from Lms24 and billyvgMarch 1, 2023 15:39
@mydeamydea self-assigned this Mar 1, 2023
@github-actions

github-actionsBot commented Mar 1, 2023

Copy link
Copy Markdown
Contributor

size-limit report 📦

PathSize
@sentry/browser - ES5 CDN Bundle (gzipped + minified)20.12 KB (+0.01% 🔺)
@sentry/browser - ES5 CDN Bundle (minified)62.52 KB (0%)
@sentry/browser - ES6 CDN Bundle (gzipped + minified)18.76 KB (+0.02% 🔺)
@sentry/browser - ES6 CDN Bundle (minified)55.51 KB (0%)
@sentry/browser - Webpack (gzipped + minified)20.49 KB (0%)
@sentry/browser - Webpack (minified)66.98 KB (0%)
@sentry/react - Webpack (gzipped + minified)20.52 KB (0%)
@sentry/nextjs Client - Webpack (gzipped + minified)48.2 KB (0%)
@sentry/browser + @sentry/tracing - ES5 CDN Bundle (gzipped + minified)27.21 KB (0%)
@sentry/browser + @sentry/tracing - ES6 CDN Bundle (gzipped + minified)25.46 KB (0%)
@sentry/replay ES6 CDN Bundle (gzipped + minified)43.01 KB (+0.34% 🔺)
@sentry/replay - Webpack (gzipped + minified)37.06 KB (+0.36% 🔺)
@sentry/browser + @sentry/tracing + @sentry/replay - ES6 CDN Bundle (gzipped + minified)60.76 KB (+0.23% 🔺)
@sentry/browser + @sentry/replay - ES6 CDN Bundle (gzipped + minified)54.14 KB (+0.26% 🔺)

});
this._createCustomBreadcrumb(breadcrumb);
}
return true;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Maybe add a comment on why we return true here?

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

Just to be sure, will this be shown in the UI automatically or does that need changes in the UI to be reflected?
Do we think the category & message is fine? I basically just freestyled this xD

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Hmm let me double check the breadcrumbs, iirc we just display them all

@billyvgbillyvgMar 2, 2023

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

OK so we have 2 options here: 1) we let UI handle the messaging, or 2) we let SDK handle messaging.

The logic goes like this... if we have data.label, it will use that as a title, otherwise it will split the category on . and display that as title. Likewise for the body, it will use message if data does not exist, otherwise it will stringify data.

Let's make this a bit more dumb and have the UI determine how it's displayed (since it's easier for us to update the UI). This also means we will need to make the UI update first.

I'm also thinking if we should only display these crumbs (in the UI) for Sentry internal users only at first - I'm worried this breadcrumb may confuse users?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I'm also thinking if we should only display these crumbs (in the UI) for Sentry internal users only at first - I'm worried this breadcrumb may confuse users?

If we limit it to sentry-internal, let's at least give users a way to opt-in (_experiments ?). Maybe someone in #6946 could give it a try and tell us if these crumbs show up in performance-impacted replays. This way we'd have a good indication that we're on the right track to solving this problem.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

Good point - I'll add an _experiments option for this, and will remove message/label for now!

Comment threadpackages/replay/src/replay.ts Outdated
mutationsCount: count,
},
});
this._createCustomBreadcrumb(breadcrumb);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I think this is a good start to see how often this happens

Comment threadpackages/replay/src/replay.ts
Comment threadpackages/replay/src/replay.ts Outdated
Comment threadpackages/replay/src/replay.ts Outdated
category: 'replay.mutations',
message: `A mutation with ${count} changes was recorded, which may indicate slow performance.`,
data: {
mutationsCount: count,

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Let's make this a bit more generic and use value?

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

not sure but may be too generic? As what does value mean when looking at replay.mutations 😅 I could make it just count or length maybe?

@Lms24Lms24 mentioned this pull request Mar 3, 2023
3 tasks
@mydea

mydea commented Mar 3, 2023

Copy link
Copy Markdown
MemberAuthor

Updated this:

  1. Gate behind _experiments.captureMutationSize
  2. Remove message
  3. Rename data.mutationsCount to data.length to be more generic

@billyvgbillyvg left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This seems good to me to start with. I think what we'll want in the future are metrics (i.e. what we'll be doing to support logging compression mode)

// instead, we'll always keep the last 60 seconds of replay before an error happened
...(this.recordingMode === 'error' && { checkoutEveryNms: ERROR_CHECKOUT_TIME }),
emit: this._handleRecordingEmit,
onMutation: (mutations: unknown[]) => {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I think you should be able to import {mutationRecord} from '@sentry-internal/rrweb'

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

IMHO we can leave this as unknown as we really don't care about what type of array that is (for now), one less import to care about 😅

Comment threadpackages/replay/src/replay.ts Outdated
@mydea
mydea merged commit 04d551e into developMar 7, 2023
@mydea
mydea deleted the fn/update-rrweb branch March 7, 2023 09:18
Sign up for freeto 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.

3 participants

@mydea@billyvg@Lms24