Skip to content

Commit 66e2ada

Browse files
authored
fix(hydration issue): Only look at IncrementalSource.Mutation types for hydration before/after (#82908)
There are many IncrementalSource possibilities (definition copied below), but we really only want to look at mutations. Mouse moves, input, and possibly even StyleSheetRule shouldn't affect hydrating the DOM that react cares about. The full list of this enum is: ``` export declare enum IncrementalSource { Mutation = 0, MouseMove = 1, MouseInteraction = 2, Scroll = 3, ViewportResize = 4, Input = 5, TouchMove = 6, MediaInteraction = 7, StyleSheetRule = 8, CanvasMutation = 9, Font = 10, Log = 11, Drag = 12, StyleDeclaration = 13, Selection = 14, AdoptedStyleSheet = 15, CustomElement = 16 } ``` The parent type that we are refining down from is: ``` export type incrementalSnapshotEvent = { type: EventType.IncrementalSnapshot; data: incrementalData; }; ```
1 parent 205decf commit 66e2ada

File tree

2 files changed

+10
-6
lines changed

2 files changed

+10
-6
lines changed

static/app/utils/replays/getDiffTimestamps.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type {Event} from 'sentry/types/event';
22
import type ReplayReader from 'sentry/utils/replays/replayReader';
33
import type {HydrationErrorFrame} from 'sentry/utils/replays/types';
4-
import {EventType, isHydrationErrorFrame} from 'sentry/utils/replays/types';
4+
import {isHydrationErrorFrame, isRRWebChangeFrame} from 'sentry/utils/replays/types';
55

66
export function getReplayDiffOffsetsFromFrame(
77
replay: ReplayReader | null,
@@ -15,11 +15,7 @@ export function getReplayDiffOffsetsFromFrame(
1515
}
1616

1717
const startTimestampMs = replay.getReplay().started_at.getTime() ?? 0;
18-
const domChangedFrames = replay
19-
.getRRWebFrames()
20-
.filter(frame =>
21-
[EventType.FullSnapshot, EventType.IncrementalSnapshot].includes(frame.type)
22-
);
18+
const domChangedFrames = replay.getRRWebFrames().filter(isRRWebChangeFrame);
2319

2420
const prevIncremental = domChangedFrames.filter(
2521
frame => frame.timestamp < hydrationError.timestampMs

static/app/utils/replays/types.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {
22
EventType,
33
type eventWithTime as TEventWithTime,
4+
IncrementalSource,
45
MouseInteractions,
56
} from '@sentry-internal/rrweb';
67

@@ -143,6 +144,13 @@ export function isRecordingFrame(
143144
return 'type' in attachment && 'timestamp' in attachment;
144145
}
145146

147+
export function isRRWebChangeFrame(frame: RecordingFrame) {
148+
return (
149+
frame.type === EventType.FullSnapshot ||
150+
(frame.type === EventType.IncrementalSnapshot &&
151+
frame.data.source === IncrementalSource.Mutation)
152+
);
153+
}
146154
export function isTouchStartFrame(frame: RecordingFrame) {
147155
return (
148156
frame.type === EventType.IncrementalSnapshot &&

0 commit comments

Comments
 (0)