Generating HAR files and Analyzing Web Requests

Performance Troubleshooting Tools - Best Practice

On this page

Purpose

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

HAR files can be a requirement for troubleshooting issues specifically for problems listed below:

  • Performance Issue: slow page load, timeout when performing certain task
  • Page rendering : incorrect page format, missing information

First line troubleshooting can be conducted by following this guide. Providing these information to the support team will help expedite the troubleshooting process.

 

(i) Before you begin

Do take note of the Supported Platforms for the supported browser types.

It is highly recommended to generate multiple HAR files for comparison. Below are guidelines for effective information gathering:

  1. Generate a HAR file for an unaffected page (without performance issue 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 the better average and capture the consistent timing


How to generate a HAR File

 Below is the HAR files generated depending on the browser variant you are using. 

Chrome

It is recommended to use Chrome to generate HAR files because it natively provides the Developer Tools to facilitate this. To learn more about the Chrome's developer tools, you can head towards this link.

Toolset

Chrome is bundled with a set of Developer Tools as covered in that link.

JavaScript Errors

Look in the Chrome Console for any JavaScript errors. 

Network Issues

To diagnose support problems, the network tab can be used:

  1. Open up Chrome and enable the Developer Tools.
  2. Select the network tab.
  3. Load the page with the problem.
  4. Wait until it has finished loading.
  5. Review it for any errors, referencing HTTP/1.1 Status Codes for information on what those errors mean.

 

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

To enable the extra browser log:

  1. Start up the browser with the parameters "--enable-logging --v=1" (This article provides instructions for major platforms)
  2. There will be a file call "chrome_debug.log" generated in the Chrome user default Location.

Providing Information to Support

  1. Bring up the developer tools using one of these methods:
    • Using Keyboard Shortcut (⌘⌥I on OS X, Ctrl + Shift + i on Linux, F12 on Windows)
    • From Chrome MenuChrome Menu at the top-right of your browser window, then select Tools > Developer Tools.
  2. Navigate to the Network tab on the Development Tool
  3. Check Disable Cache option to prevent caching of resources for this specific page.
  4. Refresh the page to start capturing the traffic between the browser to the server.
    • (warning) Please capture a full page load so we can see the requests made prior to the problem we're analyzing.
  5. Complete the steps that trigger or demonstrate your issue.
  6. Right Click in the area where the network records are shown and select Save as HAR with content

Firefox

 

Installing the extension may contribute to browser performance - if you find performance problems after installing it please try removing the plugin. The guide here is targeted for troubleshooting purposes, and the plugin is a third-party plugin. Consequently, Atlassian can not guarantee providing any support for them.

Toolset

Firefox comes with an embedded set of developer tools that you can use for troubleshooting.

JavaScript Errors

Look in the console for any JavaScript errors.

Network Issues

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

Providing Information to Support
  1. Go to Tools > Web Developer > Network
  2. Refresh the page to start capturing the traffic between the browser to the server.
    • Note: Please capture a full page load so we can see the requests made prior to the problem we're analyzing.
  3. Complete the steps that trigger or demonstrate your issue.
  4. Click on Export followed by Save As... to save the HAR file

(info) It can also be helpful to obtain an export of the console.

Internet Explorer

Toolset

Internet Explorer supports the Developer Toolbar. Additionally, Fiddler is a third-party application that's often used for debugging browser problems.

JavaScript Errors

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

Network Issues

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 take a look through HTTP/1.1 Status Codes.

Providing Information to Support

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

Microsoft Edge

Toolset

Microsoft Edge has an inbuilt Developer tools.

JavaScript Issues

Look into the console tab for any JavaScript errors.

Network Issues

To diagnose support problems, the network tab can be used:

  1. Open up the inbuilt Developer tools.
  2. Select the network tab.
  3. Load the page with the problem.
  4. Wait until it has finished loading.
  5. Review it for any errors, referencing HTTP/1.1 Status Codes for information on what those errors mean.

Providing Information to Support

  1. Go to Developer tools using the F12 keyboard shortcut

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

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

  3. Complete the steps that trigger or demonstrate your issue.
  4. Click on Export as HAR (Floppy button next to the stop button on the Developer Tools) followed by Save As... to save the HAR file.

Safari

Toolset

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

JavaScript Issues

Apple have put together a Using the Error Console guide that will detail how to find JavaScript errors.

Network Issues

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

Analyzing Web Requests

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

A common tool that is used to view the HAR files generated is HAR Viewer which is available as a Web Application.

Troubleshooting Performance Issues

The interested information for Performance issue is the load time and which request is causing the delay on the browser to serve the content to the user. So an understanding towards the definitions used for Web Request is required for effective troubleshooting, see below:

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

 

Highlighting any web request after loading the HAR file will reveal the information below:

 

Item
Meaning
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 after 6.32 seconds after the initial request (Most of the time HTML request as the initial one)


Blocking

Waiting for resources, connections. Where normally it is pending for Browser to handle the request. Example: 60 request is being called simultaneously, the browser will block the request and wait for the earlier requests to be handled batch by batch. See below for example:


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 networks between your client and the server are the problem. The network traversal could be hindered by any number of things. There are a lot of points between clients and servers and 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 seconds wait time from the server; this scenario was due to a complex jql query:

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

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

Receiving

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


This example above has a 1.6 seconds wait time, which took most of the delay for the request to complete.

DOM Loaded

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

It occurs before the page has been fully rendered (as external resources may have not yet fully downloaded - including images, CSS, JavaScript and any other linked resources).

(warning) Do not confuse with onload event:

The onload event occurs when an object has been loaded. onload is most 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.

Ref: 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 means that the page is white without any content until the page is fully loaded, the page normally will show after the onload event, after that it will populate the information from the external call. Such as Dashboard Gadget when loading:


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

Size

The size of the request being served plays a role on performance issue as well, for better understanding on how it contributes to delay:

How long will it take to serve the 2.4MB data? A calculation is shown below:

3Mbps = Approximate 0.375MBps (note: B = byte, b = bit)

In order to get 2.4MB, you will need:

2.4MB/0.375MBps = 6.4 seconds

And this depends on the throughput available, generally can run a Speed Test and check the throughput to server nearest to the hosting datacenter.

 

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

Steps to analyse is very straight forward if the above definition is clearly understood:

  1. Search for the delay 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. Check what is the main contributor towards the delay (Blocking, Waiting or Receiving)
  4. Run consistency checking by reloading the page multiple time
  5. Seek for assistance from the Support team with the information captured if identifying the Server is contributing the delay. For other issues, such as network, it is faster to reach out directly to the ISP or internal hosting team for assistance. The information gathered should be suffice to show the observation.

Troubleshooting Rendering Issue

In common cases, when a page fails to render correctly, the cause should be logged in the Console tab from the Developer Tools. If no reason is logged, try disabling the browser cache by checking the box next to Disable Cache. This will force the browser to render the page from scratch instead of using cached data. Similarly the status code from the HAR file can also help to identify which request could have caused the issue.

Example for some error message seen in Console tab accompany the code of 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":{}}

(info) This is found from the bug  JRACLOUD-65837 - Creating a project using Reserved Words of JQL as project key breaks the new project navigation issue view Resolved  which is also a page rendering issue

It is important to be able to identify the status code from the HAR files generated as well. Below is few of the common example:

  • 200 - Success
  • 404 - Page not found / Bad Request
  • 401 - Unauthorized
  • 403 - Forbidden 
  • 304 - Not Modified (Content is cached)
  • 500 - Internal Server Error

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

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

Last modified on Oct 26, 2017

Was this helpful?

Yes
No
Provide feedback about this article

Not finding the help you need?

Ask the community

Powered by Confluence and Scroll Viewport.