Empty cpu profile in chrome devtool

[darren-fp]

I tried to generate a cpu profile using the example here and it outputedt a cpu profile roughly 1.3MB in size but for some reason the cpu profile seems to be empty in chrome devtools

CPU profile: checkboxgroup.cpuprofile

This is how I instrumented the profiler

import * as fs from 'fs';
import * as v8Profiler from 'v8-profiler-next';

v8Profiler.setGenerateType(1);
const title = 'checkboxgroup';

describe('CheckboxGroup', () => {
  v8Profiler.startProfiling(title, true);
  afterAll(() => {
    const profile = v8Profiler.stopProfiling(title);
    profile.export(function (error, result: any) {
      // if it doesn't have the extension .cpuprofile then
      // chrome's profiler tool won't like it.
      // examine the profile:
      //   Navigate to chrome://inspect
      //   Click Open dedicated DevTools for Node
      //   Select the profiler tab
      //   Load your file
      fs.writeFileSync(`${title}.cpuprofile`, result);
      profile.delete();
    });
  });
  
  // tests...
  it('should...')
});

These are the versions that I am using

• Chrome: Version 123.0.6312.107 (Official Build) (x86_64)
• v8-profiler-next: 1.10.0

Is there something wrong that I am doing here? Thanks in advance!

[windschaser]

Same problem. Just use Chrome with older version, the profile displays well on version 101 base on my test.

[CyanCode]

I think this might still be an issue? When attempting to load the cpuprofile in Chrome's performance tab I'm seeing the following error: Malformed timeline data: [formatjs Error: MISSING_VALUE] The intl string context variable "PH1" was not provided to the string "Malformed timeline data: {PH1}"

[CyanCode]

Update: I was able to fix this by using profiler.setGenerateType(1);. I think modern Chrome just doesn't like the old flat version of the cpuprofile file.

[windschaser]

import * as inspector from 'node:inspector';
import * as V8 from 'node:v8';
import * as fs from 'node:fs';
import { uuid, wait } from '@/util/index';
import { tmpPath } from '@/util/filePath';

export function createProfiler() {
    const session = new inspector.Session();
    session.connect();
    return {
        /**
         * return cpu profile
         * @requires node:inspector  legacy callback style
         * @requires node:inspector/promises  promise style(from node:20)
         * @param duration ms
         */
        async cpu(duration: number) {
            await new Promise((resolve, reject) => {
                session.post('Profiler.enable', err => {
                    if (err) return reject(err);
                    session.post('Profiler.start', err1 => {
                        if (err) return reject(err1);
                        resolve(undefined);
                    });
                });
            });
            await wait(duration);
            const profile = await new Promise<inspector.Profiler.Profile>((resolve, reject) => {
                session.post('Profiler.stop', (err, params) => {
                    if (err) return reject(err);
                    resolve(params.profile);
                });
            });
            const tmpFile = tmpPath + uuid() + '.cpuprofile';
            await fs.promises.writeFile(tmpFile, JSON.stringify(profile));
            return tmpFile;
        },
        /**
         * return heap snapshot
         */
        heap() {
            const tmpFile = tmpPath + uuid() + '.heapsnapshot';
            V8.writeHeapSnapshot(tmpFile);
            return tmpFile;
        },
        close() {
            session.disconnect();
        },
    };
}

Actually, writing basic functionality yourself is quite simple; you can just use Node.js's built-in modules. @CyanCode