@smb-tech/logger-react 1.0.0

package/README.md

@@ -0,0 +1,37 @@
+# @smb-tech/logger-react
+
+React/browser adapter for structured logging.
+
+## Features
+
+- Client-side context store
+- TraceId propagation to backend
+- Compatible with fetch / axios
+- Lightweight
+
+## Installation
+
+```bash
+npm install @smb-tech/logger-react
+```
+
+## Example
+
+```ts
+import { BrowserContextStore, BrowserTraceContextFactory } from '@smb-tech/logger-react';
+
+const context = BrowserTraceContextFactory.create();
+BrowserContextStore.set(context);
+```
+
+## Sending trace headers
+
+```ts
+const mdc = BrowserContextStore.getMdc();
+
+fetch('/api', {
+  headers: {
+    'x-b3-traceid': mdc.traceId
+  }
+});
+```

package/dist/api.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/api.js

@@ -0,0 +1,30 @@
+export {};
+/* import { BrowserContextStore, BrowserTraceContextFactory } from './context.js';
+
+export async function apiFetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
+  if (!BrowserContextStore.get()) {
+    BrowserContextStore.set(BrowserTraceContextFactory.create());
+  }
+
+  const mdc = BrowserContextStore.getMdc();
+  const headers = new Headers(init?.headers);
+
+   if (mdc.requestId) {
+    headers.set('x-request-id', mdc.requestId);
+  }
+
+  if (mdc.traceId) {
+    headers.set('X-B3-TraceId', mdc.traceId);
+  }
+
+  if (mdc.spanId) {
+    headers.set('X-B3-SpanId', mdc.spanId);
+  }
+
+  return fetch(input, {
+    ...init,
+    headers
+  });
+}
+ */ 
+//# sourceMappingURL=api.js.map

package/dist/api.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.js","sourceRoot":"","sources":["../src/api.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG"}

package/dist/context.d.ts

@@ -0,0 +1,21 @@
+export interface BrowserTraceContext {
+    mdc: Record<string, string>;
+}
+export interface BrowserContextOptions {
+    traceId?: string;
+    requestId?: string;
+    spanId?: string;
+    mdc?: Record<string, string>;
+}
+export declare class BrowserTraceContextFactory {
+    static create(options?: BrowserContextOptions): BrowserTraceContext;
+}
+export declare class BrowserContextStore {
+    private static context;
+    static set(context: BrowserTraceContext): void;
+    static get(): BrowserTraceContext | null;
+    static getMdc(): Record<string, string>;
+    static setMdc(key: string, value: string): void;
+    static setManyMdc(values: Record<string, string>): void;
+    static clear(): void;
+}

package/dist/context.js

@@ -0,0 +1,48 @@
+function createHexId(bytes) {
+    const data = new Uint8Array(bytes);
+    crypto.getRandomValues(data);
+    return Array.from(data, (value) => value.toString(16).padStart(2, '0')).join('');
+}
+export class BrowserTraceContextFactory {
+    static create(options) {
+        const requestId = options?.requestId ?? crypto.randomUUID();
+        const traceId = options?.traceId ?? createHexId(16);
+        const spanId = options?.spanId ?? createHexId(8);
+        return {
+            mdc: {
+                requestId,
+                traceId,
+                spanId,
+                ...(options?.mdc ?? {})
+            }
+        };
+    }
+}
+export class BrowserContextStore {
+    static context = null;
+    static set(context) {
+        this.context = context;
+    }
+    static get() {
+        return this.context;
+    }
+    static getMdc() {
+        return this.context?.mdc ?? {};
+    }
+    static setMdc(key, value) {
+        if (!this.context) {
+            this.context = { mdc: {} };
+        }
+        this.context.mdc[key] = value;
+    }
+    static setManyMdc(values) {
+        if (!this.context) {
+            this.context = { mdc: {} };
+        }
+        Object.assign(this.context.mdc, values);
+    }
+    static clear() {
+        this.context = null;
+    }
+}
+//# sourceMappingURL=context.js.map

