9月になりましたが、まだまだ暑い日が続きますね、昼間に出歩く際にはネックリングが手放せない菅野です。

Webアプリケーションで問題があった際には、よくブラウザの開発者ツール等を確認してエラーや、遅延の原因を探ったりしますよね。
今回は上記のようなエラー解析、問題解析をChatGPTで簡単に実施できないか検証していきます。
とはいえ、ブラウザの開発者ツールをそのままChatGPTに渡すことはできないため、開発者ツールから生成したHARファイルをChatGPTのAdvanced Data Analysisで解析してもらいます。

「Advanced Data Analysis」というのは、少し前まで「Code Interpreter」と呼ばれていたChatGPTの機能のことです。
名称変更されただけで挙動は変わっていないようです。
個人的には「Code Interpreter」の方が好きだったのですが、少し寂しい気持ちになりました。。。

今回の検証ではGPT-4を用います。

HARファイルとは？

HAR（HTTP Archive）ファイルは、Webブラウザのセッション中に行われるHTTPトランザクションを記録するためのファイルフォーマットです。
HARファイルには以下のような情報が含まれています。

項目	説明
リクエストとレスポンスの詳細	各リソース（画像、スクリプト、スタイルシートなど）のURL、HTTPメソッド、レスポンスコード、ヘッダー、クエリパラメータ、クッキーなど
タイミング情報	リソースの読み込みにかかる時間、各フェーズ（DNSルックアップ、接続、待機、受信など）の持続時間など
ページのリダイレクト	リダイレクトされたURLやその応答
ブラウザ情報	ブラウザの名前、バージョン、ユーザーエージェント文字列など

問題解析対象のWebアプリ

HARファイルの問題解析を実施する対象として、実際に問題のある挙動をするアプリケーションを作成します。
リクエストに遅延が発生するようなWebアプリケーションをAngularと、json-serverで作成します。

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private http: HttpClient) {}
  title = 'NetWorkError test'

  ngOnInit() {
    this.http.get('http://localhost:5000/data').subscribe({
      next: (data) => {
        console.log(data);
      },
      error:  (error) => {
        console.error('Error fetching data:', error);
      }
    });
    this.http.get('http://localhost:5000/notfound').subscribe({
      next: (data) => {
        console.log(data);
      },
      error:  (error) => {
        console.error('Error fetching data:', error);
      }
    });
  }
}

httpリクエストを用い、画面起動時にAPIリクエストを二件実施するように実装しています。
うち一件は実装していないURLにリクエストを送るようにし、404エラーが出るようにしています。

(前略)
<div class="content" role="main">
  <img src="../assets/9999x9999.jpg" width="200px" height="200px">
(後略)

大きな画像を読み込ませた場合に検出できるのかを確認するために、9999px四方のダミー画像（約1.4MB）を表示するようにしています。

json-servreでのAPI実装は以下のようになっています。

const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();

server.use(middlewares);

// 全リクエストに遅延を挿入
server.use((req, res, next) => {
  setTimeout(next, 2000); // 2 秒の遅延
});

server.use(router);
server.listen(5000, () => {
  console.log('JSON Server is running on port 5000');
});

APIに対するすべてのリクエストに2秒の遅延を含ませるようになっています。

HARファイルの作成

では、上記アプリケーションに実際にアクセスしてHARファイルを作成しましょう。
今回はChrome利用しますが大抵のブラウザで同じような操作ができるはずです。

Chromeでlocalhost:4200にアクセスします。

F12キーを押して開発者ツールを起動し、ネットワークタブを開きます。

DevToolsを開いてからは通信をまだ行っていない為、F5キーを押して画面をリロードし、通信を実行させます。

通信結果のNameカラム部分を右クリックし、Save all as HAR with contentを選択します。

名前を付けて保存ウィンドウが開くので任意の場所に任意の名前で保存してください。

HARファイルの解析

早速作成したHARファイルをChatGPTのAdvanced Data Analysisで解析してみましょう。

リクエスト内容のサマリを表示して、解析してくれるのはうれしい部分ですね。
問題点のカテゴリ分けをするよう依頼すると以下のカテゴリの問題を上げてくれました。

パフォーマンス
- レスポンスの遅いAPIや、JavaScriptファイルの読み込みを検出しています。
ステータスのエラー
- HTTP404となったAPIが検出されています。
リソースのサイズ
- サイズの大きいJavaScriptや画像ファイルが検出されています。

それぞれのカテゴリに、今回意図通りに含めた問題も検出できているようです。
今回のサンプルアプリは、APIの呼び出しやリソースの読み込みは、数が限られるので、目視でも確認ができますが、もっと多かったり、画面も複数あったりすると、目視での確認はなかなか大変だと思います。
そのような場合でも、ChatGPTを使うことで、スムーズに問題を確認することができます。

まとめ

ブラウザの開発者ツールから出力されるHARファイルの解析をChatGPTのAdvanced Data Analysis機能を用いて実施しました。
今回は簡単な例をサンプルに実行しましたが、より複雑なHARファイルの解析でも瞬時に実施でき怪しい部分の見立てをしてもらえるだけでもだいぶ効率的な作業が出来そうです。
人力で分析する前に、まずはChatGPTに意見を聞いてみるというのを試してみる価値がありそうですね。
今後もChatGPTの活用方法を模索していこうと思います。
それでは。

Acroquest Technologyでは、キャリア採用を行っています。

ディープラーニング等を使った自然言語／画像／音声／動画解析の研究開発

Elasticsearch等を使ったデータ収集／分析／可視化

マイクロサービス、DevOps、最新のOSSやクラウドサービスを利用する開発プロジェクト

書籍・雑誌等の執筆や、社内外での技術の発信・共有によるエンジニアとしての成長

　少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。 www.wantedly.com