Use Subtrace on Vercel+Next.js

Support for Vercel is experimental. We strongly recommend testing it out in your preview environment first.

Add the subtrace-next package to your app:

npm install subtrace-next

Import the package at the top-level:

// top level file, usually layout.tsx
import "subtrace-next";

This will automatically trace all the outgoing requests in your Next.js app.

Add instrumentation to trace incoming requests. In your route.ts files, wrap your route handlers with the trace function:

// app/api/foo/route.ts
import { NextRequest, NextResponse } from "next/server";

import { trace } from "subtrace-next";

export const GET = trace((request: NextRequest) => {
  const { searchParams } = new URL(request.url);
  const name = searchParams.get("name") || "World";

  const responseData = {
    message: `Hello ${name}!`,
    method: "GET",
    timestamp: new Date().toISOString(),
    query: Object.fromEntries(searchParams.entries()),
  };

  return NextResponse.json(responseData);
});

Add the SUBTRACE_TOKEN environment variable to your preview/production environments on Vercel:

Mark this as a sensitive environment variable.

If you don’t have a Subtrace token, you can get one on the Tokens page of the dashboard.

Deploy your app as you normally would (eg: with vercel deploy)

And that’s it! You can see a realtime stream of your app’s requests on the Subtrace dashboard.

Cloudflare Workers Fly.io

Getting Started

Platforms

Language guides

Configuration

Tutorials

Advanced

Reference

Use Subtrace on Vercel+Next.js