Next.js Serverless Functions

HyperDX can ingest native OpenTelemetry traces from your Next.js serverless functions (opens in a new tab) in Next 13.2+.

If you're looking for browser-side monitoring/session replay, you'll want to use the Browser integration instead.

If you're looking to collect logs from a Vercel-deployed app, you can add the Vercel integration.

This Guide Integrates:

️️✖️ Logs

✖️ Metrics

️✅ Traces

Installing

Enable Instrumentation Hook

To get started, you'll need to enable the Next.js instrumentation hook by setting experimental.instrumentationHook = true; in your next.config.js.

Example:

const nextConfig = {
  experimental: {
    instrumentationHook: true,
  },
};
 
module.exports = nextConfig;

Install OpenTelemetry Dependencies

npm i @opentelemetry/auto-instrumentations-node @opentelemetry/sdk-node @opentelemetry/resources @opentelemetry/semantic-conventions @opentelemetry/sdk-trace-node @opentelemetry/exporter-trace-otlp-http

Create Instrumentation Files

Create a file called instrumentation.js in your Next.js project root with the following contents:

// instrumentation.js
export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    await import('./instrumentation.node.js');
  }
}

This will allow Next.js to import the OpenTelemetry instrumentation for any serverless function invocation.

Next, create a file called instrumentation.node.js in your Next.js project root with the following contents:

import { NodeSDK } from '@opentelemetry/sdk-node';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
import { Resource } from '@opentelemetry/resources';
import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
import { SimpleSpanProcessor } from '@opentelemetry/sdk-trace-node';
import { getNodeAutoInstrumentations } from '@opentelemetry/auto-instrumentations-node';
 
const sdk = new NodeSDK({
  resource: new Resource({
    [SemanticResourceAttributes.SERVICE_NAME]: 'my-app',
  }),
  spanProcessor: new SimpleSpanProcessor(new OTLPTraceExporter()),
  instrumentations: [
    getNodeAutoInstrumentations({
      // Generally doesn't give meaningful information
      '@opentelemetry/instrumentation-fs': {
        enabled: false,
      },
    }),
  ],
});
sdk.start();

The above file will initialize the OpenTelemetry SDK with auto-instrumentations enabled, so you'll be able to capture spans from library calls within your serverless function.

Configure Environment Variables

If you're sending traces directly to HyperDX, you'll need to start your Next.js server with the following environment variables to point spans towards HyperDX:

OTEL_EXPORTER_OTLP_ENDPOINT=https://in-otel.hyperdx.io \
OTEL_EXPORTER_OTLP_HEADERS='authorization=<YOUR_INGESTION_API_KEY_HERE>' \
npm run dev

Optionally, you can set NEXT_OTEL_VERBOSE=1 to enable more verbose traces.

Troubleshooting

If you're having issues seeing spans in HyperDX, you can replace the OTLPTraceExporter with the ConsoleSpanExporter to see the spans in your terminal, to ensure the instrumentation is working correctly.

// ...
import { ConsoleSpanExporter } from '@opentelemetry/sdk-trace-base';
 
const sdk = new NodeSDK({
  // ...
  spanProcessor: new SimpleSpanProcessor(new ConsoleSpanExporter()),
  // ...
});
sdk.start();

If you have further issues, please reach out to us at support@hyperdx.io.

NestJS Node.js

Hi, how can I help you?