Implement performance profiling and trace file generation

[BioPhoton]

Related:

• Utils
  • epoch clock util- refactor: implement epoch clock logic #1204
  • PerformanceObserver sink feat(utils): add performance observer #1206
  • Chrome DevTools Extensibility API utils- refactor: add extensibility API helper #1207
  • File sink class text and jsonl - feat(utils): add file sink classes #1210
  • Trace file sink classe -
  • Process handler for save and fatal exit -
• Types
  • extended perf_hooks type -
• Profiler
  • Measure configuration tracks, colours -
  • Measure utils marker, mark, measure, measureAsync -
  • Observe measures and save exit flush -

The goal is to enable Browser functionality in the NodeJS environment, specifically the Extensibility API used for Performance profiling.

Example - NodeJS code:

// Mark used to represent the start of the image processing task
// The start time is defaulted to now
const imageProcessinTimeStart = performance.now();

// ... later in your code

// Track entry representing the completion of image processing
// with additional details and a tooltip
// The start time is a marker from earlier
// The end time is defaulted to now
performance.measure('Image Processing Complete', {
  start: imageProcessinTimeStart,
  detail: {
    devtools: {
      dataType: 'track-entry',
      track: 'Image Processing Tasks',
      trackGroup: 'My Tracks', // Group related tracks together
      color: 'tertiary-dark',
      properties: [
        ['Filter Type', 'Gaussian Blur'],
        ['Resize Dimensions', '500x300'],
      ],
      tooltipText: 'Image processed successfully',
    },
  },
});

Example Traces

Usage

const profiler = new Profiler({
  outputPath: 'trace-output.json',
  spans: {
    analysis: { track: 'Analysis', group: 'Tools', color: 'primary' },
    io: { track: 'I/O', group: 'Tools', color: 'secondary' },
  },
});

const taskLoadConfig = profiler.mark('start-loadConfig', {
  detail: profiler.spans.io({
    properties: [['Config File', 'code-pushup.config.json']],
  }),
});
profiler.measure('run-loadConfig', taskLoadConfig);

# Profile Code PushUp CLI
CP_PROFILING=true npm @code-pushup/cli
# Or Profile with Code PushUp NxPlugin
nx run @code-pushup/nx-plugin:cli --profiling --profiling-output=trace.json

# Both write the trace to the file system

References

• https://docs.google.com/presentation/d/1P6_HS6PFwdf_L2W3RsS_1nJn7UugCrEm6U41yDEnqbQ/edit?slide=id.p#slide=id.p
• https://developer.chrome.com/docs/devtools/performance/extension?hl=de#tracks