Vercel

Overview

Vercel's powerful front-end cloud accelerates and improves UI development. Projects hosted on Vercel natively generate logs and can generate tracing data through Vercel's @vercel/otel NPM package. You can fully leverage this data through Dash0.

Use Cases

• Correlate Vercel requests to non-Vercel hosted services and across Vercel projects.
• Understand performance of database queries.
• Alert on logging and tracing data.
• Retain observability data for longer periods of time.

Overview

Vercel's frontend cloud supports two types of telemetry: logs and traces. This guide will describe how to set up both, starting with logs, which is very easy thanks to Dash0's native Vercel integration.

Sending Vercel Logs to Dash0

In short, click the button below and follow the dialog.

Connect your Vercel account to Dash0

Sending Vercel Traces to Dash0

Install the required dependencies

Vercel has its own distribution of the OpenTelemetry SDK called @vercel/sdk. It is fully compatible with the official OpenTelemetry SDK, and adds helpful extensions.

Only for Next.js <v15: Enable the experimental instrumentation hook

If you are using a Next.js version <15, you need to enable the Next.js instrumentation hook. Modify the file next.config.js with the following settings:

Register the OpenTelemetry Instrumentation

Now you can initialize Vercel's OpenTelemetry SDK via a file called instrumentation.ts (see documentation, located directly in your src/ folder). Add the following content:

Set environment variables to configure the exporter in Vercel

As the last step, we need to tell the Next.js OpenTelemetry SDK where to send its data to, and how to authenticate. This can be achieved using the standardized OpenTelemetry headers and Vercel's environment variable support.

Enjoy your Vercel traces in Dash0

Distributed tracing data will now arrive from Vercel within Dash0!

For an implementation example, refer to our Next.js & Vercel example application on GitHub.