Better bug reporting and Faster fixing with HAR files!

Give the context of a WEB application fault

Photo by David Clode on Unsplash

They found the hanging body on a sunny Monday afternoon. The screen was still displaying the last assigned task regarding a bug fix — misty, convoluted sentences without significance.

In the career of a developer this is a common part: the will to take an end to our pain. Suicide is never the answer — maybe we can reduce suffering related to bug fixing tasks using HAR files.

Content of the story:

  1. What HAR these — a definition about HAR files and how them can help us fixing and reporting a bug;
  2. Generate a secure HAR file — using your browser (you don’t need any other satanic tool);
  3. How to analyze an HAR file;
  4. Conclusion and resources.

1- What HAR These

HAR stands for HTTP ARchive.
As w3c’s specification document about HAR files has been abandoned, HAR it’s not a standard, nevertheless it is a defacto standard in web development: every browser has the functionality to generate them and a large list of tools support this format.

The HAR file extension is .HAR (yes, mind blowing) but if you open the file with a text editor you’ll notice that it’s basically a JSON object with several fields describing an HTTP communication.

The main part of an HAR file consists of time ordered entries” which are the single HTTP invocations containing the request and response objects.

As you can imagine, providing all request and responses of an HTTP session in a WEB application means to furnish the developer with the FULL context around a bug/malfunction/performance issue.

Of course this will result in faster fixing time.

Sometimes the error is so noticeable in the HAR file that no further explanation is required.

2- Generate a secure HAR file

The process is straightforward:

  1. Go to the web-page (opening a new in incognito mode is better, as you will have no previous data related to the page);
  2. Open the dev-tools on your browser;
  3. Clean previous network calls (if any) and start recording;
  4. Reproduce the issue;
  5. Generate and download the HAR file.

For details, you can follow this frequently updated LinkedIn GUIDE to report a technical issue on their website.

Unfortunately in the HAR file generated sensitive data (password, cookies, etc.) is present and visible; consequently those files should be sent only if you absolutely trust the receiver or in a NON-production environment.

If you are not so sure about the receiver, an option can be to just edit the JSON and remove manually all sensitive data from it (not so easy) or we can take advantage of the GoogleApps WEB TOOL. You just have to

1- Upload the generated file;

Google HAR analyzer — upload interface

2- Click on “remove sensitive data” button.

Google HAR analyzer — remove file sensitive data

You will download the same file but without sensitive data, renamed with a “_redacted” postfix .

3- How to analyze an HAR file

Download and install this chrome extension application: HTTP Archive Viewer

Http archive viewer logo

You can use also some online tools as Google Admin Toolbox or the Har Viewer but the extension is faster, easier to use and it works offline.

The process is simple: select a file to analyze and a the list of the HTTP requests registered will be displayed.

HAR Archive viewer — network calls

You can expand each element of the list and get details about the request and the response objects:

Having this much details, troubleshooting becomes easy.

If you are a web developer, you have noticed that this layout is very similar to the network tab listed in your browser dev-tools.

Furthermore, clicking on the “show statistic” button you will see this nice graphs:

  • The first Pie Chart it’s a summary of the request’s timeline;
  • The second it’s the summary of the content types of the requests;
  • The third it’s the summary of sent and received body and headers;
  • The fourth it’s a comparison between data downloaded and data already cached in the browser.

These pies become very handy when it comes to performance optimizing.

4- CONCLUSION

Issues reporting can be a mangy task.

Everything gets easier if you can provide the FULL context of the malfunction; HAR files exists for this purpose.

Consider also providing the two different HAR files; one with the recording of calls in case of success and the other with the recording in case of faliure; this will help the developers much more.

To study in deep the thematic, and to know how to generate an HAR file from smartphones browsers also:

USEFUL RESOURCES

Tech. leader and passionate developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store