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+.
This Guide Integrates: Console Logs · Traces
If you're looking for session replay/browser-side monitoring, you'll want to install the Browser integration instead.
If you're looking to collect logs from a Vercel-deployed app, you can add the Vercel logging integration.
Installing
Enable Instrumentation Hook (Required for v15 and below)
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,
},
// Ignore otel pkgs warnings
// https://github.com/open-telemetry/opentelemetry-js/issues/4173#issuecomment-1822938936
webpack: (
config,
{ buildId, dev, isServer, defaultLoaders, nextRuntime, webpack },
) => {
if (isServer) {
config.ignoreWarnings = [{ module: /opentelemetry/ }];
}
return config;
},
};
module.exports = nextConfig;Install HyperDX OpenTelemetry SDK
npm install @hyperdx/node-opentelemetry Create Instrumentation Files
Create a file called instrumentation.ts (or .js) in your Next.js project root with the
following contents:
export async function register() {
if (process.env.NEXT_RUNTIME === 'nodejs') {
const { init } = await import('@hyperdx/node-opentelemetry');
init({
apiKey: '<YOUR_HYPERDX_INGESTION_API_KEY>', // optionally configure via `HYPERDX_API_KEY` env var
service: '<MY_SERVICE_NAME>', // optionally configure via `OTEL_SERVICE_NAME` env var
additionalInstrumentations: [], // optional, default: []
});
}
}This will allow Next.js to import the OpenTelemetry instrumentation for any serverless function invocation.
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:
HYPERDX_API_KEY=<YOUR_HYPERDX_INGESTION_API_KEY> \
OTEL_SERVICE_NAME=<MY_SERVICE_NAME> \
OTEL_EXPORTER_OTLP_ENDPOINT=https://in-otel.hyperdx.io
npm run devIf you're deploying in Vercel, ensure that all the environment variables above are configured for your deployment.
If you have further issues, please reach out to us at support@hyperdx.io.
