Merge pull request #7 from logtide-dev/feature/browser-sdk

better browser sdk implementation

Author: Polliog

CHANGELOG.md

@@ -5,6 +5,39 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.6.1] - 2026-02-28
+
+### Fixed
+- **Security Updates**: Addressed multiple security vulnerabilities across the workspace:
+  - Updated `minimatch` to `>=10.2.3` (fixes several ReDoS vulnerabilities).
+  - Updated `rollup` to `>=4.59.0` (fixes Arbitrary File Write via Path Traversal).
+  - Updated `tar` to `>=7.5.8` (fixes Hardlink Target Escape).
+  - Updated `nanotar` to `^0.2.1` (fixes Path Traversal).
+  - Updated `@angular/core` to `^19.2.19` (fixes XSS in i18n).
+  - Updated `@sveltejs/kit` to `^2.52.2` and `svelte` to `^5.53.5` (fixes XSS and Resource Exhaustion).
+  - Updated `ajv` to `>=8.18.0` (fixes ReDoS).
+  - Updated `qs` to `>=6.14.2` (fixes DoS).
+  - Updated `hono` to `^4.11.10` (Timing attack hardening).
+  - Updated `devalue` to `>=5.6.3` (fixes Prototype Pollution and Resource Exhaustion).
+
+## [0.6.0] - 2026-02-28
+
+### Added
+- **OTLP Span Events**: Breadcrumbs are now automatically converted to OTLP Span Events, providing a detailed timeline of events within the trace viewer.
+- **Child Spans API**: New `startChildSpan()` and `finishChildSpan()` APIs in `@logtide/core` to create hierarchical spans for operations like DB queries or external API calls.
+- **Rich Span Attributes**: Added standardized attributes to request spans across all frameworks:
+  - `http.user_agent`, `net.peer.ip`, `http.query_string` (at start)
+  - `http.status_code`, `duration_ms`, `http.route` (at finish)
+- **Express Error Handler**: Exported `logtideErrorHandler` to capture unhandled errors and associate them with the current request scope.
+
+### Changed
+- **Enriched Breadcrumbs**: Request/Response breadcrumbs now include more metadata (`method`, `url`, `status`, `duration_ms`) by default.
+- **Improved Nuxt Tracing**: Nitro plugin now accurately captures response status codes and durations.
+- **Improved Angular Tracing**: `LogtideHttpInterceptor` now captures status codes for both successful and failed outgoing requests.
+
+### Fixed
+- Fixed a bug in Nuxt Nitro plugin where spans were always marked as 'ok' regardless of the actual response status.
+
 ## [0.5.6] - 2026-02-08
 
 ### Changed

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "0.5.6",
+  "version": "0.6.1",
   "scripts": {
     "build": "pnpm -r --filter @logtide/* build",
     "test": "pnpm -r --filter @logtide/* test",
@@ -16,10 +16,20 @@
   },
   "pnpm": {
     "overrides": {
-      "tar": ">=7.5.7",
+      "tar": ">=7.5.8",
       "esbuild": ">=0.25.0",
       "webpack": ">=5.104.1",
-      "cookie": ">=0.7.0"
+      "cookie": ">=0.7.0",
+      "minimatch": ">=10.2.3",
+      "rollup": ">=4.59.0",
+      "ajv": ">=8.18.0",
+      "qs": ">=6.14.2",
+      "devalue": ">=5.6.3",
+      "hono": "^4.11.10",
+      "@angular/core": "^19.2.19",
+      "@sveltejs/kit": "^2.52.2",
+      "svelte": "^5.53.5",
+      "nanotar": "^0.2.1"
     }
   }
 }

packages/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logtide/angular",
-  "version": "0.5.6",
+  "version": "0.6.1",
   "description": "LogTide SDK integration for Angular — ErrorHandler, HTTP Interceptor, trace propagation",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -42,6 +42,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@logtide/browser": "workspace:*",
     "@logtide/core": "workspace:*",
     "@logtide/types": "workspace:*"
   },
