HAR ファイルの生成と Web リクエストの分析

パフォーマンスのトラブルシューティング ツールに関するベスト プラクティス

このページの内容

お困りですか?

アトラシアン コミュニティをご利用ください。

コミュニティに質問

目的

HAR is the short form for HTTP Archive format, which tracks all the logging of a web browser's interaction with a site.

特に以下のような問題では、問題のトラブルシューティングに HAR ファイルが必要となる場合があります。

  • Performance Issue: slow page load, timeouts when performing a specific task
  • Page rendering: incorrect page format, missing information

First-line troubleshooting can be conducted by following this guide. Providing this information to the support team will help speed up troubleshooting.

はじめる前に

Please be sure to take note of the Supported Platforms page for the supported browser types.

It is highly recommended that multiple HAR files be generated for comparison. Below are guidelines for effective information gathering:

  1. Generate a HAR file for an unaffected page (without performance or page rendering issues). Example. Dashboard, Issue View, Issue Search, and Project page.
  2. Generate a HAR file for an affected page. Generate multiple times to get a better average and capture consistent timing

ソリューション

 Below demonstrates how HAR files are generated depending on your browser variant. 


Chrome

Chrome

Using Chrome to generate HAR files is recommended because it natively provides the Developer Tools to facilitate this. You can visit this link to learn more about Chrome's developer tools.

ツールセット

Chrome is bundled with a set of Developer Tools, as covered in the above link.

JavaScript エラー

Chrome コンソールを確認し、JavaScript エラーを探します。 

ネットワークの問題

サポートの問題を診断するには、ネットワーク タブを使用できます。

  1. Chrome を開き、開発者ツールを有効にします。
  2. ネットワーク タブを選択します。
  3. ログの保存を有効化します。
  4. 問題のあるページを読み込みます。
  5. 読み込みが完了するまで待ちます。
  6. エラーを確認し、エラーの意味を「HTTP/1.1 ステータス コード」で確認します。

Atlassian Support may also request a browser debug log. If this information has not been requested, skip to "Providing Information to Support."

追加のブラウザ ログを有効化する方法:

  1. --enable-logging --v=1"」パラメーターを付与してブラウザを起動します (主要なプラットフォームでの手順についてはこの記事をご参照ください)。
  2. A file called "chrome_debug.log" will be generated in the Chrome user default location.

サポートに情報を提供する

  1. 次のいずれかの方法で開発者ツールを起動します。
    • キーボード ショートカット (OS X では ⌘⌥I、Linux では Ctrl + Shift、Windows では F12) を使用する
    • From Chrome MenuChrome メニュー At the top-right of your browser window, select Tools > Developer Tools.
  2. 開発ツールネットワークタブに移動します。
  3. Check the Disable Cache option to prevent caching of resources for this specific page.
  4. Refresh the page to start capturing the browser and server traffic.

     Please capture a full page load so we can see the requests made before the problem we're analyzing.

  5. Complete the steps that trigger or demonstrate your issue.
    (info) The Developer Tools won't open by default if the error happens on a pop-up. We need to go into the Developer Tools configurations Preference tab and enable "Auto-open DevTools for popups" in the Global section
  6. ネットワーク レコードが表示されている領域で右クリックし、[コンテンツを含む HAR として保存] をクリックします。

  7. Before sending the HAR file to Atlassian, ensure that any sensitive information is removed/censored using a text editor (that is, remove passwords, secrets, etc.).
Firefox

Firefox

ツールセット

Firefox には、トラブルシューティングに使用できる開発者ツールのセットが埋め込まれています。

JavaScript エラー

コンソールで JavaScript エラーを確認します。

ネットワークの問題

Access the Network tab within the Firefox Developer Tools to check for any network errors. For further info on HTTP codes, please look through HTTP/1.1 Status Codes.

サポートに情報を提供する

  1. [ツール] > [Web Developer] > [ネットワーク]に移動します。
  2. 歯車アイコン > [Persist logs] をクリックします。
  3. Refresh the page to start capturing the browser and server traffic.
    • Note: Please capture a full page load so we can see the requests made before the problem we're analyzing.
  4. 問題のトリガーとなった、または問題を示す手順を完了します。
  5. [エクスポート] > [名前を付けて保存...] の順にクリックし、HAR ファイルを保存します。
  6. Before sending the HAR file to Atlassian, ensure that any sensitive information is removed/censored using a text editor (that is, remove passwords, secrets, etc.).

コンソールのエクスポートも役立つ場合があります。

Internet Explorer

Internet Explorer / Edge

ツールセット

