Cara Menggunakan Pino-Pretty dengan Next.js (App Router)

TL;DR

Menggunakan opsi transport pino-pretty di Next.js menyebabkan kesalahan karena masalah worker threads. Solusinya adalah dengan menggunakan stream sebagai pengganti transport.

Masalah

Pada App Router di Next.js 13 ke atas, jika Anda mengonfigurasi pino-pretty menggunakan opsi transport pino, Anda akan mengalami kesalahan seperti berikut:

Error: the worker thread exited

Mengapa ini terjadi?

Opsi transport pino-pretty secara internal menggunakan worker threadsthread-stream. Bundler Next.js (SWC/webpack) tidak dapat memproses modul-modul ini dengan benar, sehingga menyebabkan kesalahan saat runtime.

// ❌ Ini tidak akan berfungsi di Next.js

const logger = pino({
transport: {
    target: 'pino-pretty',
    options: { colorize: true }
  }
})

Ada juga saran untuk menambahkan ke serverExternalPackages next.config.js, tetapi meskipun build berhasil, ada kasus di mana modul tidak ditemukan saat runtime.

Solusi

Gunakan stream, bukan transport. Stream tidak menggunakan worker threads, sehingga berfungsi dengan baik di Next.js.

import pino from "pino";
import pretty from "pino-pretty";
// ✅ streamを使えばNext.jsでも動く
const stream = pretty({
  colorize: true,
  ignore: "pid,hostname",
  translateTime: "SYS:HH:MM:ss.l",
});
const logger = pino({ level: "debug" }, stream);

# Referensi

pino-pretty logger doesn't work with Next 13 app directory · vercel/next.js · Discussion #46987

Summary Hi! I've been using the pino json logging library with Next.js for a long time. And the pino-pretty extension for development. When upgrading to Next 13 app folder I noticed that logging us...

github.com

- [Dokumentasi Bundling Pino]