Using highlight.io with SvelteKit
Install the npm package highlight.run in your terminal.
# with yarn
yarn add highlight.run
# with pnpm
pnpm add highlight.run
# with npm
npm install highlight.run
In SvelteKit, we recommend initializing highlight.io in the hooks.client.js or hooks.client.ts file. You can find more details about this file in the SvelteKit docs here. To get started, we recommend setting tracingOrigins and networkRecording so that we can pass a header to pair frontend and backend errors.
Grab your project ID from app.highlight.io/setup and insert it in place of <YOUR_PROJECT_ID> in the code snippet to the right.
// hooks.client.ts
...
import { H } from 'highlight.run';
H.init('<YOUR_PROJECT_ID>', {
environment: 'production',
version: 'commit:abcdefg12345',
networkRecording: {
enabled: true,
recordHeadersAndBody: true,
urlBlocklist: [
// insert urls you don't want to record here
],
},
});
...
Identify users to tie their sessions/errors to their account. We suggest doing this after the authentication flow of your web app.
The first argument of identify will be searchable via the property identifier, and the second property is searchable by the key of each item in the object. Read more about this in our identifying users section.
H.identify('jay@highlight.io', {
id: 'very-secure-id',
phone: '867-5309',
bestFriend: 'jenny'
});Check your dashboard for a new session. Don't see anything? Send us a message in our community and we can help debug.
To get properly enhanced stacktraces of your javascript app, we recommend instrumenting sourcemaps. If you deploy public sourcemaps, you can skip this step. Refer to our docs on sourcemaps to read more about this option.
# Upload sourcemaps to Highlight
...
npx --yes @highlight-run/sourcemap-uploader upload --apiKey ${YOUR_ORG_API_KEY} --path ./build
...The next step is instrumenting your backend to tie logs/errors to your frontend sessions. Read more about this in our backend instrumentation section.