Internet Explorer supports the Developer Toolbar. Additionally, Fiddler is a third-party application often used to debug browser problems.

JavaScript エラー

Look through the Microsoft Using the F12 Tools Console to View Errors and Status KB to see how to identify JavaScript errors.

ネットワークの問題

Microsoft's Using Windows Internet Explorer Developer Tools Network Capture KB can be used to identify how to diagnose network issues. For further info on HTTP codes, please look through HTTP/1.1 Status Codes.

サポートに情報を提供する

Occasionally, we'll need to request a copy of that data to review it. To do so, please go through the following: 

Microsoft Edge

Microsoft Edge

ツールセット

Microsoft Edge has built-in Developer tools.

JavaScript の問題

コンソール タブで JavaScript エラーを確認します。

ネットワークの問題

サポートの問題を診断するには、ネットワーク タブを使用できます。

  1. 組み込みの開発者ツールを開きます。
  2. ネットワーク タブを選択します。
  3. 問題のあるページを読み込みます。
  4. 読み込みが完了するまで待ちます。
  5. エラーを確認し、エラーの意味を「HTTP/1.1 ステータス コード」で確認します。

サポートに情報を提供する

  1. F12 キーボード ショートカットキーを使用して開発者ツールにアクセスします。

  2. Refresh the page to start capturing the browser and server traffic. 

    • Note: Please capture a full page load so we can see the requests made before the problem we're analyzing.

  3. 問題のトリガーとなった、または問題を示す手順を完了します。
  4. [HAR としてエクスポート] (開発者ツールの停止ボタンの横にあるフロッピー ディスク ボタン) をクリックし、[名前をつけて保存...] を選択して HAR ファイルを保存します。
Safari

Safari

ツールセット

Safari comes with its own Safari Web Development Tools, as described in that link.

JavaScript の問題

Apple has put together a Using the Error Console guide detailing how to find JavaScript errors.

ネットワークの問題

Please look through the Safari Web Inspector Guide documentation and follow the details to look for any network errors. The  HTTP/1.1 Status Codes page is an excellent resource for identifying what those HTTP status codes mean.

Providing HAR file to Support

  1. Go to the Network tab of the Web Inspector.
  2. Make sure the checkbox for Disable Caches is ticked.
  3. Refresh the page to start capturing the browser and server traffic. 
    1. Note: Please capture a full page load so we can see the requests made before the problem we're analyzing.
  4. 問題のトリガーとなった、または問題を示す手順を完了します。
  5. Click on Export (the button is near the Disable Caches checkbox).

Providing Timeline Recording to Support

  1. Go to Developer tools and choose "Start Timeline Recording."
  2. すべての対象を選択してタイムライン記録します。
  3. Refresh the page to start capturing the browser and server traffic. 
    1. Note: Please capture a full page load so we can see the requests made before the problem we're analyzing.
  4. 問題のトリガーとなった、または問題を示す手順を完了します。
  5. [保存] をクリックします。下向きの矢印の付いた円です。

タイムライン記録を視覚化する

To visualize Timeline Recordings generated by Safari, you need to:

  1. Safari の [設定] > [詳細] に移動します。
  2. Mark the "Show Develop menu in the menu bar" checkbox. 
  3. That will enable the Develop menu, where you can find "Show Web Inspector."
  4. Web インスペクター エリアの上部で、[タイムライン] をクリックし、右側の [読み込む] をクリックします。

Web リクエストの分析

The steps taken to analyze the Web Requests captured by the HAR file vary depending on the troubleshooting Performance or Page Rendering issue.

A common tool to view the generated HAR files is HAR Viewer, available as a web application.

パフォーマンスの問題のトラブルシューティング

The relevant information for performance issues is the load time and which request is causing the delay in the browser serving the content to the user. So, an understanding of the definitions used for Web Request is required for effective troubleshooting; see below:

The below is extracted from a HAR file loaded in HAR Viewer or Google's tool, HAR Analyzer.


HAR ファイルの読み込み後に Web リクエストを強調表示すると、次の情報が表示されます。

Request start time since the beginning

The highlighted request is called after how long from the initial request. Example: Like below, +6.32s means the current request is being called 6.32 seconds after the initial request (Most of the time, the HTML request is the initial one)

Waiting

Amount of time waiting for the server to respond. If this value is high, it could mean:

  1. If the time waiting is low locally, then the network between your client and the server is the problem. Any number of things could hinder the network traversal. There are a lot of points between clients and servers; each one has its own connection limitations and could cause a problem. The simplest method to test reducing this is to put your application on another host and see if the time waiting improves.
  2. That the server is busy or suffering a performance issue. Below, we can see that there is around 2 second wait time from the server; this scenario was due to a complex JQL query:

