klog-network-sdk

Zero-dependency network monitoring SDK. Patches globalThis.fetch to automatically capture and ship network logs to your klog backend.

Works in React Native, web (React, Vue, plain JS), and Node.js. Supports axios via an interceptor attachment.

Installation

npm install klog-network-sdk

Quick start

import Klog from 'klog-network-sdk';

Klog.init({
  apiUrl: 'https://your-api.workers.dev',
  apiKey: 'your-api-key',
  appVersion: '1.0.0',
});

That's it. Every fetch call in your app is now captured and batched to klog.

React Native

// app/_layout.tsx  (Expo) or  index.js  (bare RN)
import Klog from 'klog-network-sdk';
import { Platform } from 'react-native';
import DeviceInfo from 'react-native-device-info'; // optional

Klog.init({
  apiUrl: 'https://your-api.workers.dev',
  apiKey: 'your-api-key',
  appVersion: DeviceInfo.getVersion(),
  device: {
    model: DeviceInfo.getModel(),
    osName: Platform.OS,
    osVersion: String(Platform.Version),
  },
});

With axios (React Native)

React Native's axios uses XMLHttpRequest under the hood, which the fetch patch doesn't see. Use attachAxios instead:

import axios from 'axios';
import Klog from 'klog-network-sdk';

Klog.init({ apiUrl: '...', apiKey: '...', appVersion: '1.0.0' });
Klog.attachAxios(axios); // attach after init

Track the current user

// After login
Klog.setUserId('user-123');

// After logout
Klog.setUserId('');

Track the current screen

// In your navigation listener
Klog.setScreenName('HomeScreen');

Web (React / Vue / plain JS)

// main.tsx
import Klog from 'klog-network-sdk';

Klog.init({
  apiUrl: 'https://your-api.workers.dev',
  apiKey: 'your-api-key',
  appVersion: import.meta.env.VITE_APP_VERSION ?? '0.0.0',
});

With axios (web)

import axios from 'axios';
import Klog from 'klog-network-sdk';

Klog.init({ apiUrl: '...', apiKey: '...', appVersion: '1.0.0' });
Klog.attachAxios(axios);

Node.js / backend

import Klog from 'klog-network-sdk';

Klog.init({
  apiUrl: 'https://your-api.workers.dev',
  apiKey: 'your-api-key',
  appVersion: process.env.npm_package_version ?? '0.0.0',
  captureResponseBody: false, // optional: skip large response bodies
});

Configuration

| Option | Type | Default | Description | |---|---|---|---| | apiUrl | string | required | klog API base URL | | apiKey | string | required | API key from the klog dashboard | | appVersion | string | required | Semantic version of your app (e.g. "1.2.3") | | batchSize | number | 10 | Flush after this many logs accumulate | | batchInterval | number | 5000 | Flush interval in ms | | captureRequestBody | boolean | true | Include request bodies in logs | | captureResponseBody | boolean | true | Include response bodies in logs | | maxBodySize | number | 10240 | Max body size in bytes before truncation | | ignoreUrls | string[] | [] | URL substrings to exclude from logging | | device | DeviceInfo | auto-detected | Device metadata attached to every log | | onError | (err: Error) => void | — | Called on internal SDK errors |

DeviceInfo

interface DeviceInfo {
  model?: string;    // e.g. "iPhone 14", "Pixel 7"
  osName?: string;   // e.g. "iOS", "Android", "web"
  osVersion?: string; // e.g. "17.2", "14"
}

API

Klog.init(config)                  // initialize (re-init destroys previous instance)
Klog.attachAxios(axiosInstance)    // attach axios interceptors
Klog.setUserId(id)                 // tag logs with a user id
Klog.setScreenName(name)           // tag logs with the current screen/route
Klog.setDevice(device)             // update device metadata
Klog.flush()                       // manually flush the queue (async)
Klog.destroy()                     // stop SDK and restore original fetch

Behaviour notes

• Failed requests are flushed immediately — not batched — so errors appear in the dashboard within ~1 second.
• Requests to apiUrl itself are automatically excluded to prevent infinite loops.
• Klog.attachAxios() is safe to call before Klog.init() — the attachment is deferred until init runs.
• Bodies larger than maxBodySize are truncated with a …[truncated N bytes] suffix.

TypeScript

All types are exported:

import type { KlogConfig, DeviceInfo, QueuedLog } from 'klog-network-sdk';