Many times during debugging, it's useful to know what the network request/response headers and bodies are. Highlight allows you to record network headers and bodies.

You can enable recording of network requests and responses by setting networkRecording.recordHeadersAndBody (see NetworkRecordingOptions) to true when initializing Highlight.

Highlight monkey patches XmlHttpRequest and fetch to record data from your app's requests/responses including status codes, headers, and bodies.

Privacy

Out of the box, Highlight will not record known headers that contain secrets. Those headers are: - Authorization - Cookie - Proxy-Authorization

If you have other headers that you would like to redact then you can set networkRecording.networkHeadersToRedact.

Recording Headers and Bodies

Highlight can also record the request/response headers and bodies. You'll be able to see the headers and bodies by clicking on any XHR or Fetch requests in the session Developer Tools.

H.init('<YOUR_PROJECT_ID>', {
	networkRecording: {
		enabled: true,
		recordHeadersAndBody: true,
	},
})

Redacting URLs

You may have APIs that you know will always return secrets in the headers, body, or both. In this case, you can choose URLs to redact from. If a URL matches one of the URLs you specify, the header and body will not be recorded.

H.init('<YOUR_PROJECT_ID>', {
	networkRecording: true,
	urlBlocklist: [
		'https://salted-passwords.com',
		'https://www.googleapis.com/identitytoolkit',
		'https://securetoken.googleapis.com',
	],
})

Out of the box, Highlight will not record these URLs: - https://www.googleapis.com/identitytoolkit - https://securetoken.googleapis.com

Redacting Headers and Bodies

If you are dealing with sensitive data or want to go the allowlist approach then you can configure networkRecording.headerKeysToRecord and networkRecording.bodyKeysToRecord. Using these 2 configs, you'll be able to explicitly define which header/body keys to record.

This configuration is only available for highlight.run versions newer than 4.1.0.

API

See NetworkRecordingOptions for more information on how to configure network recording.