Basic Usage

Snapwyr logs both incoming and outgoing HTTP requests with a real-time dashboard.

Complete Example

import express from 'express';
import { snapwyr } from 'snapwyr/express';
import { logRequests } from 'snapwyr';
import { serve } from 'snapwyr/dashboard';

const app = express();

// Log incoming requests (to your server)
app.use(snapwyr({ logBody: true }));

// Log outgoing requests (to external APIs)
logRequests({ logBody: true });

// Start dashboard at localhost:3333
serve(3333);

app.get('/api/users', async (req, res) => {
  // This outgoing request is also logged
  const data = await fetch('https://api.github.com/users');
  res.json(await data.json());
});

app.listen(3000);

Logging Incoming Requests

Use middleware to log requests to your server.

import express from 'express';
import { snapwyr } from 'snapwyr/express';

const app = express();
app.use(snapwyr());

Console output:

12:34:56 GET    200  45ms   /api/users
12:34:57 POST   201  89ms   /api/users

Logging Outgoing Requests

Log HTTP requests your app makes to external APIs.

import { logRequests } from 'snapwyr';

// Log fetch requests (automatic)
logRequests();
const response = await fetch('https://api.example.com/users');

// To log axios requests, pass your axios instance
import axios from 'axios';
logRequests({ axios: axios });
await axios.get('https://api.example.com/users');

Console output:

12:34:56 GET    200  234ms  https://api.example.com/users

Using the Dashboard

Start the dashboard to view requests in your browser.

import { serve } from 'snapwyr/dashboard';

serve(3333); // Open http://localhost:3333

The dashboard shows:

All requests in real-time
Filter by method, status, direction
Search by URL or body
Request/response bodies
Copy as cURL

Logging Bodies

See what data is sent and received:

snapwyr({ logBody: true });

Redacting Sensitive Data

Hide passwords and tokens:

snapwyr({
  logBody: true,
  redact: ['password', 'token', 'apiKey'],
});

Output shows [REDACTED] for matching fields.

Filtering Requests

Ignore URLs

snapwyr({
  ignorePatterns: ['/health', '/metrics', /^\/_next/],
});

Filter by Method

snapwyr({
  methods: ['POST', 'PUT', 'DELETE'], // Only mutations
});

Errors Only

snapwyr({
  errorsOnly: true, // Only 4xx/5xx
});

Request IDs

Generate unique IDs for tracing:

snapwyr({
  requestId: true, // Adds X-Request-ID header
});

Size Tracking

See request/response sizes:

snapwyr({
  sizeTracking: true,
});

Output:

GET 200 45ms 2.4KB /api/users

Slow Request Detection

Highlight slow requests:

snapwyr({
  slowThreshold: 500, // Mark requests > 500ms
});

Custom Transport

Send logs to external services:

snapwyr({
  transport: (entry) => {
    fetch('https://logs.example.com', {
      method: 'POST',
      body: JSON.stringify(entry),
    });
  },
});

Stopping Logging

import { logRequests, stopLogging } from 'snapwyr';

logRequests();
// ... later
stopLogging();

Basic Usage

On this page