@watchforge/browser 0.1.9 → 0.1.11

package/bin/watchforge.js

@@ -280,6 +280,7 @@ export default function WatchForgeInit() {
 
 function createNextGlobalError(cwd, layoutPath) {
   const appDir = path.dirname(layoutPath);
+  const configImport = toImportPath(appDir, getConfigPath(cwd));
   const usesTs = projectUsesTypeScript(cwd);
   const globalErrorPath = path.join(appDir, usesTs ? "global-error.tsx" : "global-error.jsx");
 
@@ -301,10 +302,12 @@ function createNextGlobalError(cwd, layoutPath) {
   const content = `"use client";
 
 import { useEffect } from "react";
-import { captureException } from "@watchforge/browser";
+import { register, captureException } from "@watchforge/browser";
+import { watchforgeConfig } from "${configImport}";
 
 export default function GlobalError(${propsSignature}) {
   useEffect(() => {
+    register(watchforgeConfig);
     void captureException(error, {
       tags: {
         framework: "nextjs",
@@ -347,17 +350,35 @@ function createNextInstrumentation(cwd, layoutPath) {
   const configImport = toImportPath(path.dirname(instrumentationPath), getConfigPath(cwd));
 
   if (fileExists(instrumentationPath)) {
-    const content = fs.readFileSync(instrumentationPath, "utf8");
+    let content = fs.readFileSync(instrumentationPath, "utf8");
+    if (content.includes("onRequestError")) {
+      log(`${path.relative(cwd, instrumentationPath)} already contains WatchForge request error capture`);
+      return;
+    }
+
     if (content.includes("@watchforge/browser/next/server")) {
-      log(`${path.relative(cwd, instrumentationPath)} already contains WatchForge setup`);
+      content = content.replace(
+        /import\s*\{\s*register\s+as\s+registerWatchForge\s*\}\s*from\s*"@watchforge\/browser\/next\/server";/,
+        'import { register as registerWatchForge, onRequestError as watchForgeOnRequestError } from "@watchforge/browser/next/server";'
+      );
+      if (!content.includes("watchForgeOnRequestError")) {
+        content = `import { onRequestError as watchForgeOnRequestError } from "@watchforge/browser/next/server";\n${content}`;
+      }
+      content = `${content.trim()}\n\nexport const onRequestError = watchForgeOnRequestError;\n`;
+      fs.writeFileSync(instrumentationPath, content);
+      log(`patched ${path.relative(cwd, instrumentationPath)} for SSR/request error capture`);
       return;
     }
+
     log(`skipped ${path.relative(cwd, instrumentationPath)} because it already exists`);
-    log("add registerWatchForge(watchforgeConfig) there manually to report Next.js server runtime errors");
+    log("add registerWatchForge(watchforgeConfig) and onRequestError there manually");
     return;
   }
 
-  const content = `import { register as registerWatchForge } from "@watchforge/browser/next/server";
+  const content = `import {
+  register as registerWatchForge,
+  onRequestError as watchForgeOnRequestError,
+} from "@watchforge/browser/next/server";
 import { watchforgeConfig } from "${configImport}";
 
 export async function register() {
@@ -365,6 +386,8 @@ export async function register() {
     registerWatchForge(watchforgeConfig);
   }
 }
+
+export const onRequestError = watchForgeOnRequestError;
 `;
 
   writeIfChanged(instrumentationPath, content);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@watchforge/browser",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "main": "./src/index.js",
   "types": "./src/index.d.ts",
   "description": "WatchForge JavaScript SDK for browser JavaScript, Next.js, React, Node.js, and Express.js",

package/src/client.js

@@ -19,6 +19,7 @@ let DSN = null;
 let APP_ENV = "production";
 let RELEASE = null;
 let DEBUG = false;
+let CAPTURE_CONSOLE_ERRORS = true;
 
 // Detect environment
 const isBrowser = typeof window !== "undefined";
@@ -28,6 +29,8 @@ const isNode =
 // In-memory breadcrumb buffer (shared for all events in this process / page)
 const MAX_BREADCRUMBS = 100;
 let breadcrumbs = [];
+let browserInstrumentationInstalled = false;
+let nodeInstrumentationInstalled = false;
 
 export function addBreadcrumb(breadcrumb) {
   const entry = {
@@ -48,6 +51,10 @@ function getBreadcrumbsSnapshot() {
   return breadcrumbs.slice();
 }
 
+function isWatchForgeInternalMessage(message) {
+  return String(message || "").includes("WatchForge SDK");
+}
+
 // Simple browser environment detectors (best-effort, not 100% accurate)
 function getBrowserContext() {
   if (!isBrowser) return null;
@@ -150,6 +157,8 @@ function getRuntimeContext() {
 
 function setupBrowserInstrumentation() {
   if (!isBrowser) return;
+  if (browserInstrumentationInstalled) return;
+  browserInstrumentationInstalled = true;
 
   // Global error handlers (already existed but keep here with breadcrumbs)
   window.onerror = function (msg, url, line, col, error) {
@@ -180,13 +189,42 @@ function setupBrowserInstrumentation() {
     const original = console[level].bind(console);
     console[level] = (...args) => {
       try {
+        const message = args.map(String).join(" ");
         addBreadcrumb({
           type: "log",
           level,
           category: "console",
-          message: args.map(String).join(" "),
+          message,
           data: {},
         });
+
+        if (
+          level === "error" &&
+          CAPTURE_CONSOLE_ERRORS &&
+          !isWatchForgeInternalMessage(message)
+        ) {
+          const errorArg = args.find((arg) => arg instanceof Error);
+          const error =
+            errorArg ||
+            new Error(message || "console.error");
+          setTimeout(() => {
+            void captureException(error, {
+              tags: {
+                handled: true,
+                mechanism: "console.error",
+              },
+              contexts: {
+                console: {
+                  arguments: args.map((arg) =>
+                    arg instanceof Error
+                      ? { name: arg.name, message: arg.message, stack: arg.stack }
+                      : String(arg)
+                  ),
+                },
+              },
+            });
+          }, 0);
+        }
       } catch (_) {
         // best-effort, never break console
       }
@@ -389,11 +427,13 @@ export function register({
   blockClass = "rr-block",
   ignoreClass = "rr-ignore",
   maskTextClass = "rr-mask",
+  captureConsoleErrors = true,
 }) {
   DSN = dsn;
   APP_ENV = app_env;
   RELEASE = release;
   DEBUG = debug;
+  CAPTURE_CONSOLE_ERRORS = Boolean(captureConsoleErrors);
   
   // Initialize tracing
   initTracing(dsn, app_env, debug);
@@ -433,6 +473,9 @@ export function register({
   
   // Node.js: Set up process error handlers
   if (isNode) {
+    if (nodeInstrumentationInstalled) return;
+    nodeInstrumentationInstalled = true;
+
     process.on("uncaughtException", (error) => {
       void captureException(error);
     });

package/src/contexts.js

@@ -7,7 +7,7 @@ const isNode =
   typeof process !== "undefined" && process.versions && process.versions.node;
 
 export const SDK_NAME = "@watchforge/browser";
-export const SDK_VERSION = "0.1.1";
+export const SDK_VERSION = "0.1.11";
 
 export function getSdkMetadata() {
   return {

package/src/index.d.ts

@@ -9,6 +9,7 @@ export interface WatchForgeRegisterOptions {
   blockClass?: string;
   ignoreClass?: string;
   maskTextClass?: string;
+  captureConsoleErrors?: boolean;
 }
 
 export interface WatchForgeCaptureContext {

package/src/next-server.d.ts

@@ -5,6 +5,27 @@ import type {
 
 export function register(options: WatchForgeRegisterOptions): void;
 
+export type NextRequestErrorContext = {
+  routerKind: "Pages Router" | "App Router";
+  routePath: string;
+  routeType: "render" | "route" | "action" | "middleware";
+  renderSource?:
+    | "react-server-components"
+    | "react-server-components-payload"
+    | "server-rendering";
+  revalidateReason?: "on-demand" | "stale";
+};
+
+export function onRequestError(
+  error: unknown,
+  request: Readonly<{
+    path: string;
+    method: string;
+    headers: Record<string, string | string[] | undefined>;
+  }>,
+  context: Readonly<NextRequestErrorContext>
+): void | Promise<void>;
+
 export function captureException(
   error: unknown,
   context?: WatchForgeCaptureContext

package/src/next-server.js

@@ -1,10 +1,70 @@
 import {
   captureException,
   captureMessage,
-  register,
+  register as registerClient,
 } from "./client.js";
 
-export { captureException, captureMessage, register };
+let registeredOptions = null;
+
+export function register(options) {
+  registeredOptions = options;
+  registerClient(options);
+}
+
+export { captureException, captureMessage };
+
+function buildRequestUrl(request) {
+  if (!request?.path) return "";
+  const path = request.path.startsWith("/") ? request.path : `/${request.path}`;
+  return path;
+}
+
+export async function onRequestError(error, request, context) {
+  if (!registeredOptions) return;
+
+  await captureException(error, {
+    request: {
+      url: buildRequestUrl(request),
+      method: request?.method || "GET",
+      headers: sanitizeRequestHeaders(request?.headers),
+    },
+    tags: {
+      framework: "nextjs",
+      runtime: "server",
+      router: context?.routerKind || "unknown",
+      route_type: context?.routeType || "unknown",
+    },
+    contexts: {
+      nextjs: {
+        on_request_error: true,
+        router_kind: context?.routerKind || null,
+        route_path: context?.routePath || null,
+        route_type: context?.routeType || null,
+        render_source: context?.renderSource || null,
+      },
+    },
+  });
+}
+
+function sanitizeRequestHeaders(headers) {
+  if (!headers) return {};
+
+  const sensitive = new Set([
+    "authorization",
+    "cookie",
+    "set-cookie",
+    "x-api-key",
+    "x-csrftoken",
+  ]);
+  const entries =
+    typeof headers.entries === "function"
+      ? Array.from(headers.entries())
+      : Object.entries(headers);
+
+  return Object.fromEntries(
+    entries.filter(([key]) => !sensitive.has(String(key).toLowerCase()))
+  );
+}
 
 function sanitizeHeaders(headers) {
   if (!headers || typeof headers.entries !== "function") return {};

package/src/replay.js

@@ -3,6 +3,8 @@ import { sendReplay } from "./transport.js";
 const isBrowser = typeof window !== "undefined";
 const MAX_BUFFER_MS = 60 * 1000;
 const MAX_EVENTS = 500;
+const RRWEB_FULL_SNAPSHOT = 2;
+const RRWEB_META = 4;
 
 let options = {
   replaysSessionSampleRate: 0,
@@ -37,9 +39,43 @@ function shouldSample(rate) {
 
 function trimBuffer(now = Date.now()) {
   events = events.filter((event) => now - event.timestamp <= MAX_BUFFER_MS);
-  if (events.length > MAX_EVENTS) {
-    events = events.slice(-MAX_EVENTS);
+  if (events.length <= MAX_EVENTS) return;
+
+  const tail = events.slice(-MAX_EVENTS);
+  if (tail.some((event) => event.type === RRWEB_FULL_SNAPSHOT)) {
+    events = tail;
+    return;
+  }
+
+  const fullSnapshotIndex = findLastEventIndex(events, RRWEB_FULL_SNAPSHOT);
+  if (fullSnapshotIndex === -1) {
+    events = tail;
+    return;
+  }
+
+  const metaIndex = findLastEventIndex(
+    events.slice(0, fullSnapshotIndex),
+    RRWEB_META
+  );
+  const anchorEvents = [
+    ...(metaIndex >= 0 ? [events[metaIndex]] : []),
+    events[fullSnapshotIndex],
+  ];
+  const remainingSlots = Math.max(MAX_EVENTS - anchorEvents.length, 0);
+  const recentEvents = events
+    .slice(fullSnapshotIndex + 1)
+    .slice(-remainingSlots);
+
+  events = [...anchorEvents, ...recentEvents].sort(
+    (a, b) => (a.timestamp || 0) - (b.timestamp || 0)
+  );
+}
+
+function findLastEventIndex(list, type) {
+  for (let i = list.length - 1; i >= 0; i--) {
+    if (list[i]?.type === type) return i;
   }
+  return -1;
 }
 
 export async function initReplay(config = {}) {
@@ -115,7 +151,7 @@ export function flushReplayForEvent(dsn, eventId) {
     events,
     sdk: {
       name: "@watchforge/browser",
-      version: "0.1.3",
+      version: "0.1.11",
     },
   };
 

package/src/tracing.js

@@ -118,7 +118,7 @@ class Transaction {
       request: this.request,
       platform: typeof window !== "undefined" ? "javascript" : "node",
       sdk_name: "watchforge-javascript",
-      sdk_version: "0.1.0",
+      sdk_version: "0.1.11",
     };
 
     if (DEBUG) {