@real-router/logger-plugin


Console logging plugin for Real-Router. Provides transition timing, parameter diff tracking, Performance API integration, and log grouping.

Installation

``bash
npm install @real-router/logger-plugin


or

pnpm add @real-router/logger-plugin

or

yarn add @real-router/logger-plugin

or

bun add @real-router/logger-plugin
`

Quick Start

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

const router = createRouter(routes);

// Use with default settings
router.usePlugin(loggerPluginFactory());

router.start();
`

Console output:

`
[logger-plugin] Router started
▼ Router transition
[logger-plugin] Transition: home → users {from: {...}, to: {...}}
[logger-plugin] Transition success (1.23ms) {to: {...}, from: {...}}
`

---

API

$3

Factory for creating a plugin instance with optional configuration.

`typescript
import { loggerPluginFactory } from "@real-router/logger-plugin";

// Default configuration
router.usePlugin(loggerPluginFactory());

// With custom options
router.usePlugin(loggerPluginFactory({
level: "errors",
showTiming: false,
}));
`

$3

Ready-to-use plugin instance with default settings. Provided for backward compatibility.

`typescript
import { loggerPlugin } from "@real-router/logger-plugin";

router.usePlugin(loggerPlugin);
`

---

Configuration

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

$3

`typescript
// With custom context for multiple routers
router.usePlugin(loggerPluginFactory({
context: "main-router",
}));

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

// Errors only (for production-like environments)
router.usePlugin(loggerPluginFactory({
level: "errors",
showTiming: false,
}));

// Minimal output
router.usePlugin(loggerPluginFactory({
level: "transitions",
showParamsDiff: false,
showTiming: false,
}));
`

See Wiki for detailed descriptions.

---

Features

$3

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

$3

When navigating within the same route:

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

$3

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)

See Wiki for full list.

---

SSR Support

For high-precision timing in Node.js:

`typescript
import { performance } from "perf_hooks";

if (typeof globalThis.performance === "undefined") {
globalThis.performance = performance;
}
``

---

Documentation

Full documentation on Wiki:

- Configuration Options
- Lifecycle Hooks
- Performance Marks
- Migration from router5

---

Related Packages

- @real-router/core — Core router
- @real-router/browser-plugin — Browser history

License

MIT © Oleg Ivanov