reg-viz / storycap

A Storybook Addon, Save the screenshot image of your stories :camera: via puppeteer.
https://www.npmjs.com/package/storycap
MIT License
705 stars 89 forks source link

Record CPU traces from screenshot runs #791

Closed Mike-Dax closed 1 year ago

Mike-Dax commented 1 year ago

This builds on https://github.com/reg-viz/storycap/pull/790 and https://github.com/reg-viz/storycap/pull/789, happy to rebase as needed.

When debugging performance problems with screenshots, it's helpful to have a flamegraph of what's taking time.

It's difficult to mount a debugger into the internal story isolate. This PR enables a --trace cli option that records a Chromium CPU trace of the screenshot and saves it alongside the screenshot filename.png as filename_trace.json.

This trace can be imported into Chrome's Performance Flamegraph or https://ui.perfetto.dev/ for viewing.

image

This is especially helpful for situations like:

image

Despite the screenshot not succeeding, the trace of the last attempt will still be written, and we can plainly see that this particular screenshot continues work forever, never giving the metrics a chance to stabilise:

image

Quramy commented 1 year ago

thx!