Distributed tracing for Next.js with Baselime

We're introducing distributed tracing for Next.js applications in Baselime, including comprehensive support for tRPC and Prisma. These new capabilities significantly elevate your observability game, enabling you to detect, diagnose and resolve errors and performance issues in your applications more effectively.

Why Distributed Tracing for Next.js?

Next.js is a popular framework for building scalable web applications, and understanding how requests flow through your application is crucial. Distributed tracing provides this insight by visualizing the journey of requests across your application's various services and components. This level of visibility is vital for:

• Identifying Performance Bottlenecks: Quickly pinpoint where delays occur in your request processing.
• Debugging and Error Resolution: Trace the exact path of a request to understand where and why errors occur.
• Optimizing Application Flow: Understand how different parts of your application interact and where improvements can be made.

Baselime's Integration with tRPC and Prisma

tRPC and Prisma are frameworks commonly used within Next.js applications. Our distributed tracing feature now extends to tRPC and Prisma, offering a detailed view of your application's performance. This enables you to trace the complete lifecycle of a request, from the frontend through your tRPC endpoints, and down to database interactions.

How It Works

Baselime's distributed tracing leverages OpenTelemetry, providing an observability framework for cloud-native software. Here's how it integrates into your Next.js application:

1. Instrumentation: Baselime automatically instruments your Next.js app, tRPC calls and Prisma queries.
2. Data Collection: Telemetry data, including timings, errors, and other metrics are collected as requests are processed.
3. Visualization: This data is visualized in Baselime's console, showcasing the entire trace of a request.

Instrumentation

Use our @baselime/node-opentelemetry package to instrument your Next.js application and add this code sample to your instrumentation.ts file.

import { PrismaInstrumentation } from '@prisma/instrumentation'
export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    const { 
      BaselimeSDK,
      VercelPlugin,
      BetterHttpInstrumentation,
    } = await import('@baselime/node-opentelemetry');

    const sdk = new BaselimeSDK({
      serverless: true,
      instrumentations: [
        new BetterHttpInstrumentation({ 
          plugins: [
            // Add the Vercel plugin to enable correlation between
            // your logs and traces for projects deployed on Vercel
            new VercelPlugin()
          ]
        }),
        new PrismaInstrumentation()
      ]
    });

    sdk.start();
  }
}

If your Next.js application is deployed on Vercel, you can correlate application logs with traces automatically with the Baselime Vercel Integration.

What's Next?

This support for Next.js applications is one step in our efforts to cover the next generation of applications deployed in the cloud. We aim to release:

• Distributed tracing for Cloudflare Workers
• Error-tracking on the edge
• Logs analysis for edge containers

We're eager to hear your thoughts on these new capabilities. Reach out on Twitter or join our community to share your feedback and engage with fellow developers.