Troubleshooting Toolkit: Collecting a HAR file and Trace information

[jennysowyrda]

When it comes to websites, we all know there is more information than what is on the page level. Sometimes in order to troubleshoot a specific issue, HubSpot Support needs a deeper level of information than the error message on the screen, or a screenshot of what isn’t loading. The HAR file and Trace information can be a valuable piece of content to assist with troubleshooting complex website issues, and you may be asked to send a HAR file and Trace information to HubSpot Support.

How to collect a HAR file

A HAR file is a log of activity between an internet browser and a website, and can be accessed through the inspector tool within your web browser.

If you are requested to get a HAR file, please follow the steps below. These steps are specific to Google Chrome, which is available for download here.

1. Open Chrome and navigate to the page where the issue is occurring.

2. Right-click on your screen and choose “inspect”.

3. Select the “network” tab.

4. Check the “preserve log” and “disable cache” checkboxes.

You will want to ensure that your network tab is recording by looking for the red record button:

. If it is grey or black, click it to begin recording. If you have any activity that already loaded in your network tab, you can clear it by clicking clear: 

5. Perform the action, or reload the page, that is causing the issue with the network tab open and recording.

6. Once you have completed the action and the network tab has loaded all the content, click on the "Export HAR" icon in the network tab.

Screenshot & updated instruction courtesy of @MarcEngelmann 

7. Save the file to the desired location on your computer and then attach it to your Support ticket.

Spanish translation available here.

Portuguese translation available here.

French translation available here.

German translation available here.

Japanese translation available here.

How to collect a HAR when connecting with an OAuth integration

When connecting with an OAuth integration, such as Gmail or O365, there are additional steps needed to collect a HAR file.

1. Navigate to Settings > Integrations > Email Integrations > Connect your inbox.

2. Select Gmail or O365, depending on your email provider. A new tab will open.

3. Close original HubSpot tab.

4. Right-click on the new tab that is opened, choose “inspect”.

5. Select the “network” tab.

6. Check the “preserve log” and “disable cache” checkboxes.

7. Continue through the step of entering your Gmail or O365 information.

8. Once you have completed the action and the network tab has loaded all the content, right click within the inspector tool, and select “save as har with content”.

 9. Save the file to the desired location on your computer and then attach it to your Support ticket.

How to collect Trace information

Trace information provides data about your connection to the website. This can be collected by using the 

/cdn-cgi/trace

endpoint.

1. Enter example.com/cdn-cgi/trace from a web browser and replace example.com with your domain name.

2. Copy the information and add it to your Support ticket along with the HAR file.

If you experience any issues gathering this information, please post your question in the Community.

[SSiow]

Hi all,

For Chrome users - in case you're unable to save your HAR file using the steps above, looks like Chrome has shifted the button to save your HAR file and you'll need to use the export button to do so now. 

See instructions here on this update, and see screenshot below from Chrome's documentation: 

[HelenaLatimer]

Directions for Safari

To gather a HAR file in Safari you will need access to the Developer Tools for Safari. This Apple help doc shows how to enable the Developer Tools.

1. Navigate to the page where the issue is occurring
2. Right click on the page and choose Inspect Element
3. Click the Network tab
4. Click the trash can icon to clear any existing logs in the Network tab
5. Refresh the page and reproduce the issue

Click Export HAR to save the HAR file

[HelenaLatimer]

Directions for Edge

To gather a HAR file in Edge:

1. Navigate to the page where the issue is occurring
2. Click on the menu in the top right hand corner (three dots)
3. Choose Developer Tools
4. Click the Network tab
5. Click the three bars with an X over them () to clear existing logs
6. Refresh the page and reproduce the issue

Click the save button to save the HAR file

[HelenaLatimer]

Directions for Firefox

Hi all! To gather a HAR file in Firefox:

1. Navigate to the page where the error is occurring
2. Right click on the page and click Inspect Element
3. In the panel that opens, click the Network tab
4. Ensure that the boxes for Persist Logs and Disable Cache are checked
5. Click the trash can icon on the left to remove any logs that are already visible in the Network tab
6. Refresh the page and reproduce the issue
7. Once you have reproduced the issue, you will see logs loading in the Network tab. After they have finished loading, right click on one of the requests and select Save all as HAR