Welcome to Highlight
Getting Started
Overview
Backend SDK
Overview
Express Backend
Go Backend
Next.js Backend
Node.js Backend
Client SDK
Angular
Overview
Gatsby.js
HTML
Next.js
Other
React.js
Shopify
Squarespace
SvelteKit
Vue.js
Webflow
WordPress
Next.js SDK
Highlight()
Metrics
nope
Overview
withHighlightConfig()
Tips
Content-Security-Policy
Local Development
Monkey Patches
Performance Impact
Proxying Highlight
Session Search Deep Linking
Troubleshooting
Upgrading Highlight
Session Replay
Console Messages
HTML iframe Recording
Identifying Users
Live Mode
Network DevTools
Privacy
Rage Clicks
Recording Network Requests and Responses
Session Sharing
Session Shortcut
Tracking Events
Versioning Sessions
Error Monitoring
Grouping Errors
Sourcemaps
Versioning Errors
Product Features
Alerts
Analytics
Canvas
Comments
Environments
Frontend Observability
Keyboard Shortcuts
Performance Data
Segments
Session Search
Team Management
User Feedback
Web Vitals
WebGL
Integrations
Amplitude Integration
Clearbit Integration
Electron Integration
Front Plugin
Intercom Integration
Linear Integration
Mixpanel Integration
React.js Integration
Segment Integration
Sentry Integration
Slack Integration
Vercel Integration
highlight.run Changelog
5.0.0
Menu

Recording Network Requests and Responses

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, }, })
Copy

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_ORGANIZATION_ID>', { networkRecording: true, urlBlocklist: [ 'https://salted-passwords.com', 'https://www.googleapis.com/identitytoolkit', 'https://securetoken.googleapis.com', ], })
Copy

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.