![](/_next/image?url=https%3A%2F%2Fvercel.com%2Fapi%2Fv1%2Fintegrations%2Fassets%2Foac_AoH5XHA6a43pkrCH4Gw1Tpu7%2Fimages%2Fe8e431a8db6258e7cdd33d6b3c0f9c973f06619a.png&w=3840&q=75)
![](/_next/image?url=https%3A%2F%2Fvercel.com%2Fapi%2Fv1%2Fintegrations%2Fassets%2Foac_AoH5XHA6a43pkrCH4Gw1Tpu7%2Fimages%2F8d69fc10dc1eb9b5aa143677983f3ad87a9c1f58.png&w=3840&q=75)
![](/_next/image?url=https%3A%2F%2Fvercel.com%2Fapi%2Fv1%2Fintegrations%2Fassets%2Foac_AoH5XHA6a43pkrCH4Gw1Tpu7%2Fimages%2F9ff5b5f209c3f0b3c51886d03aa3d29e0b917e17.png&w=3840&q=75)
Overview
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.
Instructions
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 source maps to Highlight. To complete the integration, follow our full Next.js Walkthrough.
Client-side _app.tsx
import { HighlightInit } from '@highlight-run/next/client'
<HighlightInit projectId={<projectId>} serviceName="my-nextjs-frontend" tracingOrigins networkRecording={{ enabled: true, recordHeadersAndBody: true, }}/>
Server-side pages/api/api-test.ts
import { PageRouterHighlight } from '@highlight-run/next/server'
const withPageRouterHighlight = PageRouterHighlight({ projectID: <projectId>,})
export default withPageRouterHighlight(async function handler( req: NextApiRequest, res: NextApiResponse,) { res.status(200).json({ name: "Jay" });})`
Pro / Enterprise
This integration offers additional features for Pro and Enterprise plans.