@sentienguard/apm 1.0.4 → 1.0.6

package/src/browser/aggregator.js

@@ -1,24 +1,24 @@
 /**
  * Browser Metrics Aggregator
  *
- * Batches browser-specific metrics in memory and flushes them periodically.
+ * Batches browser metrics in memory and flushes them periodically.
  * Produces payloads compatible with the backend's ingestApmData controller.
  *
- * Mirrors the Node.js aggregator pattern but tracks browser-relevant metrics:
- * - Outgoing fetch/XHR requests (as dependencies)
- * - Page load timing (Navigation Timing API)
- * - Web Vitals (LCP, FID, INP, CLS)
+ * Tracks:
+ * - Outgoing fetch/XHR as requests (keyed by method:route)
  * - Unhandled JS errors
+ * - Web Vitals (LCP, FID, INP, CLS)
+ * - Page load timing
  * - SPA route changes
  */
 
 import config from './config.js';
 
 /**
- * Create an aggregation key for dependency metrics
+ * Create an aggregation key for request metrics
  */
-function createDependencyKey(name, type) {
-  return `${name}:${type}`;
+function createRequestKey(method, route) {
+  return `${method}:${route}`;
 }
 
 export class BrowserMetricsAggregator {
@@ -28,12 +28,9 @@ export class BrowserMetricsAggregator {
   }
 
   reset() {
-    // Outgoing HTTP requests (fetch/XHR) aggregated by host
-    // Same shape as Node SDK dependencies: { name, type, count, errorCount, latency }
-    this.dependencies = new Map();
-
-    // Page load timing entries from Navigation Timing API
-    this.pageLoads = [];
+    // Outgoing HTTP requests (fetch/XHR) aggregated by method:route
+    // Same shape as Node.js SDK requests: { method, route, count, errorCount, latency }
+    this.requests = new Map();
 
     // Web Vitals - latest values per metric name
     this.webVitals = {};
@@ -43,32 +40,33 @@ export class BrowserMetricsAggregator {
 
     // SPA route change events
     this.routeChanges = [];
+
+    // Page load timing entries
+    this.pageLoads = [];
   }
 
   /**
    * Record an outgoing HTTP request (fetch/XHR)
-   * Uses the same dependency shape as the Node.js SDK so the backend
-   * can process it identically.
    *
-   * @param {string} name - Service/host name
-   * @param {string} type - Dependency type (http)
+   * @param {string} method - HTTP method (GET, POST, PATCH, DELETE)
+   * @param {string} route - URL pathname (e.g., /api/todos)
    * @param {number} latency - Response time in ms
-   * @param {boolean} isError - Whether the request failed
+   * @param {boolean} isError - Whether the request failed (4xx/5xx or network error)
    */
-  recordDependency(name, type, latency, isError = false) {
-    const key = createDependencyKey(name, type);
+  recordRequest(method, route, latency, isError = false) {
+    const key = createRequestKey(method, route);
 
-    let metric = this.dependencies.get(key);
+    let metric = this.requests.get(key);
     if (!metric) {
-      if (this.dependencies.size >= this.maxRoutes) return;
+      if (this.requests.size >= this.maxRoutes) return;
       metric = {
-        name,
-        type,
+        method,
+        route,
         count: 0,
         errorCount: 0,
         latency: { sum: 0, min: Infinity, max: 0 }
       };
-      this.dependencies.set(key, metric);
+      this.requests.set(key, metric);
     }
 
     metric.count++;
@@ -113,24 +111,24 @@ export class BrowserMetricsAggregator {
   }
 
   hasData() {
-    return this.dependencies.size > 0 ||
-      this.pageLoads.length > 0 ||
+    return this.requests.size > 0 ||
       Object.keys(this.webVitals).length > 0 ||
       this.jsErrors > 0 ||
-      this.routeChanges.length > 0;
+      this.routeChanges.length > 0 ||
+      this.pageLoads.length > 0;
   }
 
   /**
    * Flush aggregated metrics and return payload for the backend.
    * Payload format matches the backend's ingestApmData expectations:
-   *   { interval, service, environment, requests[], dependencies[], browser{} }
+   *   { interval, service, environment, requests[], dependencies[] }
    */
   flush() {
-    const dependencies = [];
-    for (const metric of this.dependencies.values()) {
-      dependencies.push({
-        name: metric.name,
-        type: metric.type,
+    const requests = [];
+    for (const metric of this.requests.values()) {
+      requests.push({
+        method: metric.method,
+        route: metric.route,
         count: metric.count,
         errorCount: metric.errorCount,
         latency: {
@@ -145,18 +143,8 @@ export class BrowserMetricsAggregator {
       interval: `${config.flushInterval}s`,
       service: config.service,
       environment: config.environment,
-      // requests[] left empty - browser doesn't serve HTTP requests
-      requests: [],
-      dependencies,
-      // Browser-specific metrics in a dedicated field.
-      // The backend safely ignores unknown fields for now;
-      // a future backend update can process these.
-      browser: {
-        pageLoads: [...this.pageLoads],
-        webVitals: { ...this.webVitals },
-        jsErrors: this.jsErrors,
-        routeChanges: [...this.routeChanges]
-      }
+      requests,
+      dependencies: []
     };
 
     this.reset();
@@ -165,11 +153,11 @@ export class BrowserMetricsAggregator {
 
   getStats() {
     return {
-      dependencyMetrics: this.dependencies.size,
-      pageLoads: this.pageLoads.length,
+      requestMetrics: this.requests.size,
       webVitals: Object.keys(this.webVitals).length,
       jsErrors: this.jsErrors,
-      routeChanges: this.routeChanges.length
+      routeChanges: this.routeChanges.length,
+      pageLoads: this.pageLoads.length
     };
   }
 }

package/src/browser/instrumentation.js

@@ -2,10 +2,8 @@
  * Browser Network Instrumentation
  *
  * Monkey-patches window.fetch and XMLHttpRequest to track outgoing HTTP requests.
- * This is the industry-standard approach used by Datadog, Sentry, New Relic, and Elastic APM.
- *
- * Captured data is recorded as dependencies (same shape as Node.js SDK)
- * so the backend processes them identically.
+ * Captured data is recorded as requests (method + pathname), matching the
+ * Node.js SDK's request format so the backend processes them identically.
  */
 
 import { getAggregator } from './aggregator.js';
@@ -33,17 +31,16 @@ function shouldExclude(url) {
 }
 
 /**
- * Extract a service name from a URL.
- * For same-origin requests, returns 'self'.
- * For cross-origin, returns the hostname.
+ * Extract the pathname from a URL.
+ * e.g., "http://localhost:4005/api/todos/1" → "/api/todos/1"
+ * e.g., "/api/todos" → "/api/todos"
  */
-function getServiceName(url) {
+function getPathname(url) {
   try {
     const parsed = new URL(url, window.location.origin);
-    if (parsed.origin === window.location.origin) return 'self';
-    return parsed.hostname;
+    return parsed.pathname;
   } catch {
-    return 'unknown';
+    return '/unknown';
   }
 }
 
@@ -66,23 +63,23 @@ function instrumentFetch() {
 
     const method = (init?.method || (input instanceof Request ? input.method : 'GET')).toUpperCase();
     const startTime = performance.now();
-    const serviceName = getServiceName(url);
+    const pathname = getPathname(url);
 
     return originalFetch.apply(this, arguments).then(
       (response) => {
         const latency = performance.now() - startTime;
         const isError = !response.ok;
 
-        getAggregator().recordDependency(serviceName, 'http', latency, isError);
-        debug(`Fetch: ${method} ${serviceName} ${response.status} ${latency.toFixed(1)}ms`);
+        getAggregator().recordRequest(method, pathname, latency, isError);
+        debug(`Fetch: ${method} ${pathname} ${response.status} ${latency.toFixed(1)}ms`);
 
         return response;
       },
       (error) => {
         const latency = performance.now() - startTime;
 
-        getAggregator().recordDependency(serviceName, 'http', latency, true);
-        debug(`Fetch error: ${method} ${serviceName} ${latency.toFixed(1)}ms`);
+        getAggregator().recordRequest(method, pathname, latency, true);
+        debug(`Fetch error: ${method} ${pathname} ${latency.toFixed(1)}ms`);
 
         throw error;
       }
@@ -113,14 +110,14 @@ function instrumentXHR() {
     const startTime = performance.now();
     const url = this._sgUrl;
     const method = this._sgMethod;
-    const serviceName = getServiceName(url);
+    const pathname = getPathname(url);
 
     this.addEventListener('loadend', function () {
       const latency = performance.now() - startTime;
       const isError = this.status === 0 || this.status >= 400;
 
-      getAggregator().recordDependency(serviceName, 'http', latency, isError);
-      debug(`XHR: ${method} ${serviceName} ${this.status} ${latency.toFixed(1)}ms`);
+      getAggregator().recordRequest(method, pathname, latency, isError);
+      debug(`XHR: ${method} ${pathname} ${this.status} ${latency.toFixed(1)}ms`);
     });
 
     return originalXhrSend.apply(this, arguments);

package/src/browser/transport.js

@@ -2,12 +2,12 @@
  * Browser Transport Layer
  *
  * Handles periodic flush of aggregated metrics to the backend.
- * Uses fetch() for normal sends (supports custom headers) and
- * navigator.sendBeacon() for page unload (more reliable but no custom headers).
+ * Uses fetch() for normal sends and navigator.sendBeacon() for page unload.
  *
- * Transport strategy (matches Datadog RUM pattern):
- * - Normal flush: fetch() with X-APM-Key header
- * - Unload flush: sendBeacon() with ?apmKey= query param
+ * Transport strategy:
+ * - API key is always sent as ?apmKey= query param (avoids custom header CORS preflight issues)
+ * - Normal flush: fetch() with keepalive
+ * - Unload flush: sendBeacon() (more reliable on page close)
  * - Listens on visibilitychange (NOT beforeunload/unload which are unreliable on mobile)
  */
 
@@ -21,7 +21,16 @@ let consecutiveFailures = 0;
 const MAX_CONSECUTIVE_FAILURES = 5;
 
 /**
- * Send payload to backend using fetch (supports custom headers)
+ * Build the ingest URL with API key as query parameter.
+ * Using query param instead of X-APM-Key header avoids CORS preflight
+ * issues across different server/proxy configurations.
+ */
+function getIngestUrl() {
+  return `${config.endpoint}?apmKey=${encodeURIComponent(config.apiKey)}`;
+}
+
+/**
+ * Send payload to backend using fetch
  */
 async function sendToBackend(payload) {
   const data = JSON.stringify(payload);
@@ -31,12 +40,9 @@ async function sendToBackend(payload) {
     return;
   }
 
-  const response = await fetch(config.endpoint, {
+  const response = await fetch(getIngestUrl(), {
     method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      'X-APM-Key': config.apiKey
-    },
+    headers: { 'Content-Type': 'application/json' },
     body: data,
     keepalive: true
   });
@@ -48,26 +54,21 @@ async function sendToBackend(payload) {
 
 /**
  * Send payload using navigator.sendBeacon (for page unload).
- * sendBeacon cannot set custom headers, so the API key is passed
- * as a query parameter — same pattern as Datadog's clientToken.
+ * sendBeacon is more reliable than fetch during page close/navigation.
  */
 function sendBeacon(payload) {
   const data = JSON.stringify(payload);
 
   if (typeof navigator !== 'undefined' && navigator.sendBeacon) {
-    const url = `${config.endpoint}?apmKey=${encodeURIComponent(config.apiKey)}`;
     const blob = new Blob([data], { type: 'application/json' });
-    return navigator.sendBeacon(url, blob);
+    return navigator.sendBeacon(getIngestUrl(), blob);
   }
 
   // Fallback: fetch with keepalive (survives page unload in modern browsers)
   try {
-    fetch(config.endpoint, {
+    fetch(getIngestUrl(), {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'X-APM-Key': config.apiKey
-      },
+      headers: { 'Content-Type': 'application/json' },
       body: data,
       keepalive: true
     });
@@ -86,7 +87,7 @@ export async function flush() {
   if (!aggregator.hasData()) return;
 
   const payload = aggregator.flush();
-  debug(`Flushing ${payload.dependencies.length} dependency metrics`);
+  debug(`Flushing ${payload.requests.length} request metrics`);
 
   try {
     const startTime = performance.now();

package/src/browser.js

@@ -130,8 +130,9 @@ function getStatus() {
 const noop = () => {};
 function normalizeRoute(route) { return route; }
 function extractRoute(req) { return req?.url || '/'; }
-function instrumentMongoDB() {}
-function instrumentOpenAI() {}
+
+function instrumentMongoDB() { return noop(); }
+function instrumentOpenAI() { return noop(); }
 function createBreaker(fn) { return fn; }
 function wrapMongoOperation(fn) { return fn; }
 function getBreakerStats() { return {}; }