ref(replay): Move custom breadcrumbs to breadcrumb list

[c298lee]

Moves custom breadcrumbs from console tab to breadcrumbs tab. They can also be filtered in the breadcrumbs tab with Custom.

Before:

After:

Closes #69230 and #71504

[ryan953]

This BreadcrumbCategories list looks like it also includes 'console', does that mean console logs will be in both places?

[c298lee]

Custom frames is anything in the sorted breadcrumbs frames list that isn't in BreadcrumbCategories. So, console logs won't be in the breadcrumbs list

[codecov]

❌ 1 Tests Failed:

Tests completed	Failed	Passed	Skipped
7849	1	7848	0

View the top 1 failed tests by shortest run time

ReplayReader attachment splitting Calling getChapterFrames will filter frames ReplayReader attachment splitting Calling getChapterFrames will filter frames

Stack Traces | 0.019s run time

Error: expect(received).toStrictEqual(expected) // deep equality

- Expected  -  4
+ Received  + 39

@@ -3,18 +3,53 @@
      "category": "replay.init",
    },
    ObjectContaining {
      "category": "ui.slowClickDetected",
    },
-   ObjectContaining {
+   Object {
+     "category": "redux.action",
+     "data": Object {
+       "action": "save.click",
+     },
+     "message": "",
+     "offsetMs": 39614631000,
+     "timestamp": 2023-12-25T05:02:30.000Z,
+     "timestampMs": 1703480550000,
+     "type": "default",
+   },
+   Object {
+     "data": Object {
+       "decodedBodySize": 1712,
+       "domComplete": 30000,
+       "domContentLoadedEventEnd": 29952,
+       "domContentLoadedEventStart": 29950,
+       "domInteractive": 29800,
+       "duration": 30000,
+       "encodedBodySize": 849,
+       "loadEventEnd": 30000,
+       "loadEventStart": 30000,
+       "redirectCount": 0,
+       "size": 1149,
+     },
+     "description": "",
+     "endTimestamp": 2023-12-25T05:03:30.000Z,
+     "endTimestampMs": 1703480610000,
+     "offsetMs": 39614661000,
      "op": "navigation.navigate",
+     "startTimestamp": 2023-12-25T05:03:00.000Z,
+     "timestampMs": 1703480580000,
    },
    ObjectContaining {
      "category": "ui.click",
    },
-   ObjectContaining {
+   Object {
      "category": "ui.click",
+     "data": Object {
+       "nodeId": 42,
      },
-   ObjectContaining {
-     "category": "redux.action",
+     "message": "nav[aria-label=\"Primary Navigation\"] > div > a#sidebar-item-projects",
+     "offsetMs": 39614781000,
+     "timestamp": 2023-12-25T05:05:00.000Z,
+     "timestampMs": 1703480700000,
+     "type": "ui",
    },
  ]
    at .../utils/replays/replayReader.spec.tsx:204:22
    at Object.<anonymous> (.../jest-each/build/bind.js:81:13)
    at Promise.then.completed (.../jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../jest-circus/build/utils.js:231:10)
    at _callCircusTest (.../jest-circus/build/run.js:316:40)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at _runTest (.../jest-circus/build/run.js:252:3)
    at _runTestsForDescribeBlock (.../jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (.../jest-circus/build/run.js:121:9)
    at _runTestsForDescribeBlock (.../jest-circus/build/run.js:121:9)
    at run (.../jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (.../build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (.../build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (.../jest-runner/build/runTest.js:367:16)
    at runTest (.../jest-runner/build/runTest.js:444:34)
    at Object.worker (.../jest-runner/build/testWorker.js:106:12)

To view individual test run time comparison to the main branch, go to the Test Analytics Dashboard

[michellewzhang]

do we plan to remove the console tab for mobile replays?

[michellewzhang]

maybe we want to reduce the padding a bit below the StructuredEventData?

[c298lee]

do we plan to remove the console tab for mobile replays?

I think we should since it won't be needed anymore. I'll bring it up in tomorrow's mobile sync!