Quickstart for using the Vercel OpenTelemetry Collector

Find the appropriate OpenTelemetry SDK to install the SDK package, initialize tracing, and send trace data to the Vercel collector. For Next.js, we'll use OpenTelemetry JavaScript.

Install the OpenTelemetry JavaScript SDK using npm.

npm install @opentelemetry/api @opentelemetry/resources @opentelemetry/semantic-conventions @opentelemetry/sdk-trace-base @opentelemetry/exporter-trace-otlp-grpc

Create a file OTEL-initializer.ts in the root of your Next.js project and add the following code to initialize and configure OTEL.

import { trace, context } from '@opentelemetry/api';
import { Resource } from '@opentelemetry/resources';
import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
import {
  BasicTracerProvider,
  ConsoleSpanExporter,
  SimpleSpanProcessor,
} from '@opentelemetry/sdk-trace-base';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-grpc';
 
const provider = new BasicTracerProvider({
  resource: new Resource({
    [SemanticResourceAttributes.SERVICE_NAME]: 'next-app',
  }),
});
 
provider.addSpanProcessor(new SimpleSpanProcessor(new OTLPTraceExporter()));
provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
 
provider.register();
 
export const tracer = trace.getTracer('next-app-tracer');
export { context };

After importing the required packages, we initialized the tracer provider. The tracer provider is a component responsible for generating and collecting traces in an application.

Then, we defined the span processor and span exporters. These are components used to manage and export traces generated by an application. There are two types of span processors:

• SimpleSpanProcessor: sends each span to the collector right away. This type is shown in code above
• BatchSpanProcessor: collects a number of spans and sends them together to the collector. If you choose this type, you'll need to call processor.forceFlush() at the end of the invocation to immediately export all spans

import { tracer, context } from '../../OTEL-initializer.ts';
 
export default async function handler(_req, res) {
  const span = tracer.startSpan('handler', undefined, context.active());
  const ms = Math.floor(Math.random() * 1000);
  span.setAttribute('sleep', ms);
  await new Promise((resolve) => setTimeout(resolve, ms));
  res.status(200).json({ greetings: `Hi there ${ms}!` });
  span.end();
}

We imported the OTEL tracer to the api/get-user.ts file to create spans for tracking performance.

You will need to include import { tracer, context } from '../../OTEL-initializer.ts' to any file that uses the tracer.

You can either deploy your project through the dashboard or through the CLI.

Select your choice of integration from the Marketplace and follow the steps to add the correct Scope. Make sure you allow access to the project above. Ensure that the OpenTelemetry permission is required and click the "Add Integration" button to begin the installation.

New Relic integration

In the Setup New Relic Integration dialog, select Enable Traces from the Traces (Beta) section.