Highlight's H.getSessionURL() gives you the URL to view a session. You can use this with Sentry's Custom Contexts to quickly view what happened in the session right before an error was thrown.

Vanilla Javascript

This code example should be followed if you're using Sentry's Javascript SDK.

import * as Sentry from '@sentry/browser'
import { H } from 'highlight-run'

H.init('<YOUR_PROJECT_ID')

Sentry.init({
	// Your Sentry config.
})

// `sessionUrl` is `undefined` if the session hasn't started yet.
// This is why we pass a function to `getSessionURL()` which is
// called when the session has started.
H.getSessionURL().then((sessionUrl) => {
	Sentry.setContext('highlight', {
		url: sessionUrl,
	})
})

React

This code example should be followed if you're using Sentry's React SDK.

import * as Sentry from '@sentry/react'
import { H } from 'highlight-run'

H.init('<YOUR_PROJECT_ID')

Sentry.init({
	// Your Sentry config.
})

// `sessionUrl` is `undefined` if the session hasn't started yet.
// This is why we pass a function to `getSessionURL()` which is
// called when the session has started.
H.getSessionURL().then((sessionUrl) => {
	Sentry.setContext('highlight', {
		url: sessionUrl,
	})
})

Sentry with Highlight Proxy

When Proxying Highlight, you'll find Sentry tracking the session recording traffic flowing to your subdomain. Since this traffic isn't useful to monitor, you may want to ignore these requests in Sentry. You can find the Sentry docs describing how to do that here.

For example, to filter Sentry recording of Highlight data when your domain is example.com

Sentry.init({
	// ...
	beforeBreadcrumb(breadcrumb, hint) {
		if (
			breadcrumb.category === 'xhr' &&
			breadcrumb.data?.url.contains('highlight.example.com')
		) {
			return null
		}
		return breadcrumb
	},
})