@watchforge/browser 0.1.0

package/src/react.js

@@ -0,0 +1,46 @@
+/**
+ * React integration for WatchForge SDK
+ * 
+ * Usage:
+ *   import { register } from '@watchforge/browser';
+ *   import { ErrorBoundary } from '@watchforge/browser/react';
+ *   
+ *   register({ dsn: "...", app_env: "production" });
+ *   
+ *   <ErrorBoundary>
+ *     <App />
+ *   </ErrorBoundary>
+ */
+
+import React from 'react';
+import { captureException } from './client.js';
+
+export class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    captureException(error, {
+      extra: {
+        componentStack: errorInfo.componentStack,
+      },
+      tags: {
+        framework: 'react',
+      },
+    });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback || React.createElement('h1', null, 'Something went wrong.');
+    }
+
+    return this.props.children;
+  }
+}

package/src/tracing.js

@@ -0,0 +1,253 @@
+// Trace and Span instrumentation for WatchForge JavaScript SDK
+
+let DSN = null;
+let APP_ENV = "production";
+let DEBUG = false;
+
+// Active transaction stack (for nested transactions)
+const transactionStack = [];
+
+export function initTracing(dsn, environment = "production", debug = false) {
+  DSN = dsn;
+  APP_ENV = environment;
+  DEBUG = debug;
+}
+
+class Span {
+  constructor(spanId, op, description = "", parentSpanId = null, data = {}) {
+    this.span_id = spanId;
+    this.op = op;
+    this.description = description;
+    this.parent_span_id = parentSpanId;
+    this.data = data;
+    this.start_timestamp = Date.now();
+    this.finish_timestamp = null;
+    this.duration_ms = 0;
+    this.status = "ok";
+    this.status_code = null;
+    this.tags = {};
+  }
+
+  finish(status = "ok", statusCode = null) {
+    this.finish_timestamp = Date.now();
+    this.duration_ms = this.finish_timestamp - this.start_timestamp;
+    this.status = status;
+    this.status_code = statusCode;
+  }
+
+  setTag(key, value) {
+    this.tags[key] = value;
+  }
+
+  setData(key, value) {
+    this.data[key] = value;
+  }
+
+  toJSON() {
+    return {
+      span_id: this.span_id,
+      parent_span_id: this.parent_span_id,
+      op: this.op,
+      description: this.description,
+      start_timestamp: new Date(this.start_timestamp).toISOString(),
+      finish_timestamp: this.finish_timestamp ? new Date(this.finish_timestamp).toISOString() : null,
+      duration_ms: this.duration_ms,
+      status: this.status,
+      status_code: this.status_code,
+      data: this.data,
+      tags: this.tags,
+      timestamp: new Date(this.start_timestamp).toISOString(),
+    };
+  }
+}
+
+class Transaction {
+  constructor(traceId, transaction, transactionName = "", op = "http.server") {
+    this.trace_id = traceId;
+    this.transaction = transaction;
+    this.transaction_name = transactionName || transaction;
+    this.op = op;
+    this.start_timestamp = Date.now();
+    this.finish_timestamp = null;
+    this.duration_ms = 0;
+    this.status = "ok";
+    this.spans = [];
+    this.tags = {};
+    this.contexts = {};
+    this.user = null;
+    this.request = null;
+    this.release_version = null;
+    this.environment = APP_ENV;
+  }
+
+  startSpan(op, description = "", data = {}) {
+    const parentSpanId = this.spans.length > 0 ? this.spans[this.spans.length - 1].span_id : null;
+    const spanId = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const span = new Span(spanId, op, description, parentSpanId, data);
+    this.spans.push(span);
+    return span;
+  }
+
+  finish(status = "ok") {
+    this.finish_timestamp = Date.now();
+    this.duration_ms = this.finish_timestamp - this.start_timestamp;
+    this.status = status;
+
+    // Finish all unfinished spans
+    this.spans.forEach((span) => {
+      if (!span.finish_timestamp) {
+        span.finish();
+      }
+    });
+
+    // Build trace payload
+    const payload = {
+      trace_id: this.trace_id,
+      transaction: this.transaction,
+      transaction_name: this.transaction_name,
+      start_timestamp: new Date(this.start_timestamp).toISOString(),
+      finish_timestamp: new Date(this.finish_timestamp).toISOString(),
+      duration_ms: this.duration_ms,
+      status: this.status,
+      environment: this.environment,
+      release: this.release_version,
+      spans: this.spans.map((s) => s.toJSON()),
+      tags: this.tags,
+      contexts: this.contexts,
+      user: this.user,
+      request: this.request,
+      platform: typeof window !== "undefined" ? "javascript" : "node",
+      sdk_name: "watchforge-javascript",
+      sdk_version: "0.1.0",
+    };
+
+    if (DEBUG) {
+      console.log("[WatchForge Trace] Sending trace:", this.transaction_name);
+      console.log("[WatchForge Trace] Spans:", this.spans.length);
+    }
+
+    // Send trace
+    if (DSN) {
+      sendTrace(DSN, payload);
+    }
+
+    return payload;
+  }
+
+  setTag(key, value) {
+    this.tags[key] = value;
+  }
+
+  setUser(user) {
+    this.user = user;
+  }
+
+  setRequest(request) {
+    this.request = request;
+  }
+}
+
+function sendTrace(dsn, payload) {
+  const isBrowser = typeof window !== "undefined";
+  const isNode = typeof process !== "undefined" && process.versions && process.versions.node;
+
+  // Parse DSN to get trace API URL
+  const dsnMatch = dsn.match(/^https?:\/\/([^@]+)@([^\/]+)\/(.+)$/);
+  if (!dsnMatch) {
+    console.error("WatchForge SDK: Invalid DSN");
+    return;
+  }
+
+  const host = dsnMatch[2];
+  const scheme = dsn.startsWith("https") ? "https" : "http";
+  const finalScheme = host.includes("localhost") || host.includes("127.0.0.1") ? "http" : scheme;
+  const traceUrl = `${finalScheme}://${host}/api/ingestion/trace/`;
+
+  if (isBrowser) {
+    fetch(traceUrl, {
+      method: "POST",
+      headers: {
+        Authorization: `DSN ${dsn}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(payload),
+      keepalive: true,
+    }).catch((error) => {
+      console.error("WatchForge SDK - Failed to send trace:", error);
+    });
+  } else if (isNode) {
+    // Node.js: use http/https
+    const http = traceUrl.startsWith("https") ? require("https") : require("http");
+    const { URL } = require("url");
+    const url = new URL(traceUrl);
+
+    const bodyString = JSON.stringify(payload);
+    const bodyBuffer = Buffer.from(bodyString, "utf8");
+
+    let port = url.port;
+    if (!port || port === "") {
+      port = traceUrl.startsWith("https") ? 443 : 80;
+    } else {
+      port = parseInt(port, 10);
+    }
+
+    const options = {
+      hostname: url.hostname,
+      port: port,
+      path: url.pathname,
+      method: "POST",
+      headers: {
+        Authorization: `DSN ${dsn}`,
+        "Content-Type": "application/json",
+        "Content-Length": bodyBuffer.length,
+      },
+    };
+
+    const req = http.request(options, (res) => {
+      let responseData = "";
+      res.on("data", (chunk) => {
+        responseData += chunk;
+      });
+      res.on("end", () => {
+        if (DEBUG) {
+          if (res.statusCode >= 200 && res.statusCode < 300) {
+            console.log(`✅ WatchForge SDK: Trace sent successfully (${res.statusCode})`);
+          } else {
+            console.error(`❌ WatchForge SDK: Trace failed (${res.statusCode}):`, responseData);
+          }
+        }
+      });
+    });
+
+    req.on("error", (error) => {
+      if (DEBUG) {
+        console.error("❌ WatchForge SDK: Trace request error:", error.message);
+      }
+    });
+
+    req.setTimeout(5000);
+    req.write(bodyBuffer);
+    req.end();
+  }
+}
+
+export function startTransaction(transaction, transactionName = "", op = "http.server") {
+  const traceId = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  const txn = new Transaction(traceId, transaction, transactionName, op);
+  transactionStack.push(txn);
+  return txn;
+}
+
+export function getCurrentTransaction() {
+  return transactionStack.length > 0 ? transactionStack[transactionStack.length - 1] : null;
+}
+
+export function finishTransaction(status = "ok") {
+  const txn = transactionStack.pop();
+  if (txn) {
+    return txn.finish(status);
+  }
+  return null;
+}
+
+export { Transaction, Span };

package/src/transport.js

@@ -0,0 +1,191 @@
+// Detect environment (browser vs Node.js)
+const isBrowser = typeof window !== 'undefined';
+const isNode = typeof process !== 'undefined' && process.versions && process.versions.node;
+
+// Lazy-load Node.js require function for ES modules
+let nodeRequire = null;
+let nodeRequirePromise = null;
+
+function getNodeRequire() {
+  if (!isNode) return Promise.resolve(null);
+  if (nodeRequire) return Promise.resolve(nodeRequire);
+  
+  // Initialize on first call (async, but we'll handle it in sendEvent)
+  if (!nodeRequirePromise) {
+    nodeRequirePromise = (async () => {
+      try {
+        const { createRequire } = await import('module');
+        const { fileURLToPath } = await import('url');
+        nodeRequire = createRequire(fileURLToPath(import.meta.url));
+        return nodeRequire;
+      } catch (e) {
+        console.error("WatchForge SDK: Failed to create require function:", e);
+        return null;
+      }
+    })();
+  }
+  
+  return nodeRequirePromise;
+}
+
+// Parse DSN to extract components
+function parseDsn(dsn) {
+  // DSN format: https://PUBLIC_KEY@HOST:PORT/PROJECT_ID
+  // or: https://PUBLIC_KEY@HOST/PROJECT_ID
+  try {
+    const dsnMatch = dsn.match(/^https?:\/\/([^@]+)@([^\/]+)\/(.+)$/);
+    if (dsnMatch) {
+      const publicKey = dsnMatch[1];
+      const host = dsnMatch[2];
+      const projectId = dsnMatch[3];
+      const scheme = dsn.startsWith('https') ? 'https' : 'http';
+      const finalScheme = (host.includes('localhost') || host.includes('127.0.0.1')) ? 'http' : scheme;
+      
+      return {
+        scheme: finalScheme,
+        publicKey,
+        host,
+        projectId,
+        apiUrl: `${finalScheme}://${host}/api/ingestion/events/`,
+      };
+    }
+  } catch (e) {
+    // Invalid DSN
+  }
+  return null;
+}
+
+// Export parseDsn for use in client.js
+export { parseDsn };
+
+// Get API URL from DSN
+function getApiUrl(dsn) {
+  // Priority: 1. Env var (for local dev override), 2. DSN-derived, 3. Default
+  // Check environment variable (for local development)
+  if (isNode && process.env.WATCHFORGE_API_URL) {
+    return process.env.WATCHFORGE_API_URL;
+  }
+  if (isBrowser && typeof window !== 'undefined' && window.WATCHFORGE_API_URL) {
+    return window.WATCHFORGE_API_URL;
+  }
+  
+  // Parse DSN to get API URL
+  const parsed = parseDsn(dsn);
+  if (parsed) {
+    return parsed.apiUrl;
+  }
+  
+  // Default fallback
+  return isBrowser ? "/api/ingestion/events/" : "http://127.0.0.1:8001/api/ingestion/events/";
+}
+
+export function sendEvent(dsn, payload) {
+  const apiUrl = getApiUrl(dsn);
+  
+  if (isBrowser) {
+    // Browser: use fetch
+    fetch(apiUrl, {
+      method: "POST",
+      headers: {
+        Authorization: `DSN ${dsn}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(payload),
+      keepalive: true,
+    }).catch((error) => {
+      console.error("WatchForge SDK - Failed to send event:", error);
+    });
+  } else if (isNode) {
+    // Node.js: use http/https
+    // Handle async require initialization
+    const requirePromise = getNodeRequire();
+    // Fire and forget - don't block, but handle async
+    requirePromise.then((require) => {
+        if (!require) {
+          console.error("❌ WatchForge SDK: Failed to create require function");
+          return;
+        }
+        
+        try {
+          // Use require to load Node.js core modules
+          const http = apiUrl.startsWith('https') 
+            ? require('https') 
+            : require('http');
+          const { URL } = require('url');
+          const url = new URL(apiUrl);
+          
+          // Convert payload to JSON string
+          const bodyString = JSON.stringify(payload);
+          const bodyBuffer = Buffer.from(bodyString, 'utf8');
+          
+          console.log("WatchForge SDK: Sending event to", apiUrl);
+          console.log("WatchForge SDK: Payload size:", bodyBuffer.length, "bytes");
+          
+          // Parse port - url.port might be a string or empty
+          let port = url.port;
+          if (!port || port === '') {
+            port = apiUrl.startsWith('https') ? 443 : 80;
+          } else {
+            port = parseInt(port, 10);
+          }
+          
+          const options = {
+            hostname: url.hostname,
+            port: port,
+            path: url.pathname,
+            method: 'POST',
+            headers: {
+              'Authorization': `DSN ${dsn}`,
+              'Content-Type': 'application/json',
+              'Content-Length': bodyBuffer.length,
+            },
+          };
+          
+          const req = http.request(options, (res) => {
+            let responseData = '';
+            
+            res.on('data', (chunk) => {
+              responseData += chunk;
+            });
+            
+            res.on('end', () => {
+              if (res.statusCode >= 200 && res.statusCode < 300) {
+                console.log(`✅ WatchForge SDK: Event sent successfully (${res.statusCode})`);
+                if (responseData) {
+                  console.log("WatchForge SDK: Response:", responseData.substring(0, 200));
+                }
+              } else {
+                console.error(`❌ WatchForge SDK: Event failed (${res.statusCode}):`, responseData);
+              }
+            });
+          });
+          
+          req.on('error', (error) => {
+            console.error("❌ WatchForge SDK: Request error:", error.message);
+            console.error("WatchForge SDK: Error details:", {
+              code: error.code,
+              hostname: url.hostname,
+              port: url.port,
+              path: url.pathname,
+            });
+          });
+          
+          req.on('timeout', () => {
+            console.error("❌ WatchForge SDK: Request timeout");
+            req.destroy();
+          });
+          
+          req.setTimeout(5000); // 5 second timeout
+          
+          // Write the body buffer
+          req.write(bodyBuffer);
+          req.end();
+        } catch (e) {
+          console.error("❌ WatchForge SDK: Failed to send event:", e.message);
+          console.error("WatchForge SDK: Error stack:", e.stack);
+        }
+    }).catch((e) => {
+      console.error("❌ WatchForge SDK: Failed to initialize require:", e);
+    });
+  }
+}