pnpm build error when trying to use winston-loki to send logs to graphana

[ruslany]

Summary

I have custom server side logs in my app implemented with winston. I wanted to send logs to graphana loki so I added winston-loki and created loki transport as shown below.

// Only import winston-loki on the server side
let LokiTransport: unknown;
if (typeof window === 'undefined') {
  // eslint-disable-next-line @typescript-eslint/no-require-imports
  LokiTransport = require('winston-loki');
}
...

// Only add the Loki transport on the server side in production
if (typeof window === 'undefined' && process.env.NODE_ENV === 'production' && LokiTransport) {
  const lokiOptions: LokiTransportOptions = {
    host: process.env.LOKI_HOST || '',
    labels: {
      app: 'nextjs-app', 
      environment: process.env.NODE_ENV || 'development'
    },
    json: true,
    format: format.json(),
    replaceTimestamp: true,
    onConnectionError: (err: Error) => console.error(err)
  };

  // Add basic auth if provided
  if (process.env.LOKI_BASIC_AUTH) {
    lokiOptions.basicAuth = process.env.LOKI_BASIC_AUTH;
  }

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  logger.add(new (LokiTransport as any)(lokiOptions));
}

However, when I try to build using pnpm build I get this error:

./node_modules/.pnpm/@[email protected]/node_modules/@napi-rs/snappy-linux-x64-gnu/snappy.linux-x64-gnu.node
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Import trace for requested module:
./node_modules/.pnpm/@[email protected]/node_modules/@napi-rs/snappy-linux-x64-gnu/snappy.linux-x64-gnu.node
./node_modules/.pnpm/[email protected]/node_modules/snappy/index.js
./node_modules/.pnpm/[email protected]/node_modules/winston-loki/src/batcher.js
./node_modules/.pnpm/[email protected]/node_modules/winston-loki/index.js
./src/lib/loki-logger.ts
./src/app/api/logs/route.ts

I suspect this is webpack trying to parse binary node module. How do I prevent that?

I am new to next.js and node in general. Is winston-loki a good way to send custom logs to graphana or are there better alternatives? I see some existing discussions mentioning OpenTelemetry, but for my app right now it seems like an overkill as I only need custom logs and don't need anything else that otel sends.

Additional information

/bin/sh: 1: yarn: not found

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Tue Nov 5 00:21:55 UTC 2024
  Available memory (MB): 7867
  Available CPU cores: 8
Binaries:
  Node: 22.14.0
  npm: 10.9.2
  Yarn: N/A
  pnpm: 10.9.0
Relevant Packages:
  next: 15.3.1 // Latest available version is detected (15.3.1).
  eslint-config-next: 15.2.4
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.3
Next.js Config:
  output: standalone

Example

No response

[icyJoseph]

Hi,

Could you try, https://nextjs.org/docs/app/api-reference/config/next-config-js/serverExternalPackages?

/** @type {import('next').NextConfig} */
const nextConfig = {
  serverExternalPackages: ['winston-loki'],
}
 
module.exports = nextConfig

[ruslany]

Thanks @icyJoseph for quick reply. I tried that and that error is gone but now I get this error:

> next build

   ▲ Next.js 15.3.1
   - Environments: .env

   Creating an optimized production build ...
 ✓ Compiled successfully in 24.0s
 ✓ Linting and checking validity of types
   Collecting page data  ..TypeError: Invalid URL
    at 67903 (.next/server/app/api/logs/route.js:1:1412)
    at t (.next/server/webpack-runtime.js:1:143)
    at t (.next/server/app/api/logs/route.js:1:2403)
    at <unknown> (.next/server/app/api/logs/route.js:1:2434)
    at t.X (.next/server/webpack-runtime.js:1:1239)
    at <unknown> (.next/server/app/api/logs/route.js:1:2416)
    at Object.<anonymous> (.next/server/app/api/logs/route.js:1:2462) {
  code: 'ERR_INVALID_URL',
  input: '/loki/api/v1/push'
}

> Build error occurred
[Error: Failed to collect page data for /api/logs] { type: 'Error' }

The route.ts file just imports the logger:

import { NextRequest, NextResponse } from 'next/server';
import logger from '@/lib/loki-logger';

[ruslany]

The second error was my mistake. I needed to add LOKI_HOST to my .env file. After doing that the build succeeds! Thanks @icyJoseph for your help!