Generate your Monika Configuration using HTTP Archive (HAR)

Denny Pradipta
Hyperjump Tech
Published in
4 min readSep 8, 2021
Web Browser — Photo by Richy Great on Unsplash

Over a couple of weeks, we have explained to you how Monika works using a simple configuration file, connect Monika with Prometheus, visualize the data using Grafana, and also use Postman collections with Monika. If you haven’t read the articles mentioned above, then you should.

There is a way to monitor your website thoroughly such as checking if the static files are loaded correctly, and that is by running Monika using a HAR file.

What is a HAR file?

The HTTP Archive format or HAR is a JSON-formatted archive file format of the requests log when opening a web page. A HAR file is primarily used for identifying performance issues, such as bottlenecks and slow load times, and page rendering problems.

When you use Chrome DevTools and open the Network tab, you can see that there are some fancy things going on in your Network tab when you navigate into another page or refresh the current page:

Network log

The picture above tells you what file was fetched first, how long it took to fetch it, and the waterfall sequence of files which were downloaded to complete the page load. There is so much information about the page that you could view using Chrome DevTools. This also applies in other browsers too such as Firefox. Basically, that list of network requests in the Chrome DevTools is what a HAR file will contain when you export it from the Chrome DevTools.

Let’s say you want to monitor your website as detail as Chrome Network DevTools can be. You can open your browser, open your website, open the DevTools and navigate to the Network tab, and refresh the page. Repeat this every ten seconds. Voila? Personally, I would have forgotten to refresh every ten seconds after 2–3 minutes. That’s where Monika comes in.

How do I use the HAR file with Monika?

In order to use the HAR file with Monika, you need to export the HAR file by following the steps below:

  1. Open your browser and navigate to the website that you want to monitor
  2. Open Chrome DevTools and navigate to the Network Tab
  3. Refresh the page
  4. Click the download icon and download the HAR file by clicking “Export HAR”
In case you couldn’t find it.

Then, go to your downloaded HAR file folder and run Monika using monika -H <your_har_file>and it may look similar to this:

If you pay attention to the logs above, it is said that you didn’t define the incident and recovery threshold. If you want to create a Monika configuration using a HAR file, you can run monika --create-config --har <your_har_file>and it will generate a configuration based on your HAR file.

Generated monika.json file

If you are comfortable editing the file using command-line interface, you can edit the monika.json using nano/vi/vim. But some people prefer a graphical user interface to edit the Monika configuration, so either you can load up the monika.json in your Visual Studio Code, or use our Monika Config Generator:

From there, you can select “I have a configuration file”, then upload your monika.json, and finally edit your Monika configuration on the go.

Congratulations! You have successfully monitor your website using the HAR file!

I’m proud of you!

Closing

The HTTP Archive format or HAR is a JSON-formatted archive file format of the requests log when opening a web page. A HAR file is primarily used for identifying performance issues, such as bottlenecks and slow load times, and page rendering problems.

With Monika, you can monitor your website using the HAR file downloaded from the DevTools Network tab, and generate your own Monika configuration based on your HAR file.

We would love to hear some feedback, so make sure you visit our Github page to submit some issues you’re having, request some features, or probably contribute to our repository.

Do you know what other use cases HAR files are for? Leave a response below and I’ll see you in the next article!

Peace out!

Hyperjump is an open-source-first company providing engineering excellence service. We aim to build and commercialize open-source tools to help companies streamline, simplify, and secure the most important aspects of its modern DevOps practices.

--

--

Denny Pradipta
Hyperjump Tech

Full-stack developer who loves to explore new technologies. Uses MongoDB, Express, React, and Node daily. Regularly writing for Hyperjump Technologies.