Add support for visualizing CPU Profile

[slonka]

...gathered by CpuProfiler::StartProfling.

As suggested in the comment: #196 (comment) here is an example https://github.com/slonka/0x-visualize-v8-profile-example of how to generate v8 profile at runtime and a flamegraph from it.

Example flamegraph looks like this:

There is a couple of things that this PR is missing:

• tests
• merged / unmerged
• optimized / unoptimized could probably be taken from "bailout reason"
• I do not know how 0x detects tiers

But the basic functionality is there. Would love help improving this.

[mcollina]

Can you add some docs and how to generate those profiles?

If tests could be added, go for it. This repo is really low on tests.

[slonka]

@mcollina you just go into the example repo I linked to https://github.com/slonka/0x-visualize-v8-profile-example, clone it, run npm i and ./test.sh and you can see the flamegraph.html in the folder

[mcollina]

Can you add that code in the https://github.com/davidmarkclements/0x/tree/master/examples and add a section about it in the README?

[slonka]

Yeah sure, I thought that you had problems running the example.

[mcollina]

LGTM

[slonka]

How about merged vs unmerged? How they differ / is there an algorithm to convert them? How about optimized vs unoptimized?

[mcollina]

I think you can’t provide that info through that output. We can detect that by parsing the isolate.log file.

The buttons can either do nothing, or we can grey them out in this case.

[davidmarkclements]

can you please either

1. add merge/unmerge functionality if it's possible with the data
   OR
2. disable merge button

[slonka]

Sure, can you help me with understanding the merging algorithm?

[davidmarkclements]

hey @slonka it might not apply here - I'll described and see if it fits v8-profile visualizing:

with the current method, (using --prof) a JS function and a captured frame are slightly different. A frame is the JS function compiled by the JIT, so a single JS function typically has two forms: optimized, and unoptimized. This creates duplicates within the flame graph - and causes more branching in the stacks as different functions are optimized at different points (thus creating new frames in stacks) during the sampling.

The merge button removes the optimized/unoptimized information, but groups both function states into the JS function which creates a simplified graph.

Does this make sense?

[slonka]

Yes, sure. How can I disable the "merge" button?

[davidmarkclements]

if the v8-profiler doesn't differentiate between optimized/unoptimized we'll also need to disable the Optimized Unoptimized buttons as well

Additionally the filter buttons – possibly many of those don't apply? They should also be disabled

The buttons are HTML buttons so can have a disabled attribute set, this is passed down to a basic function component here:

https://github.com/davidmarkclements/0x/blob/master/visualizer/cmp/controls.js#L3-L15

and they're called here: https://github.com/davidmarkclements/0x/blob/master/visualizer/cmp/controls.js#L19-L33

you might need to adjust/add to the state (https://github.com/davidmarkclements/0x/blob/master/visualizer/state.js) to determine whether a button should be disabled,

the state is initialized in the visualizer here: https://github.com/davidmarkclements/0x/blob/master/visualizer/index.js#L52

and options can be passed to the visualizer from here: https://github.com/davidmarkclements/0x/blob/master/lib/render.js#L23

[slonka]

@davidmarkclements - I disabled the buttons when flamegraph is generated from v8 profiler output.

It looks like this:

[mcollina]

LGTM

[slonka]

BTW, this repo needs more tests definitely because the previous version broke the tool and I only noticed when I wanted to use it with different switches. I'll open a new PR for that.

[mcollina]

@slonka some tests have been added in the last week. You might want to rebase.

[slonka]

I did the rebase, any chance to get this merged? @mcollina @davidmarkclements

[davidmarkclements]

amazing PR @slonka sorry it took so long, I'm just going to rename it to --visualize-cpu-profile – especially in light of nodejs/node#27147

[davidmarkclements]

renaming commit here:
d5c8d3b

[slonka]

Thanks for merging this 🎊

[slonka]

Are you sure the format of --cpu-prof matches the one provided here?

[davidmarkclements]

No, however I expect it to be very similar to the extent that a tweak or two will make it work for both scenarios