HARファイル — あなたが使っていたのに気づかなかったHTTPデバッグログ

あなたのAPI呼び出しはプロダクション環境で失敗しています。curlでは問題なく、ローカル環境でも問題ありません。サポートチームはチケットを開き、「HARファイルを共有してください」と要求します。あなたは自信を持ってうなずき、別のタブで「HARファイルとは何か」と検索します。

これはそのタブです。HARファイルについて、その中身、そして問題を実際に特定する方法について説明します。

HARファイルとは何か

HARはHTTP Archiveの略です。これは、ブラウザがセッション中にしたすべてのHTTPリクエストを記録するJSONファイルです——URL、メソッド、ステータスコード、リクエストおよびレスポンスヘッダー、リクエストおよびレスポンスボディ、クッキー、およびタイムイングの分解情報すべてが含まれます。ページ上のすべてのリクエストについての情報です。

このフォーマットはウェブパフォーマンスワーキンググループ（仕様バージョン1.2）によって標準化され、Chrome、Firefox、Safari、Edgeでサポートされています。これは、ブラウザのネットワークタブの構造化されたエクスポートと考えられます——誰かがあなたの問題をデバッグする際に、SSHアクセスを与えないでその情報を渡すようなものです。

HARファイルは、失敗が間歇的である場合、特定のブラウザで再現する場合、またはベンダーに「はい、APIが500エラーを返しており、PEBKACではない」と示すために特に役立ちます。

HARファイルをキャプチャする方法

ChromeおよびEdge

1. 開発ツール（F12 または Cmd+Option+I Mac）
2. にアクセス ネットワーク タブ
3. 失敗がリダイレクトまたはページリロード後に発生する場合、 ログを保存 問題を再現する
4. リクエストリストのどこかを右クリック →
5. 開発ツールを開く → すべてをHARとして保存（コンテンツ付き）

Firefox

1. リクエストを再現する ネットワーク タブ
2. ギアアイコンをクリック →
3. すべてをHARとして保存 開発メニューを有効にする：

Safari

1. Safari → 設定 → 高級 → 開発メニューを表示 開発 → ウェブインスペクタを表示 → ネットワーク
2. 問題を再現する
3. ネットワークツールバーにあるボタン（矢印アイコン）
4. クリック 輸出 一つ重要な点として、

：無効だと、HARは現在のページロード後のリクエストのみをキャプチャします。認証中にまたはリダイレクトチェーン中に失敗が発生する場合、空または誤解を招くファイルをキャプチャし、20分間混乱します。問題を再現する前にこれを有効にします。 ログを保存HARファイルの中身

すべてのHARファイルは同じトップレベル構造を持っています：

配列はすべての有用なデータを保持しています。各エントリは1つのリクエスト/レスポンスペアを表します。典型的なページロードは50～200エントリを生成し、複雑なSPAがダッシュボードをロードする場合、それ以上に達することもあります。

{
  "log": {
    "version": "1.2",
    "creator": { "name": "Chrome", "version": "124.0.6367.82" },
    "entries": [ ... ]
  }
}

の entries 注釈されたエントリ：重要なフィールド

1つのHARエントリの重要なフィールドを以下に分解します：

何を示すか

分野	場所	エントリ
startedDateTime	リクエストが発火した時刻（ISO 8601 UTC形式）。サーバー側ログと照合して、正確なログ行を見つけるために使用します。	リクエスト開始からレスポンス終了までの総経過ミリ秒。遅いリクエストを検索する際に並べ替えに使用する数値です。
time	リクエストが発火した時刻（ISO 8601 UTC形式）。サーバー側ログと照合して、正確なログ行を見つけるために使用します。	このリクエストを処理したIPアドレス。ロードバランサの後ろでは非常に重要——どのインスタンスにアクセスしたかを示します。
serverIPAddress	リクエストが発火した時刻（ISO 8601 UTC形式）。サーバー側ログと照合して、正確なログ行を見つけるために使用します。	GET、POST、PUT、DELETEなど
request.method	リクエスト	完全なURL（クエリ文字列を含む）。ここでの誤ったダブルエンコードパラメータに注意してください。
request.url	リクエスト	すべてのリクエストヘッダー。
request.headers	リクエスト	認証（Authorization）を含む——認証トークンはここにあります。 これはプライバシーの懸念です。 原始リクエストボディ。JSON APIの場合、これはパラメータです。APIが入力を受け入れない場合、まずこれを確認してください。
request.postData.text	リクエスト	HTTPステータスコード。0は通常、リクエストが完了する前にブロッキングされたことを意味します。
response.status	応答	レスポンスヘッダー、包括
response.headers	応答	。CORSデバッグに役立ちます。 Content-Type, Cache-Control, Set-Cookieレスポンスボディ。JSON APIの場合、これは原始JSONです。バイナリレスポンスの場合、base64エンコードされている可能性があります。
response.content.text	応答	タイムイング
timings.blocked	TCP接続スロットを待つ時間。高い値は接続プールの枯渇を示唆します。	DNS検索時間。50msを超える場合に注目し、200msを超える場合が問題です。
timings.dns	TCP接続スロットを待つ時間。高い値は接続プールの枯渇を示唆します。	TCP接続時間。高い値はネットワーク遅延またはTLSオーバヘッドを示し、サーバーの遅さではありません。
timings.connect	TCP接続スロットを待つ時間。高い値は接続プールの枯渇を示唆します。	リクエスト送信から最初のバイト受信までの時間（TTFB）。
timings.wait	TCP接続スロットを待つ時間。高い値は接続プールの枯渇を示唆します。	これは遅いAPIが現れる場所です。 高いTTFB = サーバーが応答が遅い。 レスポンスボディのダウンロード時間。レスポンスペイロードが大きい場合にのみ高い値になります。
timings.receive	TCP接続スロットを待つ時間。高い値は接続プールの枯渇を示唆します。	実際に見つけるべきもの

