@nxtwebmasters/nxt-smart-logger
Version:
A configurable smart logger for web apps that supports server and Google Tag Manager (GTM) logging with user/session context.
220 lines (170 loc) • 7.32 kB
Markdown
A sophisticated console interceptor that supercharges your logging capabilities with server integration, GTM support, context/meta injection, custom log levels, and reusable structured logs for modern applications.
* **🔀 Batched Log Transmission** - Optimize network calls with configurable batching
* **📊 GTM Integration** - Seamless integration with Google Tag Manager
* **👤 Contextual Logging** - Attach user/session context automatically
* **⚡ Multiple Destinations** - Send logs to server, GTM, or both simultaneously
* **🛡️ Error Resilient** - Automatic retries for failed transmissions
* **🔄 Framework Agnostic** - Works with Angular, React, Vue, or vanilla JS
* **🧹 Custom Logging** - Define your own log types and structured events
* **✨ Extendable API** - Inject tags, meta, or override per log call
```bash
npm install @nxtwebmasters/nxt-smart-logger
yarn add @nxtwebmasters/nxt-smart-logger
```
```ts
import { ConsoleInterceptor } from "@nxtwebmasters/nxt-smart-logger";
const interceptor = new ConsoleInterceptor({
batchSize: 10,
flushInterval: 5000,
contextProvider: () => ({
userId: "USER123",
sessionId: "SESSION456",
appVersion: "1.0.0",
}),
serverLogger: async (logs) => {
await fetch("https://yourserver.com/api/logs", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(logs),
});
},
});
const logger = interceptor.getLogger();
logger.info("User logged in");
logger.withTags(["auth"]).warn("Login attempt");
logger.withContext({ feature: "search" }).error("Search failed");
logger.withMeta({ region: "us-east-1" }).debug("Region-specific check");
logger.withAll({
tags: ["api"],
context: { feature: "checkout" },
meta: { version: "2.1.0" },
}).error("API timeout");
interceptor.setContext({ userId: "ADMIN" });
```
| Option | Type | Default | Description |
| ----------------- | ------------------------- | ------------ | ------------------------------------- |
| `batchSize` | `number` | `5` | Max logs per batch |
| `flushInterval` | `number` | `5000` | Max wait time (ms) between flushes |
| `contextProvider` | `() => object` | `() => ({})` | Provides dynamic context |
| `serverLogger` | `(logs) => Promise<void>` | `null` | Function to POST logs to your backend |
| `customLevels` | `string[]` | `[]` | Custom log levels (e.g. audit, track) |
| `filterLevels` | `string[]` | all levels | Log levels to capture from console |
| `generateTraceId` | `() => string` | uuidv4 | Custom trace ID generator |
```json
{
"level": "warn",
"timestamp": "2025-05-31T12:34:56.789Z",
"message": "Login failed {\"code\":401}",
"tags": ["auth"],
"context": {
"userId": "USER123",
"sessionId": "SESSION456",
"feature": "login"
},
"meta": {
"url": "https://nxtwebmasters.com/app",
"userAgent": "Mozilla/5.0...",
"traceId": "uuid-123",
"sessionId": "SESSION456"
},
"data": {
"code": 401
}
}
```
Here’s how to plug `@nxtwebmasters/nxt-smart-logger` into various environments:
---
```ts
// logger.ts
import { ConsoleInterceptor } from '@nxtwebmasters/nxt-smart-logger';
export const interceptor = new ConsoleInterceptor({
contextProvider: () => ({
userId: localStorage.getItem('userId'),
sessionId: sessionStorage.getItem('sessId')
}),
serverLogger: async (logs) => {
await fetch('/api/logs', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(logs),
});
}
});
export const logger = interceptor.getLogger();
```
```tsx
// App.tsx
import { logger } from './logger';
function App() {
useEffect(() => {
logger.info('App mounted');
}, []);
return <h1>Welcome</h1>;
}
```
---
```ts
// logger.ts
import { ConsoleInterceptor } from '@nxtwebmasters/nxt-smart-logger';
const interceptor = new ConsoleInterceptor({
contextProvider: () => ({ userId: 'vue-user', role: 'admin' })
});
export const logger = interceptor.getLogger();
```
```vue
<script setup>
import { onMounted } from 'vue';
import { logger } from './logger';
onMounted(() => {
logger.info('Vue component mounted');
});
</script>
```
---
```ts
import { ConsoleInterceptor } from '@nxtwebmasters/nxt-smart-logger';
const interceptor = new ConsoleInterceptor({
enableGTM: false,
enableServer: true,
contextProvider: () => ({ env: 'node', pid: process.pid }),
serverLogger: async (logs) => {
console.log('Sending logs to API:', logs);
}
});
const logger = interceptor.getLogger();
logger.info('CLI started');
```
---
Use the logger the same way across all frameworks:
```ts
logger.error('Something went wrong', { details: '...' })
logger.withTags(['startup']).info('App ready')
```
---
* React (hooks, SSR, client)
* Vue 2/3 (setup API or options API)
* Vanilla JS / CDN
* Node.js (CLI, workers, Express)
|  |  |  |  |
| ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
We welcome contributions! Please see our [Contribution Guidelines](CONTRIBUTING.md).
MIT © [NXT WebMasters](https://github.com/nxtwebmasters)