@real-router/logger-plugin

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

Installation

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

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

loggerPluginFactory(options?)

Factory for creating a plugin instance with optional configuration.

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

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

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

loggerPlugin

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

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 |

Configuration Examples

// 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

Timing Display

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

Parameter Diff

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: {...}}

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)

See Wiki for full list.

SSR Support

For high-precision timing in Node.js:

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