package/dist/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAWA,SAAS,WAAW,CAAC,KAAa;IAChC,MAAM,IAAI,GAAG,IAAI,UAAU,CAAC,KAAK,CAAC,CAAC;IACnC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IAC7B,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACnF,CAAC;AAED,MAAM,OAAO,0BAA0B;IACrC,MAAM,CAAC,MAAM,CAAC,OAA+B;QAC3C,MAAM,SAAS,GAAG,OAAO,EAAE,SAAS,IAAI,MAAM,CAAC,UAAU,EAAE,CAAC;QAC5D,MAAM,OAAO,GAAG,OAAO,EAAE,OAAO,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC;QACpD,MAAM,MAAM,GAAG,OAAO,EAAE,MAAM,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC;QAEjD,OAAO;YACL,GAAG,EAAE;gBACH,SAAS;gBACT,OAAO;gBACP,MAAM;gBACN,GAAG,CAAC,OAAO,EAAE,GAAG,IAAI,EAAE,CAAC;aACxB;SACF,CAAC;IACJ,CAAC;CACF;AAED,MAAM,OAAO,mBAAmB;IACtB,MAAM,CAAC,OAAO,GAA+B,IAAI,CAAC;IAE1D,MAAM,CAAC,GAAG,CAAC,OAA4B;QACrC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;IAED,MAAM,CAAC,GAAG;QACR,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,MAAM,CAAC,MAAM;QACX,OAAO,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,EAAE,CAAC;IACjC,CAAC;IAED,MAAM,CAAC,MAAM,CAAC,GAAW,EAAE,KAAa;QACtC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC;QAC7B,CAAC;QAED,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;IAChC,CAAC;IAED,MAAM,CAAC,UAAU,CAAC,MAA8B;QAC9C,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC;QAC7B,CAAC;QAED,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;IAC1C,CAAC;IAED,MAAM,CAAC,KAAK;QACV,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './context.js';
+export * from './logger.js';
+export * from './provider.js';

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from './context.js';
+export * from './logger.js';
+export * from './provider.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC"}

package/dist/logger.d.ts

@@ -0,0 +1,4 @@
+import { Logger } from '@smb-tech/logger-core';
+export declare class ReactLogger {
+    static get(contextName: string): Logger;
+}

package/dist/logger.js

@@ -0,0 +1,29 @@
+import { Logger } from '@smb-tech/logger-core';
+import { BrowserContextStore } from './context.js';
+class BrowserLogSink {
+    dispatch(line, level) {
+        if (level === 'ERROR' || level === 'WARN') {
+            console.error(line);
+            return;
+        }
+        console.log(line);
+    }
+}
+class BrowserRuntimeDetailsProvider {
+    getThreadLabel() {
+        return 'browser-main-thread';
+    }
+    fallbackId() {
+        return crypto.randomUUID();
+    }
+}
+const sink = new BrowserLogSink();
+const runtimeDetailsProvider = new BrowserRuntimeDetailsProvider();
+export class ReactLogger {
+    static get(contextName) {
+        return new Logger(contextName, {
+            getMdc: () => BrowserContextStore.getMdc()
+        }, sink, runtimeDetailsProvider);
+    }
+}
+//# sourceMappingURL=logger.js.map

package/dist/logger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logger.js","sourceRoot":"","sources":["../src/logger.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAEnD,MAAM,cAAc;IAClB,QAAQ,CAAC,IAAY,EAAE,KAAe;QACpC,IAAI,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,MAAM,EAAE,CAAC;YAC1C,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YACpB,OAAO;QACT,CAAC;QAED,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC;CACF;AAED,MAAM,6BAA6B;IACjC,cAAc;QACZ,OAAO,qBAAqB,CAAC;IAC/B,CAAC;IAED,UAAU;QACR,OAAO,MAAM,CAAC,UAAU,EAAE,CAAC;IAC7B,CAAC;CACF;AAED,MAAM,IAAI,GAAG,IAAI,cAAc,EAAE,CAAC;AAClC,MAAM,sBAAsB,GAAG,IAAI,6BAA6B,EAAE,CAAC;AAEnE,MAAM,OAAO,WAAW;IACtB,MAAM,CAAC,GAAG,CAAC,WAAmB;QAC5B,OAAO,IAAI,MAAM,CACf,WAAW,EACX;YACE,MAAM,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,MAAM,EAAE;SAC3C,EACD,IAAI,EACJ,sBAAsB,CACvB,CAAC;IACJ,CAAC;CACF"}

package/dist/provider.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+interface LoggingProviderProps {
+    children: ReactNode;
+}
+export declare function LoggingProvider({ children }: LoggingProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/provider.js

@@ -0,0 +1,13 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { BrowserContextStore, BrowserTraceContextFactory } from './context.js';
+export function LoggingProvider({ children }) {
+    useEffect(() => {
+        const existing = BrowserContextStore.get();
+        if (!existing) {
+            BrowserContextStore.set(BrowserTraceContextFactory.create());
+        }
+    }, []);
+    return _jsx(_Fragment, { children: children });
+}
+//# sourceMappingURL=provider.js.map

package/dist/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,cAAc,CAAC;AAM/E,MAAM,UAAU,eAAe,CAAC,EAAE,QAAQ,EAAwB;IAChE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,mBAAmB,CAAC,GAAG,EAAE,CAAC;QAC3C,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,mBAAmB,CAAC,GAAG,CAAC,0BAA0B,CAAC,MAAM,EAAE,CAAC,CAAC;QAC/D,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,4BAAG,QAAQ,GAAI,CAAC;AACzB,CAAC"}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@smb-tech/logger-react",
+  "version": "1.0.0",
+  "description": "React/browser adapter for structured logging with client-side context management",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@smb-tech/logger-core": "1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.20",
+    "typescript": "^5.8.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}