reqwise-core 🚀

Reqwise is a powerful, production-ready developer tool npm package that captures, logs, and visualizes HTTP API requests (Axios/Fetch) within React and vanilla JavaScript applications.

It operates like a mini Postman or Chrome DevTools Network panel embedded directly inside your application. Through a floating aside panel, developers can inspect requests in real-time, browse page history, analyze API endpoints, and send manual test requests with a single click.

Version: 1.1.5 | Status: Production Ready

✨ Core Features

🔄 HTTP Interception & Logging

• Full HTTP Capture: Automatically logs all request/response payloads (method, URL, headers, body, status, duration)
• Axios & Fetch Support: Works seamlessly with Axios interceptors or native fetch API
• Request Timing: Precise measurement of round-trip duration for performance analysis
• Error Tracking: Captures network errors, timeouts, and HTTP error responses with stack traces

💾 Smart Persistence

• localStorage Integration: Stores all request history under reqwise_history_v1 key
• In-Memory Mode: Optional in-memory storage without localStorage pollution (for restricted environments)
• Auto-Cleanup: Configurable maxItems limit with oldest-first eviction strategy
• TTL Support: Automatic deletion of entries older than configurable historyTTL (in days)

🛡️ Security & Privacy

• Header Masking: Redact sensitive headers like Authorization, Cookie, X-API-Key (configurable)
• Field Masking: Obfuscate nested JSON fields like password, token, ssn, cvv with recursive traversal
• Smart Ignore Patterns: Skip unwanted URLs (health checks, analytics, static assets) with regex/substring matching
• No Data Transmission: All data stays local; no external calls made by Reqwise

🌍 Internationalization (i18n)

• 15 Languages Built-in: English, Turkish, Azerbaijani, Russian, German, French, Spanish, Portuguese, Chinese, Japanese, Arabic, Korean, Italian, Polish, Dutch
• Smart Language Detection: Auto-detects user's browser language with fallback to English
• Runtime Switching: UI language selector in the panel (visible when 2+ languages enabled)
• Persistent Selection: Selected language saved to localStorage

⌨️ Keyboard & Hotkey Support

• Customizable Hotkeys: Toggle panel with keyboard shortcut (default: ctrl+shift+e)
• Cross-platform: Works on Windows, Mac, Linux
• Smart Modifier Parsing: Supports ctrl, shift, alt, meta combinations

🎨 UI & UX Enhancements

• 4 Tabbed Interface:
  • Current Tab: Requests from current page
  • History Tab: All captured requests with filtering (method, status, page, source)
  • Send Tab: Mini HTTP client — compose and send test requests
  • Endpoints Tab: Auto-discovered API endpoints with statistics (hit count, methods, params, examples)
• Placement Flexibility: 4 positions (top, right, bottom, left) — sidebars or drawers
• Theme Support: Dark, Light, and System (prefers-color-scheme) themes
• Responsive Sizing: 4 size presets (sm: 320px, md: 420px, lg: 560px, full: 100%)
• Opacity Control: Semi-transparent panels with configurable opacity (0.0–1.0) and backdrop blur
• Request Cards: Compact view (method + URL + status + duration) or detailed view with collapsible sections

🔍 Filtering & Search

• Method Filter: GET, POST, PUT, PATCH, DELETE
• Status Filter: All, Success (2xx), Client Errors (4xx), Server Errors (5xx)
• Page Filter: View requests by page (useful in SPAs)
• Source Filter: Auto-captured vs. manual (Send tab) requests
• URL Search: Text filter by URL patterns

📊 Endpoint Intelligence

• Auto-Discovery: Learns all API endpoints from captured requests
• Statistics: Per-endpoint metrics (hit count, HTTP methods used, parameter types)
• Type Inference: Detects query parameter types (string, number, boolean)
• Example Collection: Stores real-world examples of parameter values

📤 Advanced Features (v1.1)

• Callback Hooks:
  • onRequest(entry) — fires when request starts
  • onResponse(entry) — fires on successful response
  • onError(entry) — fires on HTTP error (4xx/5xx) or network failure
