In order to make the most out of highlight.io, we suggest instrumenting your frontend and backend so that you can attribute frontend requests with backend errors and logs. See an example below, where you can view an error's details alongside frontend session replay, allowing you to get the full context you need.
Below, we detail the requirements to get this working as well as how to troubleshoot.
How can I start using this?
Install the client bundle
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.
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.
Your backend might be a distributed system with multiple services. Say, for example, a frontend Next.js application with a Next.js backend ,which makes HTTP requests to a Python FastAPI microservice. In a case like that, you may want errors and logs from your Python service to be attributed to the frontend sessions in Highlight.
Our frontend -> backend tracing uses the
x-highlight-request HTTP header to attribute frontend requests with backend errors and logs. So, in the case of the example above, assuming all of your services have the highlight sdk installed, if your Next.js backend performs an HTTP request to a FastAPI backend and you forward the
x-highlight-request header along, the trace will carry over information about the frontend session.
A more complex application might not make HTTP requests between backend services, however. Instead, it may
use a message broker like Kafka to queue up jobs. In that case, you'll need to add a way to
x-highlight-request you receive from the frontend along with your enqueued messages.
The service that consumes the messages can then pass the value to the highlight SDK via custom
error wrapping or logging code as per usual.
networkRecordingare properly set.
Ensure your backend has
CORSconfigured for your frontend hostname, explicitly allowing header
For debugging the backend SDK of your choice, in order to debug, we suggest enabling verbose logging. For example, in Go, add