react-network-logger

A lightweight, customizable network logger and inspector for React and Next.js apps. Debug, monitor, and inspect fetch/XHR/axios network requests in development.

Features

• 📡 Real-time logging of all network requests (fetch & axios)
• 🛰️ Beautiful, floating in-app network inspector UI
• 🔍 View request/response headers, bodies, status, and errors
• 🧩 Easy integration with React or Next.js projects
• ⚡ TypeScript support

Installation

npm install react-network-logger

Peer dependencies:

• react (v18 or v19)
• axios (v0.21.4 or newer, <2.0.0)

Usage in React.js

1. Intercept network requests

Add these lines at the top level of your app (e.g., in App.tsx or index.tsx):

import { interceptFetch, interceptAxios, NetworkDebugger } from 'react-network-logger';

interceptFetch();
interceptAxios(); // Optionally, pass your custom axios instance: interceptAxios(myAxios)

2. Add the Network Debugger UI

Add the floating logger component anywhere in your React tree (usually in App.tsx):

function App() {
  return (
    <>
      {/* ...your app components... */}
      <NetworkDebugger />
    </>
  );
}

Usage in Next.js

1. Intercept network requests

Add the interceptors in your custom _app.js or _app.tsx file:

// pages/_app.js or pages/_app.tsx
import { useEffect } from 'react';
import { interceptFetch, interceptAxios, NetworkDebugger } from 'react-network-logger';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    interceptFetch();
    interceptAxios();
  }, []);

  return (
    <>
      <Component {...pageProps} />
      <NetworkDebugger />
    </>
  );
}

export default MyApp;

Note:

• The interceptors should be called only on the client side. Using them inside useEffect ensures they run only in the browser.
• Place <NetworkDebugger /> outside or alongside your main layout so it appears on every page.

How it works

• Click the 🛰️ button (bottom-right) to open the network logger.
• Inspect all captured requests and responses, including headers, bodies, status, and errors.
• Click "Clear" to remove all logs.
• Click "×" to close the logger.

Example (React)

import React from 'react';
import { interceptFetch, interceptAxios, NetworkDebugger } from 'react-network-logger';

interceptFetch();
interceptAxios();

function App() {
  return (
    <div>
      {/* Your app code */}
      <NetworkDebugger />
    </div>
  );
}

export default App;

Example (Next.js)

// pages/_app.js or pages/_app.tsx
import { useEffect } from 'react';
import { interceptFetch, interceptAxios, NetworkDebugger } from 'react-network-logger';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    interceptFetch();
    interceptAxios();
  }, []);

  return (
    <>
      <Component {...pageProps} />
      <NetworkDebugger />
    </>
  );
}

export default MyApp;

Advanced

• Custom axios instance: If you use a custom axios instance, pass it to interceptAxios(myAxios).

• TypeScript: All exports are fully typed.

License

ISC