CODEWITHSUNDEEP
node.jsloggingnext.js
cdm
cdm

Reputation: 799

How to log all routes in NextJS

I'm very new to NextJS - I currently have a pretty simple app that serves a handful of pages, and returns a 404 page if the route doesn't exist.

I'd like to get logging for every request, including pages that don't exist and return a 404 page. I'm running the app inside a docker container, or I'd like the logs to be written to stdout but not visible in chrome console out.

What's the best way to implement this?

Upvotes: 11

Views: 24513

Answers (4)

x-yuri
x-yuri

Reputation: 18953

One way is to patch nextjs into producing logs (production, output: 'standalone'):

nextjs 12.x:

sed -Ei \
    -e '/await handler/iconst __start = new Date;' \
    -e '/await handler/aconsole.log(`-- [${__start.toISOString()}] ${((new Date - __start) / 1000).toFixed(3)} ${req.method} ${req.url}`);' \
    server.js

nextjs 13.x, 14.x:

sed -Ei \
    -e '/await requestHandler/iconst __start = new Date;' \
    -e '/await requestHandler/aconsole.log(`-- [${__start.toISOString()}] ${((new Date - __start) / 1000).toFixed(3)} ${req.method} ${req.url}`);' \
    node_modules/next/dist/server/lib/start-server.js

steps to reproduce

You can use patch-package for this.

If you need it in development:

nextjs 12.x:

$ cp node_modules/next/dist/server/lib/start-server.js node_modules/next/dist/server/lib/start-server.js.bak
$ sed -Ei \
    -e '/return requestHandler/iconst __start = new Date;' \
    -e '/return requestHandler/aconsole.log(`-- [${__start.toISOString()}] ${((new Date - __start) / 1000).toFixed(3)} ${req.method} ${req.url}`); return __r;' \
    -e '/return requestHandler/s/return/const __r = /' \
    node_modules/next/dist/server/lib/start-server.js

nextjs 13.x, 14.x:

$ cp node_modules/next/dist/server/lib/start-server.js node_modules/next/dist/server/lib/start-server.js.bak
$ sed -Ei \
    -e '/await requestHandler/iconst __start = new Date;' \
    -e '/await requestHandler/aconsole.log(`-- [${__start.toISOString()}] ${((new Date - __start) / 1000).toFixed(3)} ${req.method} ${req.url}`);' \
    node_modules/next/dist/server/lib/start-server.js

Upvotes: 2

Artur Barseghyan
Artur Barseghyan

Reputation: 14202

I ended up using a proxy, which works quite well.

Follow the steps below to get it working on Linux.

Install Caddy:

sudo snap install caddy --edge

Create a Caddyfile in your project/repository directory with the following content:

:3000 {
    reverse_proxy localhost:3001

    log {
        output stdout
        format console
    }
}

Run the proxy server:

caddy run

It's assumed that your NodeJS server is running on port 3001:

yarn dev --port 3001

Upvotes: 0

JasonGenX
JasonGenX

Reputation: 5444

If you're already on AWS and have your nextJS server running behind CloudFront you can easily enable request logging for the corresponding distribution and get this feature "free" without making any nextJS changes. This is also the most performant option IMHO.

Upvotes: 0

Ramakay
Ramakay

Reputation: 3145

This use-case sounds like an access-log setup.

The best way would be to setup a reverse proxy like nginx so it can create logs in your docker container.

If you don't want to do that, you can follow these two steps

  1. Setup a custom server that gets the request https://nextjs.org/docs/advanced-features/custom-server
  2. Use something like https://www.npmjs.com/package/next-bunyan to write out your logs

If you would like access from the front-end to be logged as well as they traverse the application - You could use something like a Google analytics account to capture both client and server side events.

Upvotes: 1

Related Questions