chrome://tracing で並列処理の可視化をしてみたらすごく便利だった話

前回「ブログズミ: [C++] -ftime-trace オプションと Chrome でビルド時間の可視化」の続きです。

chrome://tracing の活用として iutest で使用している CI サービスの並列具合を調べて可視化してみました。

レポート集計の構成

各 CI サービスから並列具合を可視化するために使用したのは、 Intergromat と Google スプレッドシートの２つです。
構成は下図のようになっています。

まず各 CI サービスからはジョブごとに処理の開始・終了時に、Integromat で用意した Webhook URL に情報を送信します。

各 CI サービスで並列化する方法は ci-parallel リポジトリ の YAML を確認してください。

Webhook には「CIサービス名」「commit hash」「名前」「並列番号」「時刻」「開始・終了イベント」などの情報が付与されて来ます。

その情報から、Integromat で Google Drive から CI サービスごとのスプレッドシートを検索し、そこにコミットごとにシートを作成して情報を書き込みます。

そこから Chrome の tracing で表示するための json ファイルに GAS を使って変換しダウンロードします。

あとは、ダウンロードした json ファイルを tracing で読み込めば可視化が完成です。

tracing 用 json への出力

chrome://tracing の json フォーマットはこちらを参考にしました。

Trace Event Format - Google ドキュメント

また、GAS を使って json ファイルをダウンロードする部分は「【GAS】スプレッドシートからCSVをダウンロードする1クリックボタン/メニューを作成しよう - ポンコツエンジニアのごじゃっぺ開発日記。」を参考に作成しました。

function getData() {  
  var sheet = SpreadsheetApp.getActiveSheet();
  var maxRow = sheet.getLastRow();//行数 -
  var maxColumn = sheet.getLastColumn();//列数 |
  var keys = [];
  var ret = [];

  //1列目のkeyの名前取得
  for (var x = 1; x <= maxColumn; x++) {
    keys.push(sheet.getRange(1, x).getValue());
  }

  var base = 0;
  //データ
  for (var y = 2; y <= maxRow; y++) {
    var json = {};
    for (var x = 1; x <= maxColumn; x++) {
      var k = keys[x-1];
      var v = sheet.getRange(y, x).getValue();
      if( k == "ts" ) {
        var d = new Date(v);
        if( base == 0 ) {
          base = d.getTime();
        }
        v = (d.getTime() - base) * 1000;
      }
      
      json[k] = v.toString();
    }
    ret.push(json);
  }

  //整形してテキストに
  return JSON.stringify(ret, null, '\t');  
}

行のヘッダー名と要素は Integromat で tracing フォーマットに合わせて書き出しているので、ほぼほぼそのまま json にしています。

時間だけ最初のレコードを起点にした差分時間に変換しています。

結果

こんな感じになりました。

詳細は ci-parallel リポジトリを確認してください。

最後に

CI サービスの並列具合を可視化しようと思い、最初は BI ツールを転々と試していたのですが、 tracing がベストマッチでした。

もちろん何をどのように可視化したいかによって、 BI ツールを使うべき場合もありますが、可視化の選択肢として tracing は覚えておいて損はなさそうです。

そして、今回は単純な Duration イベントのみを使いましたが、他のイベントも使うともっといろいろな表現ができそうです。

参考：「パフォーマンス計測に困らない！tracing活用術100 - Qiita」

メモリの追跡はありですね。やってみようかな。

あと、今回はスプレッドシート使いましたが、BigQuery とか使ったほうがイケてるのかな？
この辺今まで触ってこなかったので覚えていきたいですね。

宣伝

「#技術書典　応援祭」始まりました。
「あつまれ CI サービス　タダではじめる継続的インテグレーション生活」の PDF 版を販売してます。
よろしくお願いします :Dhttps://t.co/igsHDPy9P2
BOOTH でも販売中https://t.co/Ks4GhSE9ib

— ずみっくす@あつまれCIサービス (@srz_zumix) March 7, 2020

「技術書典　応援祭」で販売した本には今回調べた並列処理の比較はありませんが、次回作に向けて鋭意活動中です。そちらには収録を予定しています。

「あつまれ CI サービス　タダではじめる継続的インテグレーション生活」は現在 BOOTH にて販売中です。

既刊および次回作をよろしくおねがいしますmm

今回は以上です。では。