@real-router/logger-plugin

Development logging plugin for Real-Router. Transition timing, parameter diffs, Performance API marks, and log grouping.

[logger-plugin] Router started
▼ Router transition
  [logger-plugin] Transition: home → users.profile {from: {...}, to: {...}}
  [logger-plugin]   Changed: { id: "123" → "456" }, Added: {"sort":"name"}
  [logger-plugin] Transition success (1.23ms) {to: {...}, from: {...}}

Installation

npm install @real-router/logger-plugin

Peer dependency: @real-router/core

Quick Start

import { createRouter } from "@real-router/core";
import { loggerPluginFactory } from "@real-router/logger-plugin";

const router = createRouter(routes);
router.usePlugin(loggerPluginFactory());

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | level | "all" \| "transitions" \| "errors" \| "none" | "all" | What to log | | showTiming | boolean | true | Transition execution time (adaptive ms/μs) | | showParamsDiff | boolean | true | Show param changes on same-route navigation | | usePerformanceMarks | boolean | false | Create Performance API marks for DevTools | | context | string | "logger-plugin" | Log prefix (useful for multiple routers) |

Log Levels

| Level | Lifecycle (start/stop) | Transitions | Warnings (cancel) | Errors | |-------|:-----:|:-----------:|:-------:|:------:| | "all" | Yes | Yes | Yes | Yes | | "transitions" | — | Yes | Yes | Yes | | "errors" | — | — | — | Yes | | "none" | — | — | — | — |

Usage Examples

// Multiple routers — distinguish by context
router.usePlugin(loggerPluginFactory({ context: "main-router" }));

// Performance profiling
router.usePlugin(loggerPluginFactory({ usePerformanceMarks: true }));

// Errors only (staging/production)
router.usePlugin(loggerPluginFactory({ level: "errors" }));

Features

Adaptive Timing

[logger-plugin] Transition success (15ms)       // normal
[logger-plugin] Transition success (27.29μs)    // fast (<0.1ms)

Parameter Diff

Logs added, changed, and removed params when navigating within the same route:

[logger-plugin]   Changed: { id: "123" → "456" }, Added: {"sort":"name"}

Performance API

With usePerformanceMarks: true, creates marks visible in DevTools Performance tab:

router:transition-start:{from}→{to}
router:transition-end:{from}→{to}
router:transition:{from}→{to}              (measure)
router:lifetime                             (measure: start → stop)

Documentation

Full documentation: Wiki — logger-plugin

• Configuration Options
• Performance Marks
• Migration from router5

Related Packages

| Package | Description | |---------|-------------| | @real-router/core | Core router (required peer dependency) | | @real-router/browser-plugin | Browser History API integration |

Contributing

See contributing guidelines for development setup and PR process.

License

MIT © Oleg Ivanov