Implement performance profiling and trace file generation

[BioPhoton]

Implementation Plan

Utils

• Browser
  • Chrome DevTools Extensibility API - refactor: add extensibility API helper #1207
  • Measure utils - feat(utils): measure utils #1211
• NodeJS
  • epoch clock- refactor: implement epoch clock logic #1204
  • PerformanceObserverSink feat(utils): add performance observer #1206
  • WriteAheadLog files and trace event WAL utils - feat(utils): add WriteAheadLog classes #1210
  • Trace format helper - feat: add trace event utils #1215
  • Process handler for close and error exit - feat: add process exit handler #1212
  • extended perf_hooks type - feat(utils): performance TS ext #1213

Profiler

• Docs -
• "CodePushup Profiler" -
• Debug Mode and state handling -
• Browser
  • Measure API - feat: add profiler class and measure API #1216
• NodeJS
  • Implement ShardedWriteAheadLog - refactor: use sharded WAL #1231
    • refactor: simplify trace types and helper #1236
    • refactor: refactor sharded wal to handle coordinator #1237
  • Implement installExitHandler - fix: add exit handler to profiler #1221
  • Implement PerformanceObserverSink - feat(utils): add NodeJS profiler #1219

Usage

• setup -
• cli (primary-dark) -
• core (primary) -
• utils,models (primary-light) -
• plugins -

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