🔧 Hyper Fetch DevTools Plugin

📖 About

The devtools plugin connects your HyperFetch client to HyperFlow, streaming request lifecycle events, cache state changes, queue activity, and performance metrics in real time. It is the data pipeline that powers HyperFlow's debugging and monitoring capabilities.

🎯 Key Capabilities

• 🔮 See every request live — Real-time stream of request lifecycle events, from start to response
• 💎 Watch your cache change — See entries appear, update, and invalidate as they happen
• 📊 Spot slow endpoints instantly — Timing breakdowns and payload sizes for every request
• 🚀 Monitor your queue — Pending, active, and failed requests visible at a glance
• 📴 Offline detection — Know immediately when your app loses or regains connectivity

🚀 Quick Start

npm install @hyper-fetch/plugin-devtools

import { createClient } from "@hyper-fetch/core";
import { DevtoolsPlugin } from "@hyper-fetch/plugin-devtools";

const client = createClient({ url: "https://api.example.com" }).addPlugin(
  DevtoolsPlugin({ appName: "My App" }),
);

📚 Documentation

• Plugin Devtools Overview
• HyperFlow
• API Reference

💡 Examples

Development-only setup

import { createClient } from "@hyper-fetch/core";
import { DevtoolsPlugin } from "@hyper-fetch/plugin-devtools";

const client = createClient({ url: "https://api.example.com" });

if (process.env.NODE_ENV === "development") {
  client.addPlugin(
    DevtoolsPlugin({
      appName: "My App - Dev",
    }),
  );
}

Multiple clients

const apiClient = createClient({ url: "https://api.example.com" }).addPlugin(
  DevtoolsPlugin({ appName: "API Client" }),
);

const authClient = createClient({ url: "https://auth.example.com" }).addPlugin(
  DevtoolsPlugin({ appName: "Auth Client" }),
);

License

MIT