• Request Grouping: Optionally group requests by URL, method, status, or page
• Highlight Mode: Highlight error requests (red) or slow requests (>500ms, yellow)

📦 Installation

npm

npm install reqwise-core

pnpm

pnpm add reqwise-core

yarn

yarn add reqwise-core

🚀 Architecture Flow

Reqwise acts as a transparent interceptor layer:

Application
    ↓
ReqwiseClient.post("/api/users", data)
    ↓
[Capture request metadata]
    ↓
↙ With Axios          Or    Fetch with fallback ↘
axios.post(...)              fetch(...)
    ↓
Backend API
    ↓
Response received
    ↓
[Record response, status, duration]
    ↓
[Dispatch reqwise:update event]
    ↓
[Panel re-renders with new entry]
    ↓
[Save to localStorage]
    ↓
Application receives response

Data Lifecycle

1. Request Started → captured metadata (method, URL, headers, body)
2. HTTP Executed → Axios or fetch sends actual request
3. Response Received → status, headers, body captured
4. Callbacks Fired → onRequest → storage → onResponse/onError
5. UI Updated → panel detects new entry via custom event
6. Persistence → localStorage.setItem('reqwise_history_v1', ...)

💻 TypeScript Data Models

ReqwiseEntry

interface ReqwiseEntry {
  id: string                           // Unique ID (auto-generated)
  source: "auto" | "manual"            // auto: captured, manual: Send tab
  page: string                         // window.location.href at capture time
  timestamp: string                    // ISO 8601 timestamp
  method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE"
  url: string                          // Full URL or relative path
  params?: Record<string, unknown>     // Query parameters
  requestHeaders?: Record<string, string>
  requestBody?: unknown                // JSON or FormData
  status?: number                      // HTTP status (200, 404, 500, etc.)
  statusText?: string                  // Status text ("OK", "Not Found", etc.)
  responseHeaders?: Record<string, string>
  responseBody?: unknown               // Response JSON/text
  duration?: number                    // Round-trip time in milliseconds
  error?: { message: string; stack?: string }
}

ReqwiseConfig

interface ReqwiseConfig {
  // UI & Display
  theme?: "light" | "dark" | "system"              // default: "system"
  placement?: "top" | "right" | "bottom" | "left"  // default: "right"
  defaultOpen?: boolean                            // default: false
  show?: "general" | "detailed"                    // default: "general"
  size?: "sm" | "md" | "lg" | "full"              // default: "md"
  opacity?: number                                 // 0.0-1.0, default: 1.0

  // Control
  enabled?: boolean                                // default: true
  hotkey?: string                                  // default: "ctrl+shift+e"
  axiosInstance?: unknown                          // Optional Axios instance

  // Storage
  persistHistory?: boolean                         // default: true
  maxItems?: number                                // default: 200
  historyTTL?: number                             // TTL in days, default: undefined (no expiry)

  // Filtering
  ignore?: string[]                                // default: []
  maskHeaders?: string[]                           // default: []
  maskFields?: string[]                            // default: []

  // i18n
  langs?: SupportedLang[]                         // default: ["en"]
  defaultLang?: SupportedLang                     // Auto-detected from browser

  // v1.1 Callbacks
  onRequest?: (entry: Partial<ReqwiseEntry>) => void
  onResponse?: (entry: ReqwiseEntry) => void
  onError?: (entry: ReqwiseEntry) => void

  // v1.1 UX
  groupBy?: "url" | "method" | "status" | "page"
  highlight?: "error" | "slow" | "none"           // default: "error"
}

⚙️ Core Modules

client.ts — HTTP Interception Engine

• initClient(config) — Initialize with configuration
• recordPartial(entry) — Record partial entry (request or response)
• wrapAxios(instance) — Setup Axios interceptors
• get/post/put/patch/delete(url, data?, config?) — HTTP methods with fallback to fetch

storage.ts — Persistent & In-Memory Storage

