What's the Best Way to logging with App Router? (Self-Hosted)

[zaru]

Summary

I am using Next.js (v14) with App Router (Self-Hosted). To pass structured logs of each request to Datadog, I utilize middleware.ts. Here's an example of the code I am currently running in middleware.ts:

export default async function middleware(
  request: NextRequest,
  event: NextFetchEvent,
) {
  const response = NextResponse.next();
  const { pathname, searchParams } = request.nextUrl;
  const agent = userAgent(request);
  const session = await getSession(request, response); // In case user information is in the session
  const log: ErrorType = {
    level: "info",
    ip: request.ip ?? request.headers.get("x-forwarded-for") ?? "",
    method: request.method,
    pathname: pathname,
    search_params: Object.fromEntries(searchParams),
    browser: agent.browser,
    device: agent.device,
    "user-agent": request.headers.get("user-agent"),
    "x-amzn-trace-id": request.headers.get("x-amzn-trace-id"),
  };
  if (session) {
    log.user = {
      app: session.user.app,
      sid: session.user.sid,
      sub: session.user.sub,
      email: session.user.email,
      name: session.user.name,
    };
  }
  console.log(JSON.stringify(log));
  return response;
};

However, while middleware allows me to obtain request information, I still lack information on the response. Without this, it's unclear whether the request was successful or failed. I want to obtain the HTTP status code of the response.

Additionally, I am unable to capture error logs from exceptions that occur in server components (such as ServerActions). The error.tsx component catches them, but being a client component, it obscures the details of the error, passing only a digest. I wish to inspect the details in Datadog's error logs, but am unable to do so.

"use client"; // Error components must be Client Components

import { useEffect } from "react";
import { datadogLogs } from "@datadog/browser-logs";

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    datadogLogs.logger.error(error.message, { ...error }, error);
  }, [error]);

  return (
    <div>
      <h2>Something went wrong!</h2>
      <button
        type="button"
        onClick={
          // Attempt to recover by trying to re-render the segment
          () => reset()
        }
      >
        Try again
      </button>
    </div>
  );
}

I am seeking advice on good logging practices with Next.js.

Additional information

No response

Example

No response

[zaru]

I was able to output the response time and HTTP status by patching the server.js file generated when running npm run build. However, this patch seems fragile and not a good solution...

// .next/standalone/node_modules/next/dist/server/lib/start-server.js

    async function requestListener(req, res) {
        const startTime = process.hrtime.bigint();
        res.on('finish', ()=>{
            const endTime = process.hrtime.bigint();
            const responseTime = Number(endTime - startTime) / 1000000;
            console.log({
                statusCode: res.statusCode,
                method: req.method,
                url: req.url,
                responseTime: responseTime
            });
        });
// snip...