@prilog/monitoring-browser 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Prilog
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,66 @@
+# @prilog/monitoring-browser
+
+Prilog monitoring for browser and React applications, built on OpenTelemetry. Capture application logs, page and network traces, and exceptions in your Prilog workspace.
+
+## Install
+
+```bash
+npm install @prilog/monitoring-browser
+```
+
+## Initialize
+
+Select **Add free Prilog monitoring** for your service in Prilog and copy its publishable ingest DSN. Initialize the SDK once in your browser entry point, before rendering your application:
+
+```javascript
+import { init } from '@prilog/monitoring-browser';
+
+const monitoring = init({
+  dsn: 'YOUR_PRILOG_DSN',
+  serviceName: 'checkout-web',
+  environment: 'production',
+});
+
+// Render your existing React application or start your browser application here.
+```
+
+Replace `YOUR_PRILOG_DSN` with the DSN shown in Prilog. It grants telemetry ingestion for that service. Initialization sends a startup log and span; Prilog verifies the connection when it receives them.
+
+The package is an ES module for browser bundlers. `init` returns a disabled monitor when called without a DSN or outside a browser.
+
+## Logs, traces, and exceptions
+
+The SDK instruments fetch, XMLHttpRequest, and document loading, and captures global errors and unhandled promise rejections.
+
+```javascript
+import { withSpan, log, captureException } from '@prilog/monitoring-browser';
+
+withSpan('checkout.validate', () => {
+  log('info', 'Order validated', { 'order.id': 'example-order' });
+});
+
+// In an existing error boundary or handled-error path:
+captureException(new Error('Checkout failed'));
+```
+
+`withSpan(name, callback, attributes?)` returns the callback's result and records and rethrows errors. `log(level, message, attributes?)` supports `debug`, `info`, `warn`, and `error`. `captureException(error)` records the exception and its stack trace.
+
+## Configuration
+
+| Option | Description | Default |
+| --- | --- | --- |
+| `dsn` | Your service's publishable ingest DSN | Required to enable monitoring |
+| `serviceName` | Frontend service identity | `frontend` |
+| `environment` | Deployment environment | `production` |
+| `release` | Application release/version | `unknown` |
+| `tracePropagationTargets` | URLs or regular expressions for API requests that receive trace headers | Current origin |
+
+For distributed tracing across your frontend and backend, set `tracePropagationTargets` to your API origins and configure the API's CORS policy to accept `traceparent`, `tracestate`, and `baggage` headers. If your application uses Content Security Policy, include the Prilog ingest origin in `connect-src`.
+
+The SDK attempts to flush pending telemetry on `pagehide`. Await `monitoring.shutdown()` when explicitly tearing down the monitored application.
+
+## License
+
+MIT. See [LICENSE](./LICENSE).
+
+Source and issue tracker: [Prilog-ai/prilog-monitoring](https://github.com/Prilog-ai/prilog-monitoring).

package/index.js

@@ -0,0 +1,67 @@
+import { context, trace, SpanStatusCode } from '@opentelemetry/api';
+import { logs } from '@opentelemetry/api-logs';
+import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
+import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
+import { LoggerProvider, BatchLogRecordProcessor } from '@opentelemetry/sdk-logs';
+import { resourceFromAttributes } from '@opentelemetry/resources';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
+import { OTLPLogExporter } from '@opentelemetry/exporter-logs-otlp-http';
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
+import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
+import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
+
+let state;
+
+export function init(options = {}) {
+  if (state) return state;
+  if (typeof window === 'undefined' || !options.dsn) return { enabled: false, shutdown: async () => {} };
+  const url = new URL(options.dsn);
+  if (!['https:', 'http:'].includes(url.protocol) || !url.username.startsWith('pk_prilog_') || url.password || url.search || url.hash) throw new Error('Invalid publishable Prilog DSN');
+  const headers = { 'X-Prilog-OTLP-Token': decodeURIComponent(url.username) };
+  url.username = '';
+  const endpoint = url.toString().replace(/\/$/, '');
+  const resource = resourceFromAttributes({ 'service.name': options.serviceName || 'frontend', 'deployment.environment.name': options.environment || 'production', 'service.version': options.release || 'unknown', 'prilog.sdk.version': '0.1.0' });
+  const traces = new WebTracerProvider({ resource, spanProcessors: [new BatchSpanProcessor(new OTLPTraceExporter({ url: `${endpoint}/v1/traces`, headers }))] });
+  traces.register();
+  const loggerProvider = new LoggerProvider({ resource });
+  loggerProvider.addLogRecordProcessor(new BatchLogRecordProcessor(new OTLPLogExporter({ url: `${endpoint}/v1/logs`, headers })));
+  logs.setGlobalLoggerProvider(loggerProvider);
+  const ignoreUrls = [new RegExp(`^${endpoint.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`)];
+  const propagateTraceHeaderCorsUrls = options.tracePropagationTargets || [window.location.origin];
+  const unregister = registerInstrumentations({ instrumentations: [new FetchInstrumentation({ ignoreUrls, propagateTraceHeaderCorsUrls }), new XMLHttpRequestInstrumentation({ ignoreUrls, propagateTraceHeaderCorsUrls }), new DocumentLoadInstrumentation()] });
+  const onError = event => captureException(event.error || new Error(event.message));
+  const onRejection = event => captureException(event.reason);
+  const flush = () => { void Promise.all([traces.forceFlush(), loggerProvider.forceFlush()]).catch(() => {}); };
+  window.addEventListener('error', onError);
+  window.addEventListener('unhandledrejection', onRejection);
+  window.addEventListener('pagehide', flush);
+  state = { enabled: true, async shutdown() { window.removeEventListener('error', onError); window.removeEventListener('unhandledrejection', onRejection); window.removeEventListener('pagehide', flush); unregister(); await Promise.all([traces.shutdown(), loggerProvider.shutdown()]); } };
+  withSpan('prilog.startup', () => log('info', 'Prilog monitoring initialized', { 'prilog.startup': true }));
+  return state;
+}
+
+export function log(level, message, attributes = {}) {
+  logs.getLogger('prilog.monitoring').emit({ severityNumber: { debug: 5, info: 9, warn: 13, error: 17 }[level] || 9, severityText: level.toUpperCase(), body: String(message), attributes, context: context.active() });
+}
+
+export function captureException(value) {
+  const error = value instanceof Error ? value : new Error(String(value));
+  const active = trace.getActiveSpan();
+  const span = active || trace.getTracer('prilog.monitoring').startSpan('exception');
+  context.with(trace.setSpan(context.active(), span), () => {
+    span.recordException(error); span.setStatus({ code: SpanStatusCode.ERROR, message: error.message });
+    log('error', error.message, { 'exception.type': error.name, 'exception.message': error.message, 'exception.stacktrace': error.stack || '' });
+  });
+  if (!active) span.end();
+}
+
+export function withSpan(name, fn, attributes = {}) {
+  return trace.getTracer('prilog.monitoring').startActiveSpan(name, { attributes }, span => {
+    try {
+      const result = fn(span);
+      if (result && typeof result.then === 'function') return Promise.resolve(result).catch(error => { context.with(trace.setSpan(context.active(), span), () => captureException(error)); throw error; }).finally(() => span.end());
+      span.end(); return result;
+    } catch (error) { captureException(error); span.end(); throw error; }
+  });
+}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@prilog/monitoring-browser",
+  "version": "0.1.0",
+  "description": "OpenTelemetry browser monitoring for Prilog",
+  "repository": { "type": "git", "url": "git+https://github.com/Prilog-ai/prilog-monitoring.git" },
+  "homepage": "https://github.com/Prilog-ai/prilog-monitoring#readme",
+  "bugs": { "url": "https://github.com/Prilog-ai/prilog-monitoring/issues" },
+  "type": "module",
+  "main": "index.js",
+  "exports": { ".": "./index.js" },
+  "license": "MIT",
+  "files": ["index.js", "LICENSE"],
+  "publishConfig": { "access": "public", "registry": "https://registry.npmjs.org/" },
+  "scripts": { "test": "node --test test.mjs", "prepublishOnly": "npm test" },
+  "devDependencies": { "playwright": "^1.58.2", "vite": "^8.0.10" },
+  "dependencies": {
+    "@opentelemetry/api": "^1.9.0",
+    "@opentelemetry/api-logs": "^0.200.0",
+    "@opentelemetry/sdk-trace-web": "^2.0.0",
+    "@opentelemetry/sdk-trace-base": "^2.0.0",
+    "@opentelemetry/sdk-logs": "^0.200.0",
+    "@opentelemetry/exporter-logs-otlp-http": "^0.200.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.200.0",
+    "@opentelemetry/resources": "^2.0.0",
+    "@opentelemetry/instrumentation": "^0.200.0",
+    "@opentelemetry/instrumentation-fetch": "^0.200.0",
+    "@opentelemetry/instrumentation-xml-http-request": "^0.200.0",
+    "@opentelemetry/instrumentation-document-load": "^0.48.0"
+  }
+}