• initStorage(config) — Setup storage backend
• saveEntry(entry) — Save entry to memory and localStorage (if enabled)
• getEntries() — Retrieve all entries (newest first)
• subscribe(callback) — Listen for storage changes
• TTL enforcement — auto-delete entries older than historyTTL days
• Limit enforcement — keep only latest maxItems entries

filter.ts — Security & Pattern Matching

• shouldIgnore(url) — Check if URL matches ignore patterns
• maskHeaders(headers) — Redact sensitive headers with ****
• maskFields(obj) — Recursively redact nested object fields
• Pattern matching — supports regex and substring matching

panel.ts — DOM & Hotkey Management

• mount(config) — Inject panel into document.body
• unmount() — Remove panel and clean up event listeners
• open() / close() / toggle() — Panel state management
• Hotkey listener — parse and bind keyboard shortcut
• Placement handling — position panel relative to viewport
• Theme application — data-theme attribute for CSS scoping

renderer.ts — Tab System & UI Rendering

• renderTabs() — Render and switch between 4 tabs
• renderCurrent() — Show requests from current page
• renderHistory() — Show all requests with filters
• renderSendRequest() — Mini HTTP client form
• renderEndpoints() — API endpoint analytics
• Event listeners — "Send" button, tab switching, form submission

i18n.ts — Translation Catalog

• t(key, lang) — Get translated string
• setLanguage(lang) — Update active language
• Supported languages: en, tr, az, ru, de, fr, es, pt, zh, ja, ar, ko, it, pl, nl
• Fallback to English if key not found

types.ts — TypeScript Interfaces

• HttpMethod — "GET" | "POST" | "PUT" | "PATCH" | "DELETE"
• SupportedLang — 15 language codes
• ReqwiseEntry — Request/response data shape
• ReqwiseConfig — Configuration options
• RequestConfig — Axios request config shape

logo.ts — Embedded Assets

• REQWISE_ICON_32 — 32x32px base64-encoded PNG icon (~2KB)
• REQWISE_ICON_48 — 48x48px base64-encoded PNG icon (~3KB)
• Used for panel header and toggle button

styles.ts — Scoped CSS

• All styles scoped to #reqwise-panel (no :root pollution)
• Theme variants (light, dark, system) via [data-theme] attribute
• Placement variants (top, right, bottom, left) via [data-placement] attribute
• Smooth animations and transitions
• Dark mode support with backdrop blur

🛠️ Configuration Examples

Minimal Setup

import { panel, client } from 'reqwise-core'

// Initialize client
client.initClient({ enabled: true })

// Mount panel
panel.mount()

Production Configuration

import axios from 'axios'
import { panel, client } from 'reqwise-core'

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
})

client.initClient({
  enabled: process.env.NODE_ENV === 'development',
  theme: 'dark',
  placement: 'right',
  defaultOpen: false,
  maxItems: 500,
  persistHistory: true,
  langs: ['en', 'tr'],
  defaultLang: 'en',
  ignore: ['/health', '/ping', 'analytics.google.com'],
  maskHeaders: ['Authorization', 'X-API-Key'],
  maskFields: ['password', 'ssn', 'cvv', 'token'],
  hotkey: 'ctrl+shift+e',
  // v1.1 Callbacks
  onRequest: (entry) => console.log('Request:', entry.method, entry.url),
  onResponse: (entry) => {
    if (entry.duration && entry.duration > 1000) {
      console.warn('Slow request:', entry.url, `${entry.duration}ms`)
    }
  },
  onError: (entry) => console.error('API Error:', entry.status, entry.url),
})

// Wrap Axios
client.wrapAxios(api)

// Mount panel
panel.mount({
  placement: 'right',
  theme: 'dark',
  size: 'md',
  opacity: 0.98,
})

Advanced: With Callbacks & Filtering

