Seamless Digital Experience.
Happy Customers.

Digital Experience and Error Monitoring Platform - Zipy

What is HAR File?

Pravin Tiwari
~ 4 min read | Published on Jan 24, 2024





TABLE OF CONTENT

Fix bugs faster with Zipy!

  • Session replay
  • Network calls
  • Console Logs
  • Stack traces
  • User identification
Get Started for Free

HAR file or HTTP Archive file contains the details about network requests from client to server inside the browser, it is in JSON format however the extension of this file is .har

The HAR file is mostly used to understand the request and response performance issues, slow API calls, page rendering, or load times, overall it contains all the details related to resources being processed between the browser to the server.

HAR file details

HAR file format is JSON structure and to visualize its content we can use tools like HAR Viewer or network viewer

To analyze the performance of the site, we can export the HAR files, steps are as below:

1.First, we need to open a network tab in Chrome DevTools:

a] Open Google Chrome Browser

b] At the Top Right Corner Click on Three Dots > More Tools > Developer Tools > Network Tab

Sample of network tab

2.After opening the network tab, we can see the small icon (⬇️) which we can use to Export HAR... file.

Sample of export HAR

3.Note: To get the site loading content, we have to make sure our site network log recording is enabled and after that, we have to refresh/reload the site we need to perform analyses of network requests, Please see the image and small red circle icon (🔴) indicates that network logs recording is on.

Example of network logs

4.That’s all, now we can export our HAR file to analyze it.

Note: To understands chrome’s network tab in detail you can refer to this link.

Monitor your users in real time and optimize your digital experience with Zipy!

Get Started for free

Structure of the HAR file

We are going to take the network request example from Zipy.ai | Debugging made lightning fast

In the below-attached image from Zipy, we can see network request timings on the popup, I’m using Google Chrome’s network tab screenshot.

Structure of the HAR File

In the above example image, we can see details about network request resources like name, status, type, size, and time along with the waterfall.

Network waterfall contains the details about request timings in graphical charts representation format.

The network tab can log the details about each network request, but to analyze it properly and preserve or take a backup of the current network request log, we can export this network request in the HAR file to analyze or to keep a backup.

Note: Before sending the HAR file to anyone, you have to verify its content as it can contain privacy & security sensitive information which you don’t want to share with everyone.

Below are the sample JSON from the HAR file:

Small snippet of a HAR file

The above image is only a small part of the HAR file, the root structure is as below:

{
    "log": {
        "version" : "1.2",
        "creator" : {},
        "browser" : {},
        "pages": [],
        "entries": [],
        "comment": ""
    }
}

Let’s see the details

  • version [string] - A version is a number in string format. If empty, string "1.1" is assumed by default.
  • creator [object] - A name and version info of the log creator application (it depends on the browser).
  • browser [object, optional] - Name and version info of used browser, the structure of browser object is same as a creator object.
  • pages [array, optional] - All the logged pages by DevTools.
  • entries [array] - This will hold all logged requests by DevTools.
  • comment [string, optional] (new in 1.2) - A comment provided by the user or the application.

Let’s see the entries structure:

"entries": [
    {
        "pageref": string, // page count (ex: page_0)
        "startedDateTime": string, // Date in ISO String (ex: 2022-08-29T07:18:07.133Z)
        "time": number,
        "request": object, // Request Details
        "response": object, // Response Details
        "cache": object, // Cache Usage Details
        "timings": object, // Timing details of the request (IMP)
        "serverIPAddress": string, // server IP address which was connected.
        "connection": string, // unique id of connection
        "comment": string // comment given by user or application
    }
]

  • pageref [string, unique, optional] - Parent Page Reference. Leave if the web application does not support grouping by page. (example: Single Page Application).
  • startedDateTime [string] - ISO Date Time String when request is started (ISO 8601 - YYYY-MM-DDThh:mm:ss.sTZD).
  • time [number] - Total request time in milliseconds,  This is an aggregation of all timings available in the timings objects excluding -1 values.
  • request [object] - Detailed info about the request.
  • response [object] - Detailed info about the response.
  • cache [object] - Info about cache usage.
  • timings [object] - Contains details about timings of request/response round trip.
  • serverIPAddress [string, optional] (new in 1.2) - Connected IP address of the server after resolving the DNS.
  • connection [string, optional] (new in 1.2) - Unique ID of the TCP/IP connection, we can use the port of the client or server however if the port number is not unique we can use any unique ID
  • comment [string, optional] (new in 1.2) - A comment given by the user or the application.

NOTE: To understand the format in detail you can refer to this link.

Monitor your users in real time and optimize your digital experience with Zipy!

Get Started for free

Summary

We have seen the overall details about the HAR file, basically, the HAR file can be used to share the site network logs to analyze it further, it contains the site load, and execution timings of the different resources like JS, CSS, XHR, etc. The details about the network log are in JSON so it’s pretty easy to understand it.

TBD: In Zipy, we are using HAR file specification to show the network requests captured using zipy sdk

Call to Action

Feel free to comment or write to us in case you have any further questions at support@zipy.ai. We would be happy to help you. In case you want to explore for your app, you can sign up or book a demo.











Fix bugs faster with Zipy!

Get Started for Free

You might also like

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Want to solve customer bugs even before they're reported?

The unified digital experience platform to drive growth with Product Analytics, Error Tracking, and Session Replay in one.

SOC 2 Type 2
Zipy is GDPR and SOC2 Type II Compliant
© 2023 Zipy Inc. | All rights reserved
with
by folks just like you