How to merge JS profiler traces into a Perfetto trace file

[hrishid]

Here are the steps to merge JS profiler traces into Perfetto in order to analyze them side-by-side in Perfetto UI.

The JS Profiler trace and Perfetto trace files are located in a session specific sub-directory e.g. 2024-11-13_15-27-56 under generated directory of your App project.

Perfetto trace file has a naming convention iter_*_vs_trace whereas JS profiler trace file has a naming convention iter_*_trace*-original.json.

Follow the below steps to merge the JS function traces into Perfetto Trace file to analyze them side by side in Perfetto UI https://ui.perfetto.dev/

[1] Convert Perfetto Trace File to JSON

1. Go to https://ui.perfetto.dev/ and open the Perfetto binary file iter_*_vs_trace and click on Convert to .json in the left hand pane
   
   

This will download a file called trace.json to your Downloads directory. Rename this file to iter_*_vs_trace.json to have the same naming convention as the Perfetto binary file.

[2] Merge JS Profiler trace file Perfetto trace file

1. Open the JS Profiler trace file iter_*_trace*-original.json in a text editor and copy the JSON Array objects
   e.g.

[
//Copy Start
    {
        "ts": 10281056953,
        "pid": 2,
        "tid": 29,
        "ph": "B",
        "name": "[root]",
        "cat": "root",
        "args": {
            "name": "[root]",
            "category": "root",
            "url": null,
            "line": null,
            "column": null,
            "params": null,
            "allocatedCategory": "root",
            "allocatedName": "[root]"
        }
    },
    ...
//Copy end
]

2. Open the Perfetto trace JSON file iter_*_vs_trace.json created in above step [1] Convert Perfetto Trace File to JSON
3. Paste the JS profiler trace events inside the “traceEvents” array of the Perfetto Trace JSON file e.g.

{"traceEvents":[
//Paste the JS Profiler trace events here

 // copy all objects from the JSON array of JS Profiler trace events (without the array delimiters - '[' , ']')
// include "," after the last JSON array object to avoid JSON array syntax errors

//Keep existing perfetto trace events unchanged
....
{"args":{"name":"foo"},"cat":"bar","name":"thread_name","ph":"M","pid":0,"tid":0,"ts":0}, 

Note: “pid” in CPU profiler trace file doesn’t align with “pid” in Perfetto trace file. This can lead to incorrect process name being shown for CPU profiler track events in Perfetto UI. To avoid process name confusion, it is best to replace the pid in CPU profiler trace file with the PID of App process (found in perfetto traces).

4. Save the file as iter_*_combined-js-profiler-perfetto-traces.json
5. Open the merged file in ui.perfetto.dev to analyze JS profiler output along side Perfetto traces
6. Search for [root] in the Perfetto search to find the JS profiler traces swimlane