client.initClient({
  ignore: [
    '/metrics',
    'cdn.jsdelivr.net',
    'google-analytics',
    '*.png', '*.jpg', '*.css' // file extensions
  ],
  maskHeaders: ['Authorization', 'X-CSRF-Token', 'Set-Cookie'],
  maskFields: ['password', 'pin', 'secret_key', 'access_token'],
  historyTTL: 7, // Auto-delete entries older than 7 days
  groupBy: 'url', // Group requests by endpoint
  highlight: 'slow', // Highlight requests > 500ms
  onError: (entry) => {
    // Send to error tracking service
    Sentry.captureException(new Error(`API Error: ${entry.status} ${entry.url}`))
  },
})

🔌 API Reference

Client Methods

// These are available from reqwise-core → client module
client.initClient(config?)
client.recordPartial(entry)
client.wrapAxios(axiosInstance)
client.get(url, config?)
client.post(url, body?, config?)
client.put(url, body?, config?)
client.patch(url, body?, config?)
client.delete(url, config?)
client.fetch(url, options?) // native fetch wrapper

Storage Methods

storage.initStorage(config?)
storage.saveEntry(entry)
storage.getEntries() // returns all entries
storage.subscribe(callback) // listen for changes

Panel Methods

panel.mount(config?)
panel.unmount()
panel.open()
panel.close()
panel.toggle()
panel.setRenderer(rendererFn)

i18n Methods

i18n.t(key, lang?) // Get translation
i18n.setLanguage(lang) // Set active language
i18n.getLanguage() // Get current language

Filter Methods

filter.shouldIgnore(url)
filter.maskHeaders(headers)
filter.maskFields(obj)
filter.setConfig(config)
filter.addIgnorePattern(pattern)
filter.removeIgnorePattern(pattern)

🌐 Supported Languages

| Code | Language | Code | Language | |------|----------|------|----------| | en | English | tr | Türkçe (Turkish) | | az | Azərbaycanca | ru | Русский (Russian) | | de | Deutsch | fr | Français | | es | Español | pt | Português | | zh | 中文 (Chinese) | ja | 日本語 (Japanese) | | ar | العربية (Arabic) | ko | 한국어 (Korean) | | it | Italiano | pl | Polski | | nl | Nederlands |

📊 Browser & Environment Support

• Node.js: 14+ (for SSR checks, no DOM operations)
• Browsers: Chrome, Firefox, Safari, Edge (all modern versions)
• React: 17+ (via @reqwise/react)
• Framework: Vanilla TS (framework-agnostic)

🔒 Security & Privacy Considerations

1. No Network Calls: Reqwise never sends data anywhere — everything stays in localStorage/memory
2. Masking Works Offline: Sensitive data is redacted before anything is stored
3. Development-Only: Disable in production with enabled: false
4. localStorage Isolation: Uses dedicated key reqwise_history_v1 — no conflicts
5. GDPR Friendly: TTL support lets you auto-delete old data
6. CSP Compatible: No eval, no inline scripts, safe for strict CSP policies

🚀 Performance Considerations

• Bundle Size: ~15KB gzipped (core package only)
• Runtime Overhead: <2ms per request (timing measurement)
• Memory Usage: ~100KB for 200 entries (default limit)
• Storage: ~50KB in localStorage for 200 typical entries
• No Memory Leaks: Proper cleanup on panel unmount

📝 Changelog

v1.1.3 (Current)

• Improved documentation with comprehensive examples
• Enhanced TypeScript types and interfaces
• Stable callback system (onRequest, onResponse, onError)
• TTL support for automatic history cleanup
• Better error handling and logging

v1.1.2

• Added callback hooks (onRequest, onResponse, onError)
• Introduced TTL (Time-To-Live) for history entries
• Enhanced filtering capabilities
• Improved renderer performance

v1.1.0

• Introduced Endpoints tab with auto-discovery
• Added size and opacity props
• Improved UI responsiveness

v1.0.0

• Initial release with core features

📄 License

MIT © Ali Zadeh

🤝 Contributing

Contributions are welcome! Please submit issues or pull requests to improve Reqwise.

Reqwise makes debugging HTTP requests in development dramatically easier. Enjoy! 🎉