Typically, in this situation, cross-check for any heavy running tasks (Example: Creating Backup, Reindex).

If this is always seen during a specific time of the day, record the time of occurrence and create a support ticket at support.atlassian.com for assistance in identifying the root cause.

Receiving

This is the time the server uses to transfer the required information to the client. Typically, this is where we detect a network issue. See below for an example:


This example above has a 1.6-second wait time, which caused most of the delay in completing the request.

DOM Loaded

DOM loaded means that the browser has received and parsed all the HTML into the DOM tree, which can now be manipulated.

It occurs before the page has been fully rendered (as external resources may still need to be fully downloaded, including images, CSS, JavaScript, and any other linked resources).

 Don't confuse with onload event:

The onload event occurs when an object has been loaded. onload is often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.).

The onload event can be used to check the visitor's browser type and browser version and load the proper version of the web page based on the information.

参照: http://www.w3schools.com/jsref/event_onload.asp

Page Loaded

Total time taken for the page to be fully loaded. (Inclusive of AJAX call or any REST call from javascript to populate data on external server: Example, Google Analytics)

It does not mean that the page is white without any content until it is fully loaded; the page usually will show after the onload event, and then it will populate the information from the external call. Such as Dashboard Gadget when loading:


If you have external resources to populate the page (Gadgets, external links), It could take a longer time to load the page completely, however, it does not depend on the performance of the server but rather the speed to handle the request from other site/server.

サイズ

The size of the request being served plays a role in performance issues as well; for a better understanding of how it contributes to delay, see below:

2.4MB のデータの取得にかかる時間はどれぐらいでしょうか。次のように計算されます。

3 Mbps = 約 0.375MBps (注: B = バイト、b = ビット)

To get 2.4MB, you will need:

2.4 MB / 0.375 MBps = 6.4 秒

This depends on the throughput available. Generally, you can run a Speed Test and check the throughput of the server nearest to the hosting datacenter.

A similar view is obtained by viewing the Network tab on the respective browser types listed above. 

The steps to analyze are very straightforward if the above definition is clearly understood:

  1. Search for the delayed responding request (typically the longest bar viewing the total web requests)
  2. Identify what is the longest waiting time and how long it waited
  3. 遅延の主な原因を確認します (Blocking、Waiting、Receiving)
  4. ページを複数回リロードして問題が再現するかどうかを確認します
  5. Seek assistance from the Support team with the information captured if identifying the server contributes to the delay. For other issues, such as network, reaching out directly to the ISP or internal hosting team for assistance is faster. The information gathered should be sufficient to show the observation.

レンダリングの問題のトラブルシューティング

ページのレンダリングに失敗する場合、開発者ツール の [ネットワーク] タブに原因が記録されていることが多くあります。原因が記録されていない場合、[キャッシュの無効化] の横のチェックボックスを選択してブラウザ キャッシュを無効化することをおすすめします。これにより、ブラウザでキャッシュ データを使用せずにページを最初からレンダリングできます。同様に、HAR ファイルのステータス コードも、問題の原因となるリクエストの特定に役立ちます。

Example of an error message seen in the Console tab accompanying the code 404 Bad Request:

{"errorMessages":["Error in JQL Query: Expecting either a value, list or function but got 'IN'. You must surround 'IN' in quotation marks to use it as a value. (line 1, character 11)"],"errors":{}}

This is found in the bug JRA-42216 - Getting issue details... STATUS  which is also a page rendering issue

It is essential to be able to identify the status code from the HAR files generated as well. Below are a few of typical examples:

  • 200 - 成功
  • 404 - ページが見つかりません / 要求が正しくありません
  • 401 - 認証されていません
  • 403 - 禁止されています 
  • 304 - 変更されていません (コンテンツはキャッシュされています)
  • 500 - 内部サーバー エラー

For the definition of the error, refer to the HTTP/1.1 Status Code Definition page for details.

After capturing the consistent behavior, provide this information to the support team together with the steps taken for the Support team to work on the potential cause behind the observation.

説明

HAR is the short form for HTTP ARchive format, which tracks all the logging of a web browser's interaction with a site.


HAR files can be a requirement for troubleshooting issues, specifically for problems such as performance and page rendering

製品Jira、Confluence、Bamboo、Bitbucket、Fisheye
プラットフォームServer、Cloud
Last modified on Mar 26, 2024

この内容はお役に立ちましたか?

はい
いいえ
この記事についてのフィードバックを送信する
Powered by Confluence and Scroll Viewport.