Star us on GitHub
Star
Company
Open Source
Mission & Values
Getting Started
Overview
Fullstack Mapping
Backend / Server
Frontend / Client
Fullstack Frameworks
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
Error Sharing
Grouping Errors
Sourcemaps
Versioning Errors
Product Features
Alerts
Analytics
Canvas
Comments
Cross Origin Iframe Recording
Digests
Environments
Frontend Observability
Keyboard Shortcuts
Performance Data
Segments
Session Search
Team Management
User Feedback
Web Vitals
WebGL
Integrations
Amplitude Integration
Clearbit Integration
ClickUp Integration
Discord Integration
Electron Support
Front Plugin
Height Integration
Intercom Integration
Linear Integration
Mixpanel Integration
React.js Integration
Segment Integration
Sentry Integration
Slack Integration
Vercel Integration
highlight.run Changelog
5.0.0
5.0.1
5.1.0
5.1.1
5.1.2
5.1.3
5.1.4
5.1.5
5.1.6
5.1.7
5.1.8
5.2.0
5.2.1
5.2.2
5.2.3
Tips
Content-Security-Policy
Local Development
Monkey Patches
Performance Impact
Proxying Highlight
Session Search Deep Linking
Troubleshooting
Upgrading Highlight
Menu

Fullstack Mapping

What's this?

In order to make the most out of Highlight's full-stack integration, we suggest instrumenting your frontend so that you can attribute frontend requests with backend errors. Below, we detail the requirements to get this working as well how to troubleshoot.

How can I start using this?

Required Highlight highlight.run version: >=2.8.1

Turn on tracingOrigins

Set the tracingOrigins option to an array of patterns matching the location of your backend. You may also simply specify true, which will default tracingOrigins to all subdomains/domains of the url for your frontend app.

H.init("<YOUR_PROJECT_ID>", { tracingOrigins: ['localhost', 'example.myapp.com/backend'], ... });
Copy
Turn on networkRecording
H.init("<YOUR_PROJECT_ID>", { networkRecording: { enabled: true, recordHeadersAndBody: true, }, ... });
Copy
Backend Changes

Backend changes are dependent on the underlying language/framework used on the server-side codebase. All you need to add is a middleware and code to capture errors.

Below are solutions for what we support today. If you'd like us to support a new framework, feel free to shoot us a message at support@highlight.io or drop us a note in our discord.

Troubleshooting
  1. Ensure tracingOrigins and networkRecording are properly set.

  2. Ensure your backend has CORS configured for your frontend hostname, explicitely allowing header x-highlight-request.

  3. For debugging the backend sdk of your choice, in order to debug, we suggest enabling verbose logging. For example, in go, add highlight.SetDebugMode(myLogger)

  4. If all else fails, please send us an email at support@highlight.io or join the #support channel on our discord.