next-fetch-logger

A simple, zero-config fetch logging system for Next.js.
It automatically intercepts and logs all external API requests made with fetch() during development, including the URL, method, status, duration, request payload, and a preview of the response.

All logs are written to a logs/fetch.log file at your project root.

Features

• Works out of the box with Next.js instrumentation hooks
• Logs all server-side external API requests (Node.js runtime only)
• Shows detailed request and response data (truncated preview for large bodies)
• Filters out internal Next.js telemetry calls
• Writes logs to logs/fetch.log
• Development-only (safe for production)

Note:
This logger only captures server-side fetch calls.
If logs do not appear, try disabling browser caching (Disable cache) in your browser’s DevTools.
Additionally, if a response contains very large arrays or long text fields, they will be automatically truncated for readability in the logs.

Installation

npm install next-fetch-logger
# or
yarn add next-fetch-logger

Usage

Create or edit your instrumentation.ts file at the root of your Next.js project:

// instrumentation.ts
export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    if (process.env.NODE_ENV === 'development') {
      const { default: nextFetchLogger } = await import('next-fetch-logger');
      nextFetchLogger();
    }
  }
}

If you are using Next.js 14 or later, you can enable the instrumentation hook in your next.config.js:

// next.config.js
const nextConfig = {
  experimental: {
    instrumentationHook: true,
  },
};

module.exports = nextConfig;

When you run next dev, every external fetch() request will be logged under:

/logs/fetch.log

Example log output:

[2025-10-23T09:01:18.045Z] POST https://api.example.com/user
status: 200 | duration: 191ms
{
  request: { id: 1, name: "John" },
  response: { success: true }
}
-------------------------------------------

Notes

• This logger is designed for server-side fetch calls (Node.js runtime only).
• It does not log internal Next.js telemetry or static asset requests.
• Recommended to use only in development mode.
• If logs are missing, disable browser caching and retry.
• Large response arrays or fields will be truncated in the log preview.

Log File

All logs are saved in:

logs/fetch.log

Each request entry contains:

• Timestamp
• HTTP Method
• URL
• Status Code
• Duration (ms)
• Request payload (if available)
• Response body preview (auto-truncated)

Author

Developed by Hyeoksoo Shin
MIT Licensed.