Issue
Using HAR files to pinpoint the cause and location with errors in Web Applications.

Product Line
Power Monitoring Expert 7.2.x
Power Monitoring Expert 8.x
Power Monitoring Expert 9.x
Power Monitoring Expert 2020
Power Monitoring Expert 2021
Power Monitoring Expert 2022
Power Monitoring Expert 2023
Power Monitoring Expert 2024

Environment
Power Monitoring Expert Web Applications
Google Chrome
Mozilla Firefox
Microsoft Edge

Cause
When experiencing an issue in Web Applications, it can be hard to pinpoint the exact location or cause of the issue. Since Web Applications is a web-based application, using .HAR files to record the activity and performance of the webpage and see where errors are thrown can help with troubleshooting and pinpointing the exact issue. 

Resolution
HAR stands for HTTP Archive and its data is exported as a JSON structured file that shows the network traffic of the browser. The easiest way to interpret the data from the information from this type of file is to use a HAR Analyzer like this one provided by Google HAR Analyzer or your embedded browser Developer Tools. Depending on the type of browser being used, here are the ways to collect this file with the most common browsers used:

How to in Chrome:

1. Open the Developer Tools from the menu (Menu > More Tools > Developer tools), or by pressing F12 (or Fn-F12) on your keyboard.
2. Click on the Network tab
3. Look for a round button at the top left of the Network tab. Make sure it's red. If it's grey, click it once to start recording.
   Turn on "Preserve log".
4. You can use the clear button (a circle with a diagonal line through it) right before trying to reproduce the issue to remove unnecessary header information.
   Reproduce the issue.
5. Save the capture by clicking the downward facing arrow near the top of the Network tab (you may have to expand the window).

How to in Firefox:

1. Start Firefox Developer Tools in Network mode (Top right menu > Developer > Network, or Ctrl-Shift-E / Cmd-Alt-E on macOS).
2. Turn on "Persist logs" on the right.
3. Reproduce the issue.
4. Save the capture by right-clicking on the grid and choosing "Save all as HAR".

How to in Microsoft Edge:

1. Open the Developer Tools from the menu (Menu > More Tools > Developer tools), or by pressing F12 (or Fn-F12) on your keyboard.
2. Open the Network tab.
3. Look for a round button at the top left of the Network tab. Make sure it's red. If it's grey, click it once to start recording.
4. Turn on "Preserve log".
5. Reproduce the issue.
6. Save the capture by clicking the downward facing arrow near the top of the Network tab (you may have to expand the window).

How to in Internet Explorer:

1. Download and Install HttpWatch: HttpWatch: An Advanced Network Debugger and HTTP Sniffer for Chrome and Edge.
2. Start the HttpWatch capture right before reproducing the issue.
3. Stop the HttpWatch capture right after reproducing the issue.
4. Export the capture to HAR format.

To analyze the contents, upload it to a HAR file analyzer like the one mentioned earlier from Google or your embedded browser. Once that has been completed the performance of the web page will be displayed in the interface. The performance is interpreted as HTTP Status Codes. The status codes are split into different sections.

Here are the different types:

• Informational Responses (100 – 199)
• Successful Responses (200 – 299)
• Redirection Messages (300 – 399)
• Client Error Responses (400 – 499)
• Server Error Responses (500 – 599)

For more in depth explanation visit: HTTP response status codes - HTTP | MDN 

When looking at an interface like the Google HAR Analyzer you will be able to see the different HTTP status codes and a short description of the problem based on the icons that are hovered over. See picture below:

From the information collected you will have some insight on where to look to resolve the issue or to better explain the issue you are facing to get better support.

Released for: Schneider Electric Singapore