ref: Replays should split memory spans apart from network spans earlier (#49123)

Related to #47991

Author: ryan953

static/app/utils/replays/replayDataUtils.spec.tsx

@@ -1,8 +1,5 @@
 import {
   breadcrumbFactory,
-  isMemorySpan,
-  isNetworkSpan,
-  mapRRWebAttachments,
   rrwebEventListFactory,
 } from 'sentry/utils/replays/replayDataUtils';
 import type {ReplayRecord} from 'sentry/views/replays/types';
@@ -21,19 +18,6 @@ const navigateSpan = TestStubs.ReplaySpanPayload({
   op: 'navigation.navigate',
   description: 'http://test.com',
 });
-const cssSpan = TestStubs.ReplaySpanPayload({
-  op: 'resource.css',
-  description: 'http://test.com/static/media/glyphicons-halflings-regular.448c34a5.woff2',
-});
-const memorySpan = TestStubs.ReplaySpanPayload({
-  op: 'memory',
-  description: 'memory',
-  data: {
-    jsHeapSizeLimit: 4294705152,
-    totalJSHeapSize: 19203353,
-    usedJSHeapSize: 16119217,
-  },
-});
 
 describe('breadcrumbFactory', () => {
   it('adds LCP as a breadcrumb', () => {
@@ -159,32 +143,6 @@ describe('breadcrumbFactory', () => {
   });
 });
 
-describe('isMemorySpan', () => {
-  it('should identify memory spans by the op field', () => {
-    expect(isMemorySpan(memorySpan)).toBeTruthy();
-  });
-
-  it('should reject spans which are not op=memory', () => {
-    expect(isMemorySpan(cssSpan)).toBeFalsy();
-    expect(isMemorySpan(fooSpan)).toBeFalsy();
-    expect(isMemorySpan(lcpSpan)).toBeFalsy();
-    expect(isMemorySpan(navigateSpan)).toBeFalsy();
-  });
-});
-
-describe('isNetworkSpan', () => {
-  it('should identify network spans by the op field', () => {
-    expect(isNetworkSpan(cssSpan)).toBeTruthy();
-    expect(isNetworkSpan(navigateSpan)).toBeTruthy();
-  });
-
-  it('should reject spans which are not some kind of op=navigation', () => {
-    expect(isNetworkSpan(fooSpan)).toBeFalsy();
-    expect(isNetworkSpan(lcpSpan)).toBeFalsy();
-    expect(isNetworkSpan(memorySpan)).toBeFalsy();
-  });
-});
-
 describe('rrwebEventListFactory', () => {
   it('returns a list of replay events for highlights', function () {
     const replayRecord = {
@@ -230,45 +188,3 @@ describe('rrwebEventListFactory', () => {
     ]);
   });
 });
-
-describe('mapRRWebAttachments', () => {
-  const testPayload = [
-    ...TestStubs.ReplaySegmentInit({timestamp: new Date(1654290037123)}),
-    ...TestStubs.ReplaySegmentBreadcrumb({
-      timestamp: new Date(1654290037267),
-      payload: {
-        type: 'default',
-        category: 'ui.click',
-        message: 'body > div#root > div.App > form',
-        data: {nodeId: 44},
-      },
-    }),
-    ...TestStubs.ReplaySegmentSpan({
-      timestamp: new Date(1654290034262),
-      payload: TestStubs.ReplaySpanPayload({
-        op: 'navigation.navigate',
-        description: 'http://localhost:3000/',
-        startTimestamp: new Date(1654290034262),
-        endTimestamp: new Date(1654290034580),
-        data: {size: 1150},
-      }),
-    }),
-    ...TestStubs.ReplaySegmentSpan({
-      timestamp: new Date(1654290034262.3),
-      payload: TestStubs.ReplaySpanPayload({
-        op: 'navigation.navigate',
-        description: 'http://localhost:3000/',
-        startTimestamp: new Date(1654290034262.3),
-        endTimestamp: new Date(1654290034580.8),
-        data: {size: 1150},
-      }),
-    }),
-  ];
-
-  it('should split attachments by type', () => {
-    const {breadcrumbs, rrwebEvents, spans} = mapRRWebAttachments(testPayload);
-    expect(breadcrumbs.length).toBe(1);
-    expect(rrwebEvents.length).toBe(3);
-    expect(spans.length).toBe(2);
-  });
-});

static/app/utils/replays/replayDataUtils.tsx

@@ -13,56 +13,13 @@ import type {
 import {BreadcrumbLevelType, BreadcrumbType} from 'sentry/types/breadcrumbs';
 import getMinMax from 'sentry/utils/getMinMax';
 import type {
-  MemorySpanType,
   RecordingEvent,
   ReplayCrumb,
   ReplayError,
   ReplayRecord,
   ReplaySpan,
 } from 'sentry/views/replays/types';
 
-// Errors if it is an interface
-// See https://github.com/microsoft/TypeScript/issues/15300
-type ReplayAttachmentsByTypeMap = {
-  breadcrumbs: ReplayCrumb[];
-
-  /**
-   * The flattened list of rrweb events. These are stored as multiple attachments on the root replay object: the `event` prop.
-   */
-  rrwebEvents: RecordingEvent[];
-  spans: ReplaySpan[];
-};
-
-export function mapRRWebAttachments(
-  unsortedReplayAttachments: any[]
-): ReplayAttachmentsByTypeMap {
-  const replayAttachments: ReplayAttachmentsByTypeMap = {
-    breadcrumbs: [],
-    rrwebEvents: [],
-    spans: [],
-  };
-
-  unsortedReplayAttachments.forEach(attachment => {
-    if (attachment.data?.tag === 'performanceSpan') {
-      replayAttachments.spans.push(attachment.data.payload);
-    } else if (attachment?.data?.tag === 'breadcrumb') {
-      replayAttachments.breadcrumbs.push(attachment.data.payload);
-    } else {
-      replayAttachments.rrwebEvents.push(attachment);
-    }
-  });
-
-  return replayAttachments;
-}
-
-export const isMemorySpan = (span: ReplaySpan): span is MemorySpanType => {
-  return span.op === 'memory';
-};
-
-export const isNetworkSpan = (span: ReplaySpan) => {
-  return span.op.startsWith('navigation.') || span.op.startsWith('resource.');
-};
-
 export function mapResponseToReplayRecord(apiResponse: any): ReplayRecord {
   // Marshal special fields into tags
   const user = Object.fromEntries(

static/app/utils/replays/replayReader.tsx

@@ -6,16 +6,17 @@ import type {Crumb} from 'sentry/types/breadcrumbs';
 import {BreadcrumbType} from 'sentry/types/breadcrumbs';
 import {
   breadcrumbFactory,
-  isMemorySpan,
-  isNetworkSpan,
-  mapRRWebAttachments,
   replayTimestamps,
   rrwebEventListFactory,
   spansFactory,
 } from 'sentry/utils/replays/replayDataUtils';
+import splitAttachmentsByType from 'sentry/utils/replays/splitAttachmentsByType';
 import type {
+  MemorySpan,
+  NetworkSpan,
   RecordingEvent,
   RecordingOptions,
+  ReplayCrumb,
   ReplayError,
   ReplayRecord,
   ReplaySpan,
@@ -69,14 +70,17 @@ export default class ReplayReader {
     replayRecord,
     errors,
   }: RequiredNotNull<ReplayReaderParams>) {
-    const {breadcrumbs, rrwebEvents, spans} = mapRRWebAttachments(attachments);
+    const {rawBreadcrumbs, rawRRWebEvents, rawNetworkSpans, rawMemorySpans} =
+      splitAttachmentsByType(attachments);
+
+    const spans = [...rawMemorySpans, rawNetworkSpans] as ReplaySpan[];
 
     // TODO(replays): We should get correct timestamps from the backend instead
     // of having to fix them up here.
     const {startTimestampMs, endTimestampMs} = replayTimestamps(
       replayRecord,
-      rrwebEvents,
-      breadcrumbs,
+      rawRRWebEvents as RecordingEvent[],
+      rawBreadcrumbs as ReplayCrumb[],
       spans
     );
     replayRecord.started_at = new Date(startTimestampMs);
@@ -89,10 +93,13 @@ export default class ReplayReader {
     this.breadcrumbs = breadcrumbFactory(
       replayRecord,
       errors,
-      breadcrumbs,
+      rawBreadcrumbs as ReplayCrumb[],
       this.sortedSpans
     );
-    this.rrwebEvents = rrwebEventListFactory(replayRecord, rrwebEvents);
+    this.rrwebEvents = rrwebEventListFactory(
+      replayRecord,
+      rawRRWebEvents as RecordingEvent[]
+    );
 
     this.replayRecord = replayRecord;
   }
@@ -175,3 +182,11 @@ export default class ReplayReader {
     );
   });
 }
+
+const isMemorySpan = (span: ReplaySpan): span is MemorySpan => {
+  return span.op === 'memory';
+};
+
+const isNetworkSpan = (span: ReplaySpan): span is NetworkSpan => {
+  return span.op.startsWith('navigation.') || span.op.startsWith('resource.');
+};

static/app/utils/replays/splitAttachmentsByType.spec.tsx

@@ -0,0 +1,58 @@
+import splitAttachmentsByType from 'sentry/utils/replays/splitAttachmentsByType';
+
+describe('splitAttachmentsByType', () => {
+  const testPayload = [
+    ...TestStubs.ReplaySegmentInit({timestamp: new Date(1654290037123)}),
+    ...TestStubs.ReplaySegmentFullsnapshot({timestamp: new Date(1654290037124)}),
+    ...TestStubs.ReplaySegmentBreadcrumb({
+      timestamp: new Date(1654290037267),
+      payload: {
+        type: 'default',
+        category: 'ui.click',
+        message: 'body > div#root > div.App > form',
+        data: {nodeId: 44},
+      },
+    }),
+    ...TestStubs.ReplaySegmentSpan({
+      timestamp: new Date(1654290034262),
+      payload: TestStubs.ReplaySpanPayload({
+        op: 'navigation.navigate',
+        description: 'http://localhost:3000/',
+        startTimestamp: new Date(1654290034262),
+        endTimestamp: new Date(1654290034580),
+        data: {size: 1150},
+      }),
+    }),
+    ...TestStubs.ReplaySegmentSpan({
+      timestamp: new Date(1654290034262.3),
+      payload: TestStubs.ReplaySpanPayload({
+        op: 'navigation.navigate',
+        description: 'http://localhost:3000/',
+        startTimestamp: new Date(1654290034262.3),
+        endTimestamp: new Date(1654290034580.8),
+        data: {size: 1150},
+      }),
+    }),
+    ...TestStubs.ReplaySegmentSpan({
+      timestamp: new Date(1654290034263),
+      payload: TestStubs.ReplaySpanPayload({
+        op: 'memory',
+        description: 'memory',
+        data: {
+          jsHeapSizeLimit: 4294705152,
+          totalJSHeapSize: 19203353,
+          usedJSHeapSize: 16119217,
+        },
+      }),
+    }),
+  ];
+
+  it('should split attachments by type', () => {
+    const {rawBreadcrumbs, rawRRWebEvents, rawNetworkSpans, rawMemorySpans} =
+      splitAttachmentsByType(testPayload);
+    expect(rawBreadcrumbs.length).toBe(1);
+    expect(rawRRWebEvents.length).toBe(4);
+    expect(rawNetworkSpans.length).toBe(2);
+    expect(rawMemorySpans.length).toBe(1);
+  });
+});

static/app/utils/replays/splitAttachmentsByType.tsx

@@ -0,0 +1,29 @@
+export default function splitAttachmentsByType(attachments: any[]) {
+  const rawBreadcrumbs = [] as unknown[];
+  const rawRRWebEvents = [] as unknown[];
+  const rawNetworkSpans = [] as unknown[];
+  const rawMemorySpans = [] as unknown[];
+
+  attachments.forEach(attachment => {
+    if (attachment.data?.tag === 'performanceSpan') {
+      const span = attachment.data?.payload;
+      if (span.op === 'memory') {
+        rawMemorySpans.push(span);
+      }
+      if (span.op.startsWith('navigation.') || span.op.startsWith('resource.')) {
+        rawNetworkSpans.push(span);
+      }
+    } else if (attachment.data?.tag === 'breadcrumb') {
+      rawBreadcrumbs.push(attachment?.data?.payload);
+    } else {
+      rawRRWebEvents.push(attachment);
+    }
+  });
+
+  return {
+    rawBreadcrumbs,
+    rawRRWebEvents,
+    rawNetworkSpans,
+    rawMemorySpans,
+  };
+}

static/app/views/replays/detail/memoryChart.tsx

@@ -17,10 +17,10 @@ import {ReactEchartsRef, Series} from 'sentry/types/echarts';
 import {formatBytesBase2} from 'sentry/utils';
 import {getFormattedDate} from 'sentry/utils/dates';
 import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
-import type {MemorySpanType} from 'sentry/views/replays/types';
+import type {MemorySpan} from 'sentry/views/replays/types';
 
 interface Props {
-  memorySpans: undefined | MemorySpanType[];
+  memorySpans: undefined | MemorySpan[];
   setCurrentHoverTime: (time: undefined | number) => void;
   setCurrentTime: (time: number) => void;
   startTimestampMs: undefined | number;

static/app/views/replays/types.tsx

@@ -181,7 +181,7 @@ export interface ReplaySpan<T = Record<string, any>> {
   description?: string;
 }
 
-export type MemorySpanType = ReplaySpan<{
+export type MemorySpan = ReplaySpan<{
   memory: {
     jsHeapSizeLimit: number;
     totalJSHeapSize: number;