Creating HAR files for troubleshooting with Support

Troubleshooting UI / permission issues can prove difficult when Support don't see the same behavior that you observe. An HTTP Archive (HAR) can often help here.

A HAR file is a JSON log of the web browser's HTTP interaction with a site. This can often expose errors that aren't otherwise displayed in the UI, or timescales that can demonstrate performance issues. It also exposes the API responses from the CircleCI platform that can help to understand the root cause of UI issues or unexpected behaviour.

Here are some instructions on how to create a HAR file for:

• Chrome / Chromium based browsers
• Firefox
• Safari

Chrome / Chromium based browsers:

1. Navigate to the page you wish to record
2. Navigate to menu (☰) > More Tools > </> Developer Tools
3. Select the Network tab
4. Check the Preserve Log checkbox
5. Select the Stop Recording (🟥) button to stop logging
6. Select the Clear (🚫) button to clear the current log
7. Select the Record (⚫) button to start recording
8. Refresh the page or perform the task to record the events
9. Select the Export HAR (↓) button to download and save the HAR file

Note: Modern Chromium browsers will sanitize the logs. However, if you need to do this manually you can follow these instructions: Removal of User Information

Firefox:

1. Navigate to the menu (☰) > More Tools > Web Developer Tools
2. Select the Network tab
3. Select the Network Settings (⚙) button > Persist Logs
4. Select the pause (⏸️) button to pause recording
5. Select the waste basket (🗑️) to clear the log
6. Select the play button (▶️) to start recording
7. Refresh the page or perform the task to record the events
8. Click the Network Settings (⚙) button > Save All As HAR
9. Follow instruction on Removal of User Information

Safari:

1. Enable the Developer menu:
   • Click on Safari menu > Settings... > Advanced > Show features for web developers
2. Select Develop (menu) > Show Web Inspector
3. Select the Menu (☰) button > ensure Preserve Log is checked
4. Select the waste basket (🗑️) to clear the log
5. Refresh the page or perform the task to record the events
6. Click Export to download and save the HAR file
7. Follow instruction on Removal of User Information

Removal of User Information

HAR files can contain sensitive user information and we recommend sanitizing the HAR file after recording.

Cloudflare provide a cloud-based tool to remove sensitive information from a HAR file:

https://har-sanitizer.pages.dev/

If you prefer, you can use the following steps to remove them manually.

Automated Removal of User Information Using jq

If you have jq installed you can use it to remove user information. Run the following command:

jq '
(.. | objects | select(has("name") and (.name == "ring-session" or .name == "Set-Cookie" or .name == "Cookie"))) |= del(.value)
' path_to_your_file.har > new_file.har

Replace path_to_your_file.har with the path to your HAR file. This command will create a new HAR file named new_file.har with the sensitive data removed.

Manual Removal of User Information

1. Open the HAR file with a text editor
2. Search for ring-session, Set-Cookie, and Cookie
3. Find the associated value field for each instance and delete its content. Be careful not to delete the entire object or any surrounding syntax.
4. Save the HAR file.