@turbo-mock/request-tracker

A React component for tracking and inspecting network requests in real-time using a service worker.

Installation

Step 1: Install the package

npm install @turbo-mock/request-tracker

The service worker file (sw.js) is automatically copied to your app's public folder during installation via the postinstall script.

Step 2: Verify service worker installation

After installation, check that sw.js exists in your public folder:

ls public/sw.js

Step 3: Manual installation (if needed)

If the automatic installation didn't work or you need to reinstall the service worker, you can run:

Option 1: Using npx (recommended)

npx -p @turbo-mock/request-tracker install-sw

Option 2: Using npm script

npm run install-sw --prefix node_modules/@turbo-mock/request-tracker

Option 3: From the package directory

cd node_modules/@turbo-mock/request-tracker
npm run install-sw

Features

• 🎯 Track all network requests (fetch/XHR)
• 🔍 Filter requests by domain and HTTP method
• 📊 View request/response details
• 💾 Download request data as JSON
• 🎨 Floating UI panel with customizable position
• ⚡ Automatic service worker setup via postinstall script

Usage

import { RequestTracker } from '@turbo-mock/request-tracker';
import '@turbo-mock/request-tracker/style.css';

function App() {
  return (
    <div>
      <h1>My App</h1>
      <RequestTracker />
    </div>
  );
}

Service Worker Setup

The service worker (sw.js) is required for the component to function. It intercepts network requests and sends them to the React component for display.

Automatic Setup

The service worker is automatically installed to your public folder when you run npm install. This happens via the postinstall script.

Manual Setup

If you need to manually install or reinstall the service worker:

Option 1: Using npx (recommended)

npx -p @turbo-mock/request-tracker install-sw

Option 2: Using npm script

npm run install-sw --prefix node_modules/@turbo-mock/request-tracker

Option 3: Direct copy

cp node_modules/@turbo-mock/request-tracker/dist/sw.js public/sw.js

Note: Make sure your public folder exists before running the installation script.

Components

RequestTracker

A floating button that opens a panel to view and filter network requests.

Props:

• externalServiceWorkerPath?: string - Custom path to service worker (default: '/sw.js')
• maxRequests?: number - Maximum number of requests to keep in memory (default: 100)
• position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' - Panel position (default: 'bottom-right')

Example:

<RequestTracker 
  maxRequests={50}
  position="top-right"
  externalServiceWorkerPath="/custom-sw.js"
/>

Hook

useFetchTrackerRegistration

Custom hook for managing service worker registration and request tracking.

import { useFetchTrackerRegistration } from '@turbo-mock/request-tracker';

function MyComponent() {
  const {
    requests,
    filteredRequests,
    clearRequests,
    downloadRequests,
    // ... other utilities
  } = useFetchTrackerRegistration({
    maxRequests: 100,
    position: 'bottom-right'
  });

  // Use the hook data...
}