Highlight

highlight.io is monitoring software for the next generation of developers. And it's all open source :).

highlight.io gives you fullstack visibility into your application by pairing session replay, error monitoring, and logging, allowing you to tie frontend issues with backend logs and performance issues.

The Highlight Vercel integration is an easy way to connect your Vercel projects to new or existing projects in Highlight.

Installing the integration will inject an environment variable (see below) to automatically send sourcemaps to Highlight. To complete the integration, set up the frontend and backend.

Client-side _app.tsx

import { H } from 'highlight.run';

H.init('{YOUR_PROJECT_ID}', {
  environment: 'production',
  enableStrictPrivacy: false,
});

Server-side instrumentation.ts

import { Highlight } from '@highlight-run/next';

const withHighlight = Highlight({
    projectID: process.env.HIGHLIGHT_PROJECT_ID
});
export default withHighlight((req, res) => {
    res.status(200).json({ name: "Jay" });
});

Injected Environment Variables

Sourcemap Upload Key

API key used to authenticate and upload source maps to your Highlight project.

HIGHLIGHT_SOURCEMAP_UPLOAD_API_KEY