async awaitのプロファイル

インストール

リポジトリ：https://github.com/ponyopoppo/async-profiler

注意：node.jsのバージョンは12以上であることが前提

yarn add async-profiler

使用例

tsconfig.jsonに必要なものを追加する。target, lib, sourceMapに注意。

{
    "compilerOptions": {
        "baseUrl": ".",
        "outDir": "dist",
        "module": "commonjs",
        "target": "es2017",
        "lib": ["es2017"],
        "sourceMap": true,
        "moduleResolution": "node"
    },
    "include": ["index.ts"]
}

import {
    enableProfiler,
    getResultForAnnotation,
    getResultTable,
} from 'async-profiler';
import * as express from 'express';
enableProfiler(__dirname);

const sleep = async (ms: number) =>
    new Promise<void>((resolve) => setTimeout(resolve, ms));

async function main() {
    await sleep(100);
    await sleep(300);
}

const app = express();

app.get('/heavy', async (_req, res) => {
    await main();
    res.send({ ok: true });
});

app.get('/profiletable', (_req, res) => {
    res.send(getResultTable({ newRootDir: '.' }));
});

app.get('/annotations', (_req, res) => {
    res.send(getResultForAnnotation({ newRootDir: '.' }));
});

const PORT = 3011;
app.listen(PORT, () => {
    console.log(`Run following commands:

    curl localhost:${PORT}/heavy
    curl localhost:${PORT}/profiletable
    curl localhost:${PORT}/annotations > annotations
    `);
});

出力

┌──────────────────┬───────┬──────┬───────┬──────┬─────┬─────┐
│ position         │ name  │ sum  │ count │ mean │ p95 │ p99 │
├──────────────────┼───────┼──────┼───────┼──────┼─────┼─────┤
│ ./index.ts:19:19 │ ()    │ 2055 │ 5     │ 411  │ 414 │ 414 │
├──────────────────┼───────┼──────┼───────┼──────┼─────┼─────┤
│ ./index.ts:12:20 │ main  │ 2045 │ 5     │ 409  │ 410 │ 410 │
├──────────────────┼───────┼──────┼───────┼──────┼─────┼─────┤
│ ./index.ts:20:11 │ ()    │ 2044 │ 5     │ 408  │ 412 │ 412 │
├──────────────────┼───────┼──────┼───────┼──────┼─────┼─────┤
│ ./index.ts:14:11 │ main  │ 1515 │ 5     │ 303  │ 304 │ 304 │
├──────────────────┼───────┼──────┼───────┼──────┼─────┼─────┤
│ ./index.ts:13:11 │ main  │ 522  │ 5     │ 104  │ 106 │ 106 │
├──────────────────┼───────┼──────┼───────┼──────┼─────┼─────┤
│ ./index.ts:9:15  │ sleep │ 6    │ 10    │ 0    │ 1   │ 1   │
└──────────────────┴───────┴──────┴───────┴──────┴─────┴─────┘

VSCode extensionを使う

インストール

https://github.com/ponyopoppo/vscode-custom-annotator

cd ~
git clone [email protected]:ponyopoppo/vscode-custom-annotator.git
cd vscode-custom-annotator
yarn && yarn package
code --install-extension vscode-custom-annotator-0.0.1.vsix

使い方

Ctrl-CMD-P -> custom-annotator: Load fileで、生成されたannotationsファイルを指定する。

ソースマップがうまく機能していない場合

yarn add source-map-support

import 'source-map-support/register';
// index.tsの最初