","directories":{},"_nodeVersion":"22.21.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.5.0","tslint":"^6.1.3","ts-jest":"^29.1.0","prettier":"^2.8.8","typescript":"4.8.2","@types/jest":"^29.5.1","changelogen":"^0.6.2","@types/react":"^18.3.28","tslint-config-prettier":"^1.18.0"},"peerDependencies":{"react":">=16.8.0"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/rilog-lib_0.6.6_1778958020727_0.09160530841396852","host":"s3://npm-registry-packages-npm-production"}},"0.6.7":{"name":"@rilog-development/rilog-lib","version":"0.6.7","keywords":["rilog","frontend logger monitoring","logger","debugger","frontend debugger","axios","axios logger","axios debugger","react","react logger","react-logger"],"author":{"name":"Andrii Karnaukh","email":"kaowebdev@gmail.com"},"license":"MIT","_id":"@rilog-development/rilog-lib@0.6.7","maintainers":[{"name":"kaowebdev","email":"kaowebdev@gmail.com"}],"homepage":"https://github.com/rilog-development/rilog-lib/tree/main#readme","bugs":{"url":"https://github.com/rilog-development/rilog-lib/issues"},"dist":{"shasum":"6f393fcea819874f1335d1bf4ef03d4b51e8be6c","tarball":"https://registry.npmjs.org/@rilog-development/rilog-lib/-/rilog-lib-0.6.7.tgz","fileCount":137,"integrity":"sha512-WuZzdMdhUlYP+/QpVXp73tjMPYMmFi/E1HIoljS5+PNxw68WHRMcUSkZkvMbxupk+CfFwBTGQqqeS9r8HsTWZw==","signatures":[{"sig":"MEUCIQD57Qcq9KbvS8g5vbiwc5BqNjW5wuSy/e36IWHB8EFb+wIgFnQtIhhueIhLlGaHg6atWe/XRD+I2gkApIIf2KCMRqc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":196512},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"7fd34fc1ec7e50e0d9bc2a09c5af664e931e065e","scripts":{"lint":"tslint -p tsconfig.json","test":"jest --config jestconfig.json","build":"node scripts/generate-secrets.js && tsc","minor":"npm version minor","patch":"npm version patch","format":"prettier --write \"src/**/*.ts\"","prepare":"npm run build && husky","release":"npm publish --access public","version":"npm run format && changelogen && git add -A src CHANGELOG.md","postversion":"git push && git push --tags","prepublishOnly":"npm run lint"},"_npmUser":{"name":"kaowebdev","email":"kaowebdev@gmail.com"},"repository":{"url":"git+https://github.com/rilog-development/rilog-lib.git#main","type":"git"},"_npmVersion":"10.9.4","description":"
","directories":{},"_nodeVersion":"22.21.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.5.0","husky":"9.1.7","tslint":"^6.1.3","ts-jest":"^29.1.0","prettier":"^2.8.8","typescript":"4.8.2","@types/jest":"^29.5.1","changelogen":"^0.6.2","@types/react":"^18.3.28","jest-environment-jsdom":"^30.4.1","tslint-config-prettier":"^1.18.0"},"peerDependencies":{"react":">=16.8.0"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/rilog-lib_0.6.7_1779122260806_0.8914156321413134","host":"s3://npm-registry-packages-npm-production"}},"0.6.8":{"name":"@rilog-development/rilog-lib","version":"0.6.8","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"author":{"name":"Andrii Karnaukh","email":"kaowebdev@gmail.com"},"license":"MIT","scripts":{"test":"jest --config jestconfig.json","test:coverage":"jest --config jestconfig.json --coverage","test:coverage:open":"jest --config jestconfig.json --coverage && open coverage/index.html","build":"node scripts/generate-secrets.js && tsup","format":"prettier --write \"src/**/*.ts\"","lint":"tslint -p tsconfig.json","prepare":"npm run build && husky","prepublishOnly":"npm run lint","version":"npm run format && changelogen --from $(git describe --abbrev=0 --tags) && git add -A src CHANGELOG.md","postversion":"git push && git push --tags","minor":"npm version minor","patch":"npm version patch","release":"npm publish --access public"},"keywords":["rilog","frontend logger monitoring","logger","debugger","frontend debugger","axios","axios logger","axios debugger","react","react logger","react-logger"],"peerDependencies":{"react":">=16.8.0"},"peerDependenciesMeta":{"react":{"optional":true}},"devDependencies":{"@types/jest":"^29.5.1","@types/react":"^18.3.28","changelogen":"^0.6.2","fake-indexeddb":"^6.2.5","husky":"9.1.7","jest":"^29.5.0","jest-environment-jsdom":"^30.4.1","prettier":"^2.8.8","ts-jest":"^29.1.0","tslint":"^6.1.3","tslint-config-prettier":"^1.18.0","tsup":"^8.5.1","typescript":"4.8.2"},"repository":{"type":"git","url":"git+https://github.com/rilog-development/rilog-lib.git#main"},"_id":"@rilog-development/rilog-lib@0.6.8","gitHead":"4ac82c708bcbe83a7c920bfe32dcd19da50208d8","description":"
","bugs":{"url":"https://github.com/rilog-development/rilog-lib/issues"},"homepage":"https://github.com/rilog-development/rilog-lib/tree/main#readme","_nodeVersion":"22.21.0","_npmVersion":"10.9.4","dist":{"integrity":"sha512-PXiICNX9TnhS9kWHRqo1X/nMAxoSJFE6Q54uOL3V66clBh11NAnhGsw4fMxRo6GR5xDxXWxCvUKyx5DWzeevbQ==","shasum":"78133e1fce1769cf4e6d6eda5af9dcfcb41343cd","tarball":"https://registry.npmjs.org/@rilog-development/rilog-lib/-/rilog-lib-0.6.8.tgz","fileCount":7,"unpackedSize":89420,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCiyFoxXr9RgcPweLeLyL2pLnV0ilpYCx4AsUkjI12PTAIhAJ3aILRzAJcGuqdtYdwMVV2Nv3Kwr5AAbZUFz7Uwdfwa"}]},"_npmUser":{"name":"kaowebdev","email":"kaowebdev@gmail.com"},"directories":{},"maintainers":[{"name":"kaowebdev","email":"kaowebdev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/rilog-lib_0.6.8_1779208028594_0.3578788209703454"},"_hasShrinkwrap":false}},"time":{"created":"2023-09-16T21:21:18.058Z","modified":"2026-05-19T16:27:08.926Z","0.0.15":"2023-09-16T21:21:18.415Z","0.0.16":"2023-09-17T11:43:22.890Z","0.3.12":"2024-03-02T22:36:53.616Z","0.3.13":"2024-03-02T22:53:37.838Z","0.3.14":"2024-03-02T22:58:31.204Z","0.3.15":"2024-03-07T19:58:25.598Z","0.3.17":"2024-03-11T13:18:30.823Z","0.3.18":"2024-03-11T13:54:46.352Z","0.3.19":"2024-03-18T08:54:52.456Z","0.4.0":"2026-02-27T20:38:13.448Z","0.4.1":"2026-02-27T20:50:12.978Z","0.4.2":"2026-02-27T21:06:17.926Z","0.4.3":"2026-02-27T21:19:27.393Z","0.5.0":"2026-03-04T16:52:08.421Z","0.5.1":"2026-03-05T15:56:11.238Z","0.5.2":"2026-03-06T19:42:40.401Z","0.5.3":"2026-03-19T20:21:51.230Z","0.5.4":"2026-03-19T20:29:02.981Z","0.5.5":"2026-03-20T07:33:01.434Z","0.5.6":"2026-03-26T17:07:24.200Z","0.5.7":"2026-03-27T12:13:20.978Z","0.5.10":"2026-04-03T20:07:49.332Z","0.5.11":"2026-04-03T20:42:35.063Z","0.6.1":"2026-05-14T20:01:36.743Z","0.6.2":"2026-05-16T12:26:36.816Z","0.6.3":"2026-05-16T12:34:44.990Z","0.6.4":"2026-05-16T12:49:18.301Z","0.6.5":"2026-05-16T18:47:36.506Z","0.6.6":"2026-05-16T19:00:20.882Z","0.6.7":"2026-05-18T16:37:41.042Z","0.6.8":"2026-05-19T16:27:08.803Z"},"bugs":{"url":"https://github.com/rilog-development/rilog-lib/issues"},"author":{"name":"Andrii Karnaukh","email":"kaowebdev@gmail.com"},"license":"MIT","homepage":"https://github.com/rilog-development/rilog-lib/tree/main#readme","keywords":["rilog","frontend logger monitoring","logger","debugger","frontend debugger","axios","axios logger","axios debugger","react","react logger","react-logger"],"repository":{"type":"git","url":"git+https://github.com/rilog-development/rilog-lib.git#main"},"description":"
","maintainers":[{"name":"kaowebdev","email":"kaowebdev@gmail.com"}],"readme":"
\n\n# Rilog lib\n\n**See exactly what happened in your app before the bug was filed.**\n\n[](https://www.npmjs.com/package/@rilog-development/rilog-lib)\n[](https://www.npmjs.com/package/@rilog-development/rilog-lib)\n[](https://www.typescriptlang.org/)\n[](LICENSE)\n\n
\n\n---\n\nYou get a bug report with no steps to reproduce. The user just says \"it didn't work.\" Sound familiar?\n\nRilog captures the full picture automatically — every HTTP request, console error, button click, and input change — and streams it to a local dashboard or your own backend. No cloud account. No data leaves your infrastructure. Two lines of code to set up.\n\nDrop it into any React, Next.js, or Vue app and immediately know the exact sequence of events that led to the crash.\n\n---\n\n## Dashboard preview\n\n**Event list** — all captured events for an app and date, with type badges, timestamps, and HTTP status codes at a glance:\n\n\n\n**Event detail** — click any event to inspect the full payload: URL, method, request and response body, headers, device info, and custom params:\n\n\n\n---\n\n## Get started in 3 steps\n\n**1. Install**\n\n```bash\nnpm i @rilog-development/rilog-lib\n```\n\n**2. Init — choose your storage mode**\n\nWith [rilog local server](https://github.com/rilog-development/local-server) (log files + built-in dashboard, runs locally or on your server):\n\n```javascript\nimport rilog from '@rilog-development/rilog-lib';\n\nrilog.init({\n localServer: {\n appName: 'my-app',\n url: 'http://localhost:3030', // wherever rilog-local-server is running\n },\n});\n```\n\nOr with your own backend:\n\n```javascript\nrilog.init({\n selfServer: {\n url: 'https://your-backend.com/logs', // any POST endpoint you define\n },\n});\n```\n\n**3. Watch events**\n\nOpen the rilog local server dashboard at the URL where you deployed it — HTTP requests, errors, clicks, and custom events appear automatically.\n\n---\n\n## What gets captured\n\n| | Event | Description | Automatic |\n| --- | --------------- | ------------------------------------------------------------ | --------- |\n| 🌐 | `REQUEST` | HTTP requests via fetch | ✓ |\n| 🌐 | `REQUEST` | HTTP requests via XMLHttpRequest | ✓ |\n| 🌐 | `REQUEST` | HTTP requests via axios (with `wrapAxios`) | ✓ |\n| 🖱️ | `CLICK` | Clicks on `button`, `a` elements | ✓ |\n| ⌨️ | `INPUT` | Input field values on focus-out | ✓ |\n| 🚨 | `CONSOLE_ERROR` | `console.error()`, uncaught exceptions, unhandled rejections | ✓ |\n| ⚠️ | `CONSOLE_WARN` | `console.warn()` calls | ✓ |\n| 📡 | `DEBUG_MESSAGE` | Manual call via `rilog.logData()` | manual |\n\n## Framework compatibility\n\n| Framework | Support |\n| --------------- | ---------- |\n| React 16+ | ✅ Full |\n| Next.js | ✅ Full |\n| Vue 2/3 | ✅ Full |\n| Angular 12+ | ⚡ Partial |\n| Svelte | ⚡ Partial |\n| Plain HTML + JS | ✅ Full |\n\n## Framework presets\n\n> **Important:** Without presets, Rilog captures every HTTP request — including internal framework and dev-server traffic. In a Next.js app this means hundreds of `__nextjs_*`, `_vercel/` and HMR requests filling your storage with noise. Add the matching preset when you initialise the library.\n\n`rilog-lib` exports ready-made `ignoredRequests` arrays for popular frameworks and common third-party tools. Spread one or more into your config — they combine cleanly because each preset is just a plain `string[]`.\n\n```typescript\nimport rilog, { presets } from '@rilog-development/rilog-lib';\n\nrilog.init({\n localServer: { appName: 'my-app', url: 'http://localhost:3030' },\n ignoredRequests: [\n ...presets.nextjs, // /__nextjs_*, _next/webpack-hmr, _vercel/\n ...presets.noAnalytics, // google-analytics.com, gtm, hotjar, segment, mixpanel\n '/api/health', // your own additions go right here\n ],\n});\n```\n\n### Available presets\n\n| Preset | Filters | Use when |\n| --- | --- | --- |\n| `presets.nextjs` | `__nextjs_*`, `_next/webpack-hmr`, `_vercel/` | App runs on Next.js or is deployed to Vercel |\n| `presets.vite` | `/@vite/`, `/@react-refresh`, `/@fs/` | App uses Vite as the dev server (React, Vue, Svelte…) |\n| `presets.noAnalytics` | Google Analytics, GTM, Hotjar, Segment, Mixpanel | You don't need to track third-party analytics requests |\n\nYou can also mix presets with `config.ignoredRequests` from the full [Config reference](#config) — they are merged into a single list.\n\n---\n\n## Table of Contents\n\n---\n\n- [Dashboard preview](#dashboard-preview)\n- [Installation and usage](#installation-and-usage)\n- [Framework presets](#framework-presets)\n- [Axios — wrapAxios](#axios--wrapaxios)\n- [XHR interception](#xhr-interception)\n- [Axios vs XHR strategy](#axios-vs-xhr-strategy)\n- [Input interception](#input-interception)\n- [Console interception](#console-interception)\n- [React ErrorBoundary](#react-errorboundary)\n- [Debug messages](#debug-messages)\n- [Storing to your server](#your-server)\n- [Local server (rilog local server)](#local-server)\n- [Config](#config)\n- [Meta](#meta)\n- [Examples](#examples)\n- [Contacts](#contacts)\n\n## Installation and usage\n\n---\n\n### Installing\n\n```bash\nyarn add @rilog-development/rilog-lib\n```\n\nor\n\n```bash\nnpm i @rilog-development/rilog-lib\n```\n\n### Init\n\n`rilog.init(config?)` accepts a single optional config object — all fields are optional.\n\nYou must pass either `localServer` or `selfServer` to specify where events are stored. Without either, events are collected but never flushed.\n\n```javascript\nrilog.init({\n localServer: {\n appName: 'my-app',\n url: 'http://localhost:3030',\n },\n});\n```\n\n### Usage (fetch)\n\nBy default Rilog intercepts all `fetch` requests automatically when you call `rilog.init()`. No extra code needed.\n\nYou can disable it via config:\n\n```javascript\nrilog.init({\n disableFetchInterceptor: true,\n localServer: { appName: 'my-app', url: 'http://localhost:3030' },\n});\n```\n\n---\n\n## Axios — wrapAxios\n\n---\n\nThe recommended way to capture axios requests is `rilog.wrapAxios()`. Call it once after `rilog.init()`, passing your axios instance (default or custom).\n\n```javascript\nimport axios from 'axios';\nimport rilog from '@rilog-development/rilog-lib';\n\nrilog.init({\n localServer: { appName: 'my-app', url: 'http://localhost:3030' },\n disableXHRInterceptor: true,\n});\n\n// Default axios instance\nrilog.wrapAxios(axios);\n```\n\nWith a custom instance:\n\n```javascript\nconst api = axios.create({ baseURL: '/api' });\n\nrilog.init({\n localServer: { appName: 'my-app', url: 'http://localhost:3030' },\n disableXHRInterceptor: true,\n});\n\nrilog.wrapAxios(api);\n```\n\n`wrapAxios` automatically adds request and response interceptors, including **error responses (4xx / 5xx)**.\n\n> **Why `disableXHRInterceptor: true`?** Axios uses XMLHttpRequest internally. Without this flag, axios requests are captured twice — once via `wrapAxios` and once via the automatic XHR interceptor. See [Axios vs XHR strategy](#axios-vs-xhr-strategy) for details.\n\n### Manual axios interceptors (alternative)\n\nIf you prefer to control interceptors yourself:\n\n```javascript\ninstance.interceptors.request.use((request) => {\n rilog.interceptRequestAxios(request);\n return Promise.resolve(request);\n});\n\ninstance.interceptors.response.use(\n (response) => {\n rilog.interceptResponseAxios(response);\n return Promise.resolve(response);\n },\n (error) => {\n rilog.interceptResponseAxios(error);\n return Promise.reject(error);\n },\n);\n```\n\n---\n\n## XHR interception\n\n---\n\nRilog automatically patches `window.XMLHttpRequest` and intercepts all XHR requests — including those from third-party libraries (jQuery, payment SDKs, upload libraries, etc.).\n\nXHR interception is enabled by default. Disable it via config:\n\n```javascript\nrilog.init({\n localServer: { appName: 'my-app', url: 'http://localhost:3030' },\n disableXHRInterceptor: true,\n});\n```\n\nCaptured events include: URL, method, request headers, request body (serialized), response status, and response text. `FormData` bodies are converted to plain objects. Binary bodies (`Blob`, `ArrayBuffer`) are represented as size descriptors.\n\n---\n\n## Axios vs XHR strategy\n\n---\n\nBecause axios uses XHR (or fetch) internally, there is a potential for **double-capturing** the same request. Choose the approach that fits your project:\n\n### App uses axios only\n\nUse `wrapAxios` and disable XHR interception. You get better data quality (structured body, parsed JSON, full headers) with no duplicates.\n\n```javascript\nrilog.init({\n localServer: { appName: 'my-app', url: 'http://localhost:3030' },\n disableXHRInterceptor: true,\n});\nrilog.wrapAxios(axios);\n```\n\n### App uses fetch only (no axios)\n\nNo extra configuration needed. Fetch is intercepted automatically.\n\n```javascript\nrilog.init({ localServer: { appName: 'my-app', url: 'http://localhost:3030' } });\n```\n\n### App uses axios + third-party libraries that use XHR\n\nUse `wrapAxios` for axios and keep XHR interception active for third-party requests. Axios requests are captured twice in this case, but third-party XHR requests are covered.\n\n```javascript\nrilog.init({ localServer: { appName: 'my-app', url: 'http://localhost:3030' } }); // XHR stays active\nrilog.wrapAxios(axios); // axios also captured via adapter\n```\n\n### App uses no axios (only plain fetch / XHR)\n\nEverything is captured automatically. No additional setup required.\n\n```javascript\nrilog.init({ localServer: { appName: 'my-app', url: 'http://localhost:3030' } });\n```\n\n### Data quality comparison\n\n| | `wrapAxios` | Automatic XHR |\n| ------------------- | -------------------- | ------------------- |\n| Request body | Structured object | Serialized string |\n| Response body | Parsed JSON | Raw `responseText` |\n| 4xx / 5xx responses | Via error handler | Via `loadend` event |\n| Query params | From `config.params` | From URL only |\n\n---\n\n## Input interception\n\n---\n\nRilog captures input field values when the user leaves a field (`focusout`). This works automatically in React, Next.js, and plain DOM apps — no extra configuration needed.\n\n**What is captured:**\n\n- Element `id`, `name`, class names, node type, input type\n- Value at the time of focus-out\n\n**Sensitive fields are masked automatically.** Fields with `type=\"password\"` or `autocomplete` values like `cc-number`, `cc-csc`, `cc-exp`, `current-password`, `new-password` have their values replaced with `\"*\"`.\n\nDisable input interception via config:\n\n```javascript\nrilog.init({\n disableInputInterceptor: true,\n localServer: { appName: 'my-app', url: 'http://localhost:3030' },\n});\n```\n\n---\n\n## Console interception\n\n---\n\nAfter calling `rilog.init()`, Rilog automatically intercepts:\n\n- `console.error()` and `console.warn()` calls\n- **Uncaught runtime exceptions** via `window.onerror` — captures message, source file, line and column numbers, and stack trace\n- **Unhandled Promise rejections** via `window.addEventListener('unhandledrejection')` — captures the rejection reason and stack trace\n\nIf a `console.error()` argument is an `Error` object, its message and full stack trace are serialized correctly (not `[object Object]`).\n\nExisting `window.onerror` handlers in your app are preserved — Rilog chains its handler and always calls the original.\n\nEach captured console event includes:\n\n- **level** — `\"warn\"` or `\"error\"`\n- **message** — serialized arguments\n- **stackTrace** — call stack (requires source maps for readable references)\n- **source** — `\"console\"`, `\"runtime\"`, or `\"unhandledRejection\"`\n- **errorFile**, **errorLine**, **errorColumn** — available for runtime exceptions\n\nThe original `console.warn` / `console.error` behavior is preserved — messages still appear in DevTools.\n\n**Disabling console interception:**\n\n```javascript\nrilog.init({\n disableConsoleInterceptor: true,\n localServer: { appName: 'my-app', url: 'http://localhost:3030' },\n});\n```\n\n---\n\n## React ErrorBoundary\n\n---\n\nFor React applications, Rilog provides a `RilogErrorBoundary` component that catches errors in the React component tree (via `componentDidCatch`) and sends them to Rilog with the label `FATAL_REACT_ERROR`.\n\n```jsx\nimport rilog from '@rilog-development/rilog-lib';\nimport { RilogErrorBoundary } from '@rilog-development/rilog-lib/dist/react/RilogErrorBoundary';\n\nrilog.init({ localServer: { appName: 'my-app', url: 'http://localhost:3030' } });\n\nfunction App() {\n return (\n
Something went wrong.}>\n
\n \n );\n}\n```\n\nThe captured event includes the error `message`, `stack`, and React's `componentStack` — making it easy to identify which component caused the crash.\n\n`RilogErrorBoundary` props:\n\n| Prop | Type | Required | Description |\n| -------- | ----------- | -------- | ------------------------------------- |\n| rilog | `IRilog` | Yes | The rilog instance. |\n| children | `ReactNode` | Yes | The component tree to protect. |\n| fallback | `ReactNode` | No | UI to render when an error is caught. |\n\n---\n\n## Last Gasp — sending events before page close\n\n---\n\nWhen the page is about to close or navigate away, Rilog automatically flushes any pending events that haven't been sent yet. This ensures that events leading up to a crash or navigation are not lost.\n\n- For `selfServer` and `localServer` modes: uses `navigator.sendBeacon` (non-blocking, guaranteed delivery even after page close)\n- For Rilog cloud: uses `fetch` with `keepalive: true` (supports the `Authorization` header)\n\nThis behavior is automatic and requires no configuration.\n\n---\n\n## Debug messages\n\n---\n\nUse `rilog.logData()` as a replacement for `console.log` — it sends custom messages to your storage.\n\n```javascript\nrilog.logData(data, { label });\n```\n\n| Param | Type | Required | Description |\n| ----- | -------- | -------- | ------------------------------------------------------------------------------ |\n| data | `any` | Yes | Any value — string, object, number, etc. Objects are serialized automatically. |\n| label | `string` | Yes | A label for filtering events in your storage (e.g. component name). |\n\nThe event also automatically captures a **stack trace** from the call site (requires source maps to be enabled in your application for readable file/line references).\n\n**Examples:**\n\n```javascript\n// Simple string message\nrilog.logData('User submitted the form', { label: 'CheckoutForm' });\n\n// Object\nrilog.logData({ userId: 123, step: 'payment' }, { label: 'CheckoutForm' });\n```\n\n**Wrapper utility (recommended for large projects):**\n\n```javascript\n// src/utils/debug.ts\nimport rilog from '@rilog-development/rilog-lib';\n\nexport const debug = (data: unknown, label: string) => {\n rilog.logData(data, { label });\n};\n```\n\n```javascript\n// In any component\nimport { debug } from '@/utils/debug';\n\ndebug({ userId, step: 'payment' }, 'CheckoutForm');\n```\n\n---\n\n## Your server\n\n---\n\nYou can use your own backend for storing intercepted events. Create a `POST` endpoint at any path you choose and pass its full URL in the `selfServer` config.\n\nEvery time events are flushed, Rilog sends a `POST` to your endpoint with the following body:\n\n```typescript\n{\n events: string; // JSON string — parse it on the server side\n}\n```\n\n**Example:**\n\n```javascript\nrilog.init({\n selfServer: {\n url: 'https://your-backend.com/logs',\n },\n});\n```\n\nWith auth headers:\n\n```javascript\nrilog.init({\n selfServer: {\n url: 'https://your-backend.com/logs',\n headers: { Authorization: 'Bearer your-token' },\n },\n});\n```\n\nYour endpoint must respond with:\n\n```json\n{ \"result\": \"success\" }\n```\n\nEvents are cleared from storage only after a successful response.\n\n### Self server config\n\n| Param | Type | Required | Description |\n| ------- | ------------------------ | -------- | --------------------------------------------------------------------------- |\n| url | `string` | Yes | Full URL of your `POST` endpoint. You define the path — it can be anything. |\n| headers | `Record
` | No | Additional headers sent with each save request. |\n\n---\n\n## Local server\n\n---\n\n[rilog local server](https://github.com/rilog-development/local-server) is a companion server that receives events from rilog-lib and saves them to structured log files. It includes a **built-in dashboard** for browsing and inspecting logs — no cloud, no database, no auth required.\n\n### Deployment options\n\n**Option A — run locally** (on your dev machine):\n\n```bash\ngit clone https://github.com/rilog-development/local-server.git\ncd local-server\nnpm install\nnpm run start\n```\n\nThe server starts on `http://localhost:3030` by default (port is configurable). The dashboard is available at the same URL in your browser.\n\n**Option B — deploy to your own server** (shared team instance, staging environment, etc.):\n\nDeploy rilog local server to any host — VPS, Docker, cloud VM. Configure the port and CORS origins as needed. The `url` you pass to rilog-lib should point to wherever the server is running.\n\n> See the [rilog local server repository](https://github.com/rilog-development/local-server) for full server configuration (port, log format, CORS, file rotation, dashboard auth, etc.).\n\n### Configure rilog-lib\n\nPass `localServer` to `rilog.init()`. The `url` is the base URL of wherever your rilog local server is running.\n\n**Local dev setup:**\n\n```javascript\nimport rilog from '@rilog-development/rilog-lib';\n\nrilog.init({\n localServer: {\n appName: 'my-app',\n url: 'http://localhost:3030',\n },\n});\n```\n\n**Remote/shared server:**\n\n```javascript\nrilog.init({\n localServer: {\n appName: 'my-app',\n url: 'https://rilog.your-company.com',\n },\n});\n```\n\n**With metadata attached to every batch:**\n\n```javascript\nrilog.init({\n localServer: {\n appName: 'my-app',\n url: 'http://localhost:3030',\n params: {\n environment: 'development',\n branch: 'feature/login',\n version: '1.2.0',\n },\n },\n});\n```\n\n### localServer config\n\n| Param | Type | Required | Description |\n| --------- | ------------------------ | -------- | --------------------------------------------------------------------------------------------------- |\n| `appName` | `string` | Yes | Identifies the app. Events are saved to `logs//` on the server. |\n| `url` | `string` | Yes | Base URL of the running rilog local server — local or remote. |\n| `params` | `Record` | No | Arbitrary metadata attached to every log batch. Useful for environment, branch, build version, etc. |\n\n### Framework examples\n\n**React (Vite / CRA)**\n\n```typescript\n// src/rilog.ts — initialize before anything else\nimport rilog from '@rilog-development/rilog-lib';\n\nrilog.init({\n localServer: {\n appName: 'my-react-app',\n url: 'http://localhost:3030',\n params: { env: process.env.NODE_ENV ?? 'development' },\n },\n});\n\nexport default rilog;\n```\n\n```typescript\n// src/main.tsx\nimport './rilog';\nimport { StrictMode } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport App from './App';\n\ncreateRoot(document.getElementById('root')!).render(\n \n \n ,\n);\n```\n\n**Next.js (App Router)**\n\n```typescript\n// app/providers.tsx\n'use client';\nimport { useEffect } from 'react';\nimport rilog, { presets } from '@rilog-development/rilog-lib';\n\nexport function RilogProvider({ children }: { children: React.ReactNode }) {\n useEffect(() => {\n rilog.init({\n localServer: {\n appName: 'my-next-app',\n url: 'http://localhost:3030',\n params: { env: process.env.NODE_ENV },\n },\n // Recommended: filter out Next.js internal requests to keep storage clean\n ignoredRequests: [...presets.nextjs],\n });\n }, []);\n return <>{children};\n}\n```\n\n**Vue 3 (Vite)**\n\n```typescript\n// src/plugins/rilog.ts\nimport type { App } from 'vue';\nimport rilog, { presets } from '@rilog-development/rilog-lib';\n\nexport function installRilog(app: App) {\n rilog.init({\n localServer: {\n appName: 'my-vue-app',\n url: 'http://localhost:3030',\n params: { env: import.meta.env.MODE },\n },\n // Recommended: filter out Vite dev-server requests to keep storage clean\n ignoredRequests: [...presets.vite],\n });\n}\n```\n\n### Log files and dashboard\n\nEvents are saved to date-stamped files on the server:\n\n```\nlogs/\n my-app/\n 2025-05-15.log.ndjson\n 2025-05-16.log.ndjson\n```\n\nOpen the dashboard at the server URL in your browser to browse sessions, filter events, and inspect requests. To tail logs from the terminal:\n\n```bash\ntail -f logs/my-app/2025-05-16.log.ndjson\n```\n\n---\n\n## Config\n\n---\n\nFull list of `TRilogInitConfig` options:\n\n| Param | Type | Description |\n| --------------------------- | ------------------------------------ | -------------------------------------------------------------------------------------- |\n| `ignoredRequests` | `string[]` | URLs of requests that will not be stored. |\n| `sensetiveRequsts` | `string[]` | Requests whose headers and body will be replaced with `\"sensitive\"`. |\n| `sensetiveDataRequests` | `string[]` | Requests whose body only will be replaced with `\"sensitive\"` (e.g. card data). |\n| `headers` | `string[]` | Only these headers will be stored. By default no headers are stored. |\n| `localStorage` | `string[]` | Only these localStorage keys will be captured per request snapshot. |\n| `disableFetchInterceptor` | `boolean` | Disable automatic `fetch` interception. |\n| `disableXHRInterceptor` | `boolean` | Disable automatic `XMLHttpRequest` interception. Set to `true` when using `wrapAxios`. |\n| `disableClickInterceptor` | `boolean` | Disable automatic click interception on `button` and `a` elements. |\n| `disableConsoleInterceptor` | `boolean` | Disable automatic `console.warn` / `console.error` interception. |\n| `disableInputInterceptor` | `boolean` | Disable automatic input field value capture on focus-out. |\n| `selfServer` | [`ISelfServer`](#self-server-config) | Config for storing events to your own backend. |\n| `localServer` | `ILocalServerConfig` | Config for storing events to a rilog local server. |\n| `deployServer` | `IDeployServerConfig` | Config for Rilog cloud. **Closed beta** — not publicly available yet. |\n| `onPushEvent` | `(event) => void` | Callback fired each time an event is intercepted. |\n| `onSaveEvents` | `(events) => void` | Callback fired before events are sent to storage. |\n| `meta` | [`TExternalInfoMeta`](#meta) | Environment metadata attached to every session. |\n\n---\n\n## Meta\n\n---\n\nThe `meta` object lets you attach environment context to each session. All fields are optional.\n\n| Field | Type | Example |\n| ----------- | -------- | ---------------------------- |\n| environment | `string` | `\"production\"`, `\"staging\"` |\n| branch | `string` | `\"main\"`, `\"feat/my-branch\"` |\n| framework | `string` | `\"React 18.0.0\"` |\n| platform | `string` | `\"Browser\"`, `\"Node.js 20\"` |\n\n```javascript\nrilog.init({\n localServer: { appName: 'my-app', url: 'http://localhost:3030' },\n meta: {\n environment: process.env.NODE_ENV,\n branch: 'main',\n framework: 'React 18.0.0',\n platform: 'Browser',\n },\n});\n```\n\n---\n\n## Examples\n\n---\n\n### React app with axios\n\n```javascript\nimport axios from 'axios';\nimport rilog from '@rilog-development/rilog-lib';\n\nrilog.init({\n localServer: { appName: 'my-app', url: 'http://localhost:3030' },\n disableXHRInterceptor: true,\n meta: { environment: process.env.NODE_ENV, framework: 'React 18' },\n});\n\nrilog.wrapAxios(axios);\n```\n\n### Next.js app\n\n```javascript\n// app/providers.tsx or pages/_app.tsx\nimport rilog from '@rilog-development/rilog-lib';\n\nrilog.init({\n localServer: { appName: 'my-app', url: 'http://localhost:3030' },\n disableXHRInterceptor: true,\n meta: { environment: process.env.NODE_ENV, framework: 'Next.js 14' },\n});\n\nrilog.wrapAxios(axios);\n```\n\n### React app with ErrorBoundary\n\n```jsx\nimport rilog from '@rilog-development/rilog-lib';\nimport { RilogErrorBoundary } from '@rilog-development/rilog-lib/dist/react/RilogErrorBoundary';\n\nrilog.init({\n localServer: { appName: 'my-app', url: 'http://localhost:3030' },\n disableXHRInterceptor: true,\n});\nrilog.wrapAxios(axios);\n\nexport default function App() {\n return (\n Oops, something broke.}>\n
\n \n );\n}\n```\n\n### Self-hosted backend (Cloudflare Worker, custom server)\n\n```javascript\nrilog.init({\n selfServer: {\n url: 'https://your-worker.your-subdomain.workers.dev/logs',\n },\n disableXHRInterceptor: true,\n});\n\nrilog.wrapAxios(axios);\n```\n\n### Sensitive Requests\n\n```javascript\nrilog.init({\n localServer: { appName: 'my-app', url: 'http://localhost:3030' },\n sensetiveDataRequests: ['/api/v1/pay/card', '/api/v1/send/card'],\n});\n```\n\n### Ignored requests\n\nPass a list of URL substrings. Any request whose URL contains one of these strings will be skipped entirely.\n\n```javascript\nrilog.init({\n localServer: { appName: 'my-app', url: 'http://localhost:3030' },\n ignoredRequests: ['https://analytics.example.com', '/api/health'],\n});\n```\n\nUse [framework presets](#framework-presets) to quickly add common filters without listing each URL manually:\n\n```javascript\nimport rilog, { presets } from '@rilog-development/rilog-lib';\n\nrilog.init({\n localServer: { appName: 'my-app', url: 'http://localhost:3030' },\n ignoredRequests: [\n ...presets.nextjs,\n ...presets.noAnalytics,\n '/api/health',\n ],\n});\n```\n\n### Capture specific headers and localStorage values\n\n```javascript\nrilog.init({\n localServer: { appName: 'my-app', url: 'http://localhost:3030' },\n headers: ['Authorization', 'X-Request-Id'],\n localStorage: ['token', 'userId'],\n});\n```\n\n### Local server with axios\n\n```javascript\nrilog.init({\n localServer: {\n appName: 'my-app',\n url: 'http://localhost:3030',\n params: {\n environment: process.env.NODE_ENV,\n branch: 'main',\n },\n },\n disableXHRInterceptor: true,\n});\n\nrilog.wrapAxios(axios);\n```\n\n### Event callbacks\n\n```javascript\nrilog.init({\n localServer: { appName: 'my-app', url: 'http://localhost:3030' },\n onPushEvent: (event) => {\n console.log('New event intercepted:', event);\n },\n onSaveEvents: (events) => {\n console.log('Sending events to storage:', events);\n },\n});\n```\n\n---\n\n## Contacts\n\n---\n\nIf you have any questions, feel free to reach out:\n\n- **Email:** [rilog.ceo@gmail.com](mailto:rilog.ceo@gmail.com)\n- **LinkedIn:** [andrii-karnaukh-webdev](https://www.linkedin.com/in/andrii-karnaukh-webdev/)\n","readmeFilename":"README.md"}