@@ -51,9 +52,9 @@
     "rxjs": ">=7.0.0"
   },
   "devDependencies": {
-    "@angular/common": "^19.0.0",
-    "@angular/compiler": "^21.1.3",
-    "@angular/core": "^19.0.0",
+    "@angular/common": "^19.2.19",
+    "@angular/compiler": "^19.2.19",
+    "@angular/core": "^19.2.19",
     "rxjs": "^7.8.0",
     "tsup": "^8.5.1",
     "typescript": "^5.5.4"

packages/angular/src/error-handler.ts

@@ -1,16 +1,23 @@
-import { ErrorHandler, Injectable } from '@angular/core';
+import { ErrorHandler, Injectable, NgZone } from '@angular/core';
 import { hub } from '@logtide/core';
 
 /**
  * Angular ErrorHandler that reports uncaught errors to LogTide.
  *
+ * Detects whether the error occurred inside or outside NgZone and tags
+ * the error accordingly. Errors outside NgZone often indicate issues with
+ * third-party libraries or manual DOM manipulation.
+ *
  * Used automatically when you call `provideLogtide()` or import `LogtideModule`.
  */
 @Injectable()
 export class LogtideErrorHandler implements ErrorHandler {
   handleError(error: unknown): void {
+    const zoneContext = NgZone.isInAngularZone() ? 'inside' : 'outside';
+
     hub.captureError(error, {
       mechanism: 'angular.errorHandler',
+      'angular.zone': zoneContext,
     });
 
     // Also log to console so errors remain visible in dev

packages/angular/src/http-interceptor.ts

@@ -5,9 +5,10 @@ import {
   HttpHandler,
   HttpEvent,
   HttpErrorResponse,
+  HttpResponse,
 } from '@angular/common/http';
 import { Observable, tap } from 'rxjs';
-import { hub, createTraceparent, generateSpanId } from '@logtide/core';
+import { hub, createTraceparent } from '@logtide/core';
 
 /**
  * Angular HTTP Interceptor that:
@@ -26,6 +27,7 @@ export class LogtideHttpInterceptor implements HttpInterceptor {
 
     // Start a span for this outgoing request
     let spanId: string | undefined;
+    const startTime = Date.now();
 
     if (client) {
       const span = client.startSpan({
@@ -35,6 +37,7 @@ export class LogtideHttpInterceptor implements HttpInterceptor {
         attributes: {
           'http.method': req.method,
           'http.url': req.urlWithParams,
+          'http.target': req.url,
         },
       });
 
@@ -52,22 +55,50 @@ export class LogtideHttpInterceptor implements HttpInterceptor {
         type: 'http',
         category: 'http.request',
         message: `${req.method} ${req.urlWithParams}`,
-        timestamp: Date.now(),
+        timestamp: startTime,
         data: { method: req.method, url: req.urlWithParams },
       });
     }
 
     return next.handle(clonedReq).pipe(
       tap({
-        next: () => {
-          // On success, finish span
-          if (client && spanId) {
-            client.finishSpan(spanId, 'ok');
+        next: (event: HttpEvent<unknown>) => {
+          if (event instanceof HttpResponse) {
+            // On success, finish span with status code
+            if (client && spanId) {
+              const durationMs = Date.now() - startTime;
+              client.finishSpan(spanId, event.status >= 500 ? 'error' : 'ok', {
+                extraAttributes: {
+                  'http.status_code': event.status,
+                  'duration_ms': durationMs,
+                },
+              });
+
+              hub.addBreadcrumb({
+                type: 'http',
+                category: 'http.response',
+                message: `${req.method} ${req.urlWithParams} → ${event.status}`,
+                level: event.status >= 400 ? 'warn' : 'info',
+                timestamp: Date.now(),
+                data: {
+                  method: req.method,
+                  url: req.urlWithParams,
+                  status: event.status,
+                  duration_ms: durationMs,
+                },
+              });
+            }
           }
         },
         error: (error: HttpErrorResponse) => {
+          const durationMs = Date.now() - startTime;
           if (client && spanId) {
-            client.finishSpan(spanId, 'error');
+            client.finishSpan(spanId, 'error', {
+              extraAttributes: {
+                'http.status_code': error.status,
+                'duration_ms': durationMs,
+              },
+            });
           }
 
           hub.addBreadcrumb({
@@ -81,13 +112,15 @@ export class LogtideHttpInterceptor implements HttpInterceptor {
               url: req.urlWithParams,
               status: error.status,
               statusText: error.statusText,
+              duration_ms: durationMs,
             },
           });
 
           hub.captureError(error, {
             'http.method': req.method,
             'http.url': req.urlWithParams,
-            'http.status': error.status,
+            'http.status_code': error.status,
+            'duration_ms': durationMs,
           });
         },
       }),

packages/angular/src/provide.ts

@@ -6,11 +6,64 @@ import {
   APP_INITIALIZER,
 } from '@angular/core';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
-import type { ClientOptions } from '@logtide/types';
-import { hub, GlobalErrorIntegration } from '@logtide/core';
+import type { Integration, Transport } from '@logtide/types';
+import { hub, GlobalErrorIntegration, resolveDSN } from '@logtide/core';
+import {
+  getSessionId,
+  WebVitalsIntegration,
+  ClickBreadcrumbIntegration,
+  NetworkBreadcrumbIntegration,
+  OfflineTransport,
+  type BrowserClientOptions,
+} from '@logtide/browser';
 import { LogtideErrorHandler } from './error-handler';
 import { LogtideHttpInterceptor } from './http-interceptor';
 
+function buildBrowserIntegrations(options: BrowserClientOptions): Integration[] {
+  const browserOpts = options.browser ?? {};
+  const integrations: Integration[] = [];
+  const apiUrl = resolveDSN(options).apiUrl;
+
+  if (browserOpts.webVitals) {
+    integrations.push(
+      new WebVitalsIntegration({
+        sampleRate: browserOpts.webVitalsSampleRate,
+      }),
+    );
+  }
+
+  if (browserOpts.clickBreadcrumbs !== false) {
+    const clickOpts = typeof browserOpts.clickBreadcrumbs === 'object'
+      ? browserOpts.clickBreadcrumbs
+      : undefined;
+    integrations.push(new ClickBreadcrumbIntegration(clickOpts));
+  }
+
+  if (browserOpts.networkBreadcrumbs !== false) {
+    const netOpts = typeof browserOpts.networkBreadcrumbs === 'object'
+      ? browserOpts.networkBreadcrumbs
+      : {};
+    integrations.push(
+      new NetworkBreadcrumbIntegration({ ...netOpts, apiUrl }),
+    );
+  }
+
+  return integrations;
+}
+
+function buildTransportWrapper(options: BrowserClientOptions): ((inner: Transport) => Transport) | undefined {
+  const browserOpts = options.browser ?? {};
+  if (browserOpts.offlineResilience === false) return undefined;
+
+  const dsn = resolveDSN(options);
+  return (inner: Transport) => new OfflineTransport({
+    inner,
+    beaconUrl: `${dsn.apiUrl}/api/v1/ingest`,
+    apiKey: dsn.apiKey,
+    debug: options.debug,
+  });
+}
+
 /**
  * Provide LogTide in a standalone Angular app (Angular 17+).
  *
@@ -26,7 +79,7 @@ import { LogtideHttpInterceptor } from './http-interceptor';
  * };
  * ```
  */
-export function provideLogtide(options: ClientOptions): EnvironmentProviders {
+export function provideLogtide(options: BrowserClientOptions): EnvironmentProviders {
   return makeEnvironmentProviders([
     {
       provide: APP_INITIALIZER,
@@ -35,11 +88,14 @@ export function provideLogtide(options: ClientOptions): EnvironmentProviders {
           hub.init({
             service: 'angular',
             ...options,
+            transportWrapper: buildTransportWrapper(options) ?? options.transportWrapper,
             integrations: [
               new GlobalErrorIntegration(),
+              ...buildBrowserIntegrations(options),
               ...(options.integrations ?? []),
             ],
           });
+          hub.getScope().setSessionId(getSessionId());
         };
       },
       multi: true,
@@ -66,7 +122,7 @@ export function provideLogtide(options: ClientOptions): EnvironmentProviders {
  * export class AppModule {}
  * ```
  */
-export function getLogtideProviders(options: ClientOptions): Provider[] {
+export function getLogtideProviders(options: BrowserClientOptions): Provider[] {
   return [
     {
       provide: APP_INITIALIZER,
@@ -75,11 +131,14 @@ export function getLogtideProviders(options: ClientOptions): Provider[] {
           hub.init({
             service: 'angular',
             ...options,
+            transportWrapper: buildTransportWrapper(options) ?? options.transportWrapper,
             integrations: [
               new GlobalErrorIntegration(),
+              ...buildBrowserIntegrations(options),
               ...(options.integrations ?? []),
             ],
           });
+          hub.getScope().setSessionId(getSessionId());
         };
       },
       multi: true,

packages/angular/tests/error-handler.test.ts

@@ -69,6 +69,19 @@ describe('@logtide/angular', () => {
       expect(transport.logs).toHaveLength(1);
       expect(transport.logs[0].message).toBe('string error');
     });
+
+    it('should include angular.zone context in metadata', async () => {
+      const { LogtideErrorHandler } = await import('../src/error-handler');
+      const handler = new LogtideErrorHandler();
+
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      handler.handleError(new Error('zone error'));
+      consoleSpy.mockRestore();
+
+      expect(transport.logs).toHaveLength(1);
+      // Outside of Angular context, NgZone.isInAngularZone() returns false
+      expect(transport.logs[0].metadata?.['angular.zone']).toBe('outside');
+    });
   });
 
   describe('provideLogtide', () => {