Pino Causing woker.js ERROR with NextJS 13 app/api Endpoints

[u1x30]

Page to Investigate

localhost:3000/api/example

Steps to Reproduce

Hi -

Running a simple route that outputs a log Hello World using latest version. Any idea on why getting following error?

INSTALL:

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

CODE:

import {log} from '@/util/log-util'
import {NextRequest} from 'next/server'

export async function POST(request: NextRequest) {
log("Hello World")
}

ERROR:

error uncaughtException: Error: Cannot find module '/.next/server/app/api/example/lib/worker.js'
at Module._resolveFilename (node:internal/modules/cjs/loader:1072:15)
at Module._load (node:internal/modules/cjs/loader:925:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)
at MessagePort. (node:internal/main/worker_thread:185:26)
at [nodejs.internal.kHybridDispatch] (node:internal/event_target:762:20)
at exports.emitMessage (node:internal/per_context/messageport:23:28) {
digest: undefined
}

• error node_modules/thread-stream/index.js (195:31) @ Worker.onWorkerExit
• error uncaughtException: Error: the worker thread exited
  at Worker.onWorkerExit (webpack-internal:///(sc_server)/./node_modules/thread-stream/index.js:163:34)
  at Worker.emit (node:events:511:28)
  at [kOnExit] (node:internal/worker:315:10)
  at Worker..onexit (node:internal/worker:229:20) {
  digest: undefined
  }
  null
• error TypeError: Cannot read properties of undefined (reading 'headers')
  at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:261:61)
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
• error node_modules/thread-stream/index.js (229:18) @ ThreadStream.write
• error uncaughtException: Error: the worker has exited
  at ThreadStream.write (webpack-internal:///(sc_server)/./node_modules/thread-stream/index.js:193:25)
  at Pino.write (webpack-internal:///(sc_server)/./node_modules/pino/lib/proto.js:162:12)
  at Pino.LOG [as debug] (webpack-internal:///(sc_server)/./node_modules/pino/lib/tools.js:47:27)
  at log (webpack-internal:///(sc_server)/./lib/util/log-util.ts:98:12)
  at POST (webpack-internal:///(sc_server)/./app/api/example/route.ts:9:56)
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:249:37) {
  digest: undefined
  }

[Theo-flux]

Firstly, you can't use a POST method if you are not POSTING any form of data. So ordinarily if you want to test your API route in NextJS, it is advisable to use a GET method. Lastly, you don't use log but instead you return a new Response object like this:

export async function GET(request: NextRequest) {
    return new Response(JSON.stringify({example: "This is an example GET api endpoint"}))
}

[u1x30]

Thank you, Theo-flux, appreciate your time.

Interesting that page/api endpoints have no issue with the log statement. The log statement is causing the error with app/api endpoints and below both work fine once the log statement is removed:

export async function GET(request: NextRequest) {
// log CAUSES worker.js ERROR
// log("Hello World")
return new Response(JSON.stringify({example: "This is an example GET api endpoint"}))
}

OR

export async function POST(request: NextRequest) {
const json = await request.json()
// log CAUSES ERROR worker.js
// log(json)
return new NextResponse(JSON.stringify({success:true}), {
status: 201,
headers: { "Content-Type": "application/json" },
})
}

[u1x30]

More Details:

Nextjs13 app/api endpoints error when using the pino logger:

node:internal/event_target:1037
process.nextTick(() => { throw err; });
^
Waiting for the debugger to disconnect...
Error: Cannot find module '/ui/.next/server/app/api/order/lib/worker.js'

• error node_modules/thread-stream/index.js (229:18) @ ThreadStream.write
• error uncaughtException: Error: the worker has exited
  at ThreadStream.write (webpack-internal:///(sc_server)/./node_modules/thread-stream/index.js:193:25)
  at Pino.write (webpack-internal:///(sc_server)/./node_modules/pino/lib/proto.js:162:12)
  at Pino.LOG [as debug] (webpack-internal:///(sc_server)/./node_modules/pino/lib/tools.js:47:27

Endpoint does not call logger directly and calls service that uses the pino logger.

Pino works fine with page/api endpoints.

Anyone have any ideas how to get Pino Logger to work with nextjs13 app/api endpoints?

[Theo-flux]

pino hasn't listed nextjs as list of supported frameworks yet. check this out pino

[u1x30]

Thank you Theo-flux.

Interesting, NextJS recommends Pino:

https://nextjs.org/docs/pages/building-your-application/deploying/production-checklist#logging

https://vercel.com/templates/next.js/pino-logging

Anybody from NextJS in this community that can please let us know if there are any plans for Pino app/api support or work arounds to get it working? Should we abandon the recommendation and go with other logger for NextJS 13 app/api?

[bob-obringer]

For what it's worth... I'm having the exact same problem with what appears to be a pretty straightforward setup.

using pino to send logs to betterstack in react server components appears to be doa

[u1x30]

Thanks for letting us know bob-obringer, would it be possible to report the issue on the nextjs repo?

I created but they closed it.
vercel/next.js#54289

Perhaps if you also report and reference above ticket, they will look into it.

[developerasun]

I found a workaround to get pino logger working.

Searched tons of stackoverflows to get the logger work on Nextjs +13, app routers, server components.

Check deps first.

  "dependencies": {
    "next": "13.5.4",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "pino": "^8.15.2"
  }

And then try below.

import pino from 'pino'

// logger.ts
const streams = [
    { stream : process.stdout }, 
    { stream : pino.destination({
        dest: yourLogPathHere, 
        append: true,
        sync: true
    })}, 
]

export const logger = pino({
    timestamp: pino.stdTimeFunctions.isoTime,
    base: undefined
}, pino.multistream(streams))

And then, call it in your API routes and app routers.

export async function GET(request: Request) {
    logger.info("name check: jake")
    logger.warn("something serious going on here")
    logger.error("bad bad things happened")

    return NextResponse.json({
        message: "hello jake"
    })
}

This will log it in terminal and write to file as well.

[ChrisIBill]

pino.destination and multistream throw errors for me on client, so I had to use different methods for client/server

const pinoConfig = {
  config: {
    level: config.level,
    browser: {
      asObject: true,
    },
    base: {
      level: "info",
      env: config.env,
    },
  },
  streams: [{ stream: process.stdout }],
};

if (config.serverUrl) {
  pinoConfig.config.browser = {
    transmit: {
      level: config.level,
      send: send,
    },
  };
}

server side handling

if (process.env.NEXT_RUNTIME === "nodejs") {
  const fileStream = { stream : pino.destination({
    dest: yourLogPathHere, 
    append: true,
     sync: true
    })
  }, 
  pinoConfig.streams.push({stream: fileStream})
  pinoConfig.multistream = pino.multistream(streams);
}

export const logger = pino(pinoConfig.config, pinoConfig.multistream || pinoConfig.streams)

using navigator.sendBeacon to make requests to an api route to handle client side logging

const send = (level: any, logEvent: any) => {
  const { ts, bindings } = logEvent;
  const msg = logEvent.messages[0];
  const headers = {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Headers":
      "Origin, X-Requested-With, Content-Type, Accept",
    type: "application/json",
  };
  let blob = new Blob(
    [
      JSON.stringify({
        level,
        levelValue: logEvent.level?.value,
        origin: "browser",
        ts,
        bindings,
        msg,
      }),
    ],
    headers,
  );
  navigator.sendBeacon(config.serverUrl + "/pino.api", blob);
};

[exKAZUu]

@u1x30
I faced the same issue and confirmed vercel/next.js#54289 (comment) solved the issue.

That is, you should change next.config.js as follows:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: ['pino'],
  },
};

module.exports = nextConfig;