HARを開くとき、通常は以下の3つのうちの1つを追跡しています：

失敗したリクエスト

フィルタまたはソートする

。Chrome開発ツールでは、 response.status。失敗したリクエストを確認した後、 status-code:4xx または status-code:5xx— サーバーからのエラーメッセージはステータスコードよりも有用です。 response.content.text 遅いリクエスト

エントリを

（TTFB）で降順にソートします。高い timings.wait = サーバーが遅い。高い wait で正常な timings.connect = バリエーションはネットワークまたはTLSハンドシェイクの問題であり、アプリケーションの問題ではありません。これらはまったく異なる解決策を示しており、正しい層を特定することで、多くの時間を無駄にせず、誤った層を責めるのを防ぎます。 wait 欠落したリクエスト

時々、バグは欠落したリクエストです——ウェブ훅が発火しなかった、CORSによってブロッキングされたプリフライトOPTIONS、またはアドブロッカーが食べたアナリティクス呼び出し。HARに含まれるべきものと実際に含まれているものを見比べてください。リクエストの欠如はデータです。

知るべきプライバシー問題

HARファイルにはすべてが含まれています。これには以下が含まれます：

ヘッダー——ベアラートークン、基本認証資格情報

• Authorization ヘッダー——セッショントークン、JWT、Cookieに含まれるすべての情報
• Cookie リクエストおよびレスポンスボディ——パスワード、PII、APIキーを含む可能性がある
• Chromeは、エクスポート時にこれらを削除しません。サポートチーム、ベンダー、または社外の同僚にHARファイルを共有する前に、センシティブなフィールドを削除または編集してください。

HARファイルを共有する前に検証およびクリーンする最も速い方法は

HARファイルフォーマッター — ファイルを貼り付け、エントリを確認し、送信前に編集します。または、 あまりきれいではないワンライナーですが、これは機能します。 jq:

# Strip Authorization headers from all entries
jq '.log.entries[].request.headers |= map(select(.name | ascii_downcase != "authorization"))' file.har

Raw HARファイルを読み込む

HARファイルはJSONなので、理論的にはどんなテキストエディタでも読めます。実際には非常に大きくなります——典型的なページロードは、数百キロバイトのヘッダーとボディを深くネストされたキーに含むファイルを生成します。いくつかの方法でこれをナビゲートできます：

開発ツールにインポート

• — ChromeおよびFirefoxは、ギアアイコンを使ってHARファイルをネットワークタブにインポートできます。これはライブキャプチャと同じフィルタとソートUIを提供します。 — ブラウザベースで、インストール不要。開発ツールを使わない人向けに便利です。
• — ファイルを貼り付け、エントリを確認し、送信前に編集します。または、 — コマンドラインでのフィルタリングに使用。
• jq すべての失敗したリクエストとそのURLを秒単位で抽出します。 jq '.log.entries[] | select(.response.status >= 400) | {url: .request.url, status: .response.status}' 迅速な分析およびフィルタリングのために、

は最も速いです。共有および視覚的な検証のために、ブラウザインポートまたはオンラインフォーマッターを使用することで、相手が jq を知らなくてもよいです。 jq HARファイル — あなたが知らなかったHTTPデバッグログ

あなたも好きかもしれません