[DevTools Bug]: Can’t import chrome trace into react devtools

[dinkinflickaa]

Website or app

https://tsk9sq.csb.app/

Repro steps

1. Go to the page and open devtools
2. Go to performance tab and start recording
3. Interact with the application
4. Stop recording
5. Download trace
6. Upload to react devtools
7. Expected - React timeline tab should display trace
8. Actual - React devtools fails to import the trace and shows an error - "e.sort is not a function. Try importing another Chrome performance profile."
   

I think its is an issue with how we are parsing the chrome trace here.
Chrome outputs the trace file in the following format:

{
  "traceEvents": [
    {"name": "Asub", "cat": "PERF", "ph": "B", "pid": 22630, "tid": 22630, "ts": 829},
    {"name": "Asub", "cat": "PERF", "ph": "E", "pid": 22630, "tid": 22630, "ts": 833}
  ],
  "displayTimeUnit": "ns",
  "systemTraceEvents": "SystemTraceData",
  "otherData": {
    "version": "My Application v1.0"
  },
  "stackFrames": {...}
  "samples": [...],
}

but react devtools expects the file to contain only traceEvents array.
React DevTools should be able to handle both formats because they are valid according to this document: https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/preview

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

[abhayrsr]

Hi, I'm new to open source. would love to work on this bug.

[ant1m4tt3r]

indeed, had the same issue on my side. i believe it is a simple fix from what i saw in the codebase. are you working on it @abhayrsr ? let me know if you need help with that!