@affogatosoftware/recorder 1.0.9 → 1.1.0

package/dist/index.d.ts

@@ -1 +1,2 @@
 export { Recorder, type RecorderSettings } from './recorder/recorder';
+export { NetworkRecorder, type NetworkRequest } from './recorder/networkRecorder';

package/dist/index.js

@@ -1 +1,2 @@
 export { Recorder } from './recorder/recorder';
+export { NetworkRecorder } from './recorder/networkRecorder';

package/dist/recorder/errorRecorder.d.ts

@@ -0,0 +1,29 @@
+export interface ConsoleError {
+    errorType: "console_error" | "console_warn" | "uncaught_error" | "unhandled_rejection";
+    message: string;
+    stack?: string;
+    timestamp: number;
+    source?: string;
+}
+export declare class ErrorRecorder {
+    private window;
+    private errorsBuffer;
+    private isRunning;
+    private readonly flushIntervalMs;
+    private capturedSessionId;
+    private flushTimerId;
+    private originalConsoleError;
+    private originalConsoleWarn;
+    private enabled;
+    constructor(window: Window, consoleErrorSettings?: {
+        enabled: boolean;
+    });
+    start: () => void;
+    stop: () => void;
+    private captureConsoleError;
+    private handleUncaughtError;
+    private handleUnhandledRejection;
+    private scheduleFlush;
+    private flush;
+    setCapturedSessionId(uuid: string): void;
+}

package/dist/recorder/errorRecorder.js

@@ -0,0 +1,143 @@
+// Captures console errors, warnings, and uncaught errors/promise rejections
+// Buffers error events and flushes to API endpoint periodically similar to EventRecorder
+import { logger } from "../logger";
+import { post } from "../requests";
+export class ErrorRecorder {
+    window;
+    errorsBuffer = [];
+    isRunning = false;
+    flushIntervalMs = 2000;
+    capturedSessionId;
+    flushTimerId = null;
+    originalConsoleError;
+    originalConsoleWarn;
+    enabled;
+    constructor(window, consoleErrorSettings) {
+        this.window = window;
+        this.originalConsoleError = console.error.bind(console);
+        this.originalConsoleWarn = console.warn.bind(console);
+        this.enabled = consoleErrorSettings?.enabled ?? false; // Default enabled for backwards compatibility
+    }
+    start = () => {
+        if (this.isRunning || !this.enabled) {
+            return;
+        }
+        this.isRunning = true;
+        this.errorsBuffer = [];
+        // Intercept console.error
+        console.error = (...args) => {
+            this.captureConsoleError("console_error", args);
+            this.originalConsoleError(...args);
+        };
+        // Intercept console.warn
+        console.warn = (...args) => {
+            this.captureConsoleError("console_warn", args);
+            this.originalConsoleWarn(...args);
+        };
+        // Capture uncaught errors
+        this.window.addEventListener("error", this.handleUncaughtError);
+        // Capture unhandled promise rejections
+        this.window.addEventListener("unhandledrejection", this.handleUnhandledRejection);
+        this.scheduleFlush();
+    };
+    stop = () => {
+        this.isRunning = false;
+        // Restore original console methods
+        console.error = this.originalConsoleError;
+        console.warn = this.originalConsoleWarn;
+        // Remove event listeners
+        this.window.removeEventListener("error", this.handleUncaughtError);
+        this.window.removeEventListener("unhandledrejection", this.handleUnhandledRejection);
+        if (this.flushTimerId) {
+            clearTimeout(this.flushTimerId);
+            this.flushTimerId = null;
+        }
+    };
+    captureConsoleError = (errorType, args) => {
+        if (!this.isRunning) {
+            return;
+        }
+        try {
+            const message = args.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' ');
+            const error = {
+                errorType,
+                message,
+                timestamp: Date.now()
+            };
+            // Try to extract stack trace if available
+            if (args.length > 0 && args[0] instanceof Error) {
+                error.stack = args[0].stack;
+            }
+            this.errorsBuffer.push(error);
+        }
+        catch (captureError) {
+            logger.error("Failed to capture console error", captureError);
+        }
+    };
+    handleUncaughtError = (event) => {
+        if (!this.isRunning) {
+            return;
+        }
+        try {
+            const error = {
+                errorType: "uncaught_error",
+                message: event.message,
+                stack: event.error?.stack,
+                timestamp: Date.now(),
+                source: event.filename ? `${event.filename}:${event.lineno}:${event.colno}` : undefined
+            };
+            this.errorsBuffer.push(error);
+        }
+        catch (captureError) {
+            logger.error("Failed to capture uncaught error", captureError);
+        }
+    };
+    handleUnhandledRejection = (event) => {
+        if (!this.isRunning) {
+            return;
+        }
+        try {
+            let message;
+            let stack;
+            if (event.reason instanceof Error) {
+                message = event.reason.message;
+                stack = event.reason.stack;
+            }
+            else {
+                message = String(event.reason);
+            }
+            const error = {
+                errorType: "unhandled_rejection",
+                message,
+                stack,
+                timestamp: Date.now()
+            };
+            this.errorsBuffer.push(error);
+        }
+        catch (captureError) {
+            logger.error("Failed to capture unhandled rejection", captureError);
+        }
+    };
+    scheduleFlush = () => {
+        if (this.flushTimerId) {
+            clearTimeout(this.flushTimerId);
+        }
+        this.flushTimerId = setTimeout(this.flush, this.flushIntervalMs);
+    };
+    flush = async () => {
+        if (this.errorsBuffer.length > 0 && this.capturedSessionId) {
+            try {
+                const response = await post(`/public/captured-sessions/${this.capturedSessionId}/console-errors`, this.errorsBuffer, { withCredentials: false });
+                this.errorsBuffer = [];
+            }
+            catch (error) {
+                logger.error("Failed to flush console errors", error);
+                this.errorsBuffer = [];
+            }
+        }
+        this.scheduleFlush();
+    };
+    setCapturedSessionId(uuid) {
+        this.capturedSessionId = uuid;
+    }
+}

package/dist/recorder/networkRecorder.d.ts

@@ -0,0 +1,54 @@
+export interface NetworkRequest {
+    requestId: string;
+    type: "xhr" | "fetch";
+    method: string;
+    url: string;
+    requestHeaders?: Record<string, string>;
+    requestBody?: string;
+    responseStatus?: number;
+    responseHeaders?: Record<string, string>;
+    responseBody?: string;
+    timestamp: number;
+    duration?: number;
+    error?: string;
+}
+interface NetworkRecorderSettings {
+    enabled: boolean;
+    maxRequestBodySize: number;
+    maxResponseBodySize: number;
+    excludeDomains: string[];
+    captureHeaders: boolean;
+    captureRequestBodies: boolean;
+    captureResponseBodies: boolean;
+    excludeHeaders: string[];
+    requestBodyMaskingFunction?: (body: string) => string;
+}
+export declare class NetworkRecorder {
+    private window;
+    private requestsBuffer;
+    private pendingRequests;
+    private isRunning;
+    private readonly flushIntervalMs;
+    private capturedSessionId;
+    private flushTimerId;
+    private originalFetch;
+    private originalXHROpen;
+    private originalXHRSend;
+    private queryParamsAllowed;
+    private networkSettings;
+    constructor(window: Window, settings?: Partial<NetworkRecorderSettings>);
+    start: () => void;
+    stop: () => void;
+    setCapturedSessionId(uuid: string): void;
+    private scheduleFlush;
+    private flush;
+    private patchFetch;
+    private patchXHR;
+    private shouldCaptureRequest;
+    private sanitizeUrl;
+    private filterHeaders;
+    private truncateContent;
+    private generateRequestId;
+    private addCompletedRequest;
+}
+export {};

package/dist/recorder/networkRecorder.js

@@ -0,0 +1,376 @@
+import { logger } from "../logger";
+import { post } from "../requests";
+export class NetworkRecorder {
+    window;
+    requestsBuffer = [];
+    pendingRequests = new Map();
+    isRunning = false;
+    flushIntervalMs = 2000;
+    capturedSessionId;
+    flushTimerId = null;
+    // Store original implementations
+    originalFetch;
+    originalXHROpen;
+    originalXHRSend;
+    // URL sanitization - reuse pattern from EventRecorder
+    queryParamsAllowed = new Set([
+        "utm_source", "source", "ref", "utm_medium", "medium",
+        "utm_campaign", "campaign", "utm_content", "content", "utm_term", "term"
+    ]);
+    networkSettings = {
+        enabled: false, // Default disabled
+        maxRequestBodySize: 10 * 1024, // 10KB
+        maxResponseBodySize: 50 * 1024, // 50KB
+        excludeDomains: [],
+        captureHeaders: false,
+        captureRequestBodies: false,
+        captureResponseBodies: true,
+        excludeHeaders: []
+    };
+    constructor(window, settings) {
+        this.window = window;
+        this.originalFetch = this.window.fetch.bind(this.window);
+        this.originalXHROpen = XMLHttpRequest.prototype.open;
+        this.originalXHRSend = XMLHttpRequest.prototype.send;
+        if (settings) {
+            this.networkSettings = { ...this.networkSettings, ...settings };
+        }
+    }
+    start = () => {
+        if (this.isRunning || !this.networkSettings.enabled) {
+            return;
+        }
+        this.isRunning = true;
+        this.requestsBuffer = [];
+        this.patchFetch();
+        this.patchXHR();
+        this.scheduleFlush();
+    };
+    stop = () => {
+        this.isRunning = false;
+        // Restore original implementations
+        this.window.fetch = this.originalFetch;
+        XMLHttpRequest.prototype.open = this.originalXHROpen;
+        XMLHttpRequest.prototype.send = this.originalXHRSend;
+        if (this.flushTimerId) {
+            clearTimeout(this.flushTimerId);
+            this.flushTimerId = null;
+        }
+    };
+    setCapturedSessionId(uuid) {
+        this.capturedSessionId = uuid;
+    }
+    scheduleFlush = () => {
+        if (this.flushTimerId) {
+            clearTimeout(this.flushTimerId);
+        }
+        this.flushTimerId = setTimeout(this.flush, this.flushIntervalMs);
+    };
+    flush = async () => {
+        if (this.requestsBuffer.length > 0 && this.capturedSessionId) {
+            try {
+                const response = await post(`/public/captured-sessions/${this.capturedSessionId}/network-requests`, this.requestsBuffer, { withCredentials: false });
+                if (response.status !== 201) {
+                    logger.error("Failed to save network requests", response.data);
+                }
+                this.requestsBuffer = [];
+            }
+            catch (error) {
+                logger.error("Failed to save network requests", error);
+                this.requestsBuffer = [];
+            }
+        }
+        this.scheduleFlush();
+    };
+    patchFetch = () => {
+        const self = this;
+        this.window.fetch = async function (input, init) {
+            const requestId = self.generateRequestId();
+            const timestamp = Date.now();
+            let url = "";
+            let method = "GET";
+            let requestHeaders = {};
+            let requestBody;
+            // Parse input to extract URL and method
+            if (typeof input === "string") {
+                url = input;
+            }
+            else if (input instanceof URL) {
+                url = input.toString();
+            }
+            else if (input instanceof Request) {
+                url = input.url;
+                method = input.method;
+                if (self.networkSettings.captureHeaders) {
+                    input.headers.forEach((value, key) => {
+                        requestHeaders[key] = value;
+                    });
+                }
+                if (self.networkSettings.captureRequestBodies && input.body) {
+                    try {
+                        const clonedRequest = input.clone();
+                        requestBody = await clonedRequest.text();
+                    }
+                    catch (e) {
+                        // Body already consumed, skip
+                    }
+                }
+            }
+            if (init) {
+                method = init.method || method;
+                if (self.networkSettings.captureHeaders && init.headers) {
+                    if (init.headers instanceof Headers) {
+                        init.headers.forEach((value, key) => {
+                            requestHeaders[key] = value;
+                        });
+                    }
+                    else if (Array.isArray(init.headers)) {
+                        init.headers.forEach(([key, value]) => {
+                            requestHeaders[key] = value;
+                        });
+                    }
+                    else {
+                        Object.assign(requestHeaders, init.headers);
+                    }
+                }
+                if (self.networkSettings.captureRequestBodies && init.body) {
+                    if (typeof init.body === "string") {
+                        requestBody = init.body;
+                    }
+                    else {
+                        try {
+                            requestBody = JSON.stringify(init.body);
+                        }
+                        catch (e) {
+                            requestBody = "[Unable to serialize body]";
+                        }
+                    }
+                }
+            }
+            if (!self.shouldCaptureRequest(url)) {
+                return self.originalFetch(input, init);
+            }
+            const sanitizedUrl = self.sanitizeUrl(url);
+            const filteredHeaders = self.filterHeaders(requestHeaders);
+            const truncatedBody = self.truncateContent(requestBody, self.networkSettings.maxRequestBodySize);
+            // Create initial request record
+            const networkRequest = {
+                requestId,
+                type: "fetch",
+                method: method.toUpperCase(),
+                url: sanitizedUrl,
+                requestHeaders: Object.keys(filteredHeaders).length > 0 ? filteredHeaders : undefined,
+                requestBody: truncatedBody,
+                timestamp
+            };
+            self.pendingRequests.set(requestId, networkRequest);
+            try {
+                const response = await self.originalFetch(input, init);
+                const duration = Date.now() - timestamp;
+                let responseHeaders = {};
+                let responseBody;
+                if (self.networkSettings.captureHeaders) {
+                    response.headers.forEach((value, key) => {
+                        responseHeaders[key] = value;
+                    });
+                }
+                if (self.networkSettings.captureResponseBodies) {
+                    try {
+                        const clonedResponse = response.clone();
+                        const text = await clonedResponse.text();
+                        responseBody = self.truncateContent(text, self.networkSettings.maxResponseBodySize);
+                    }
+                    catch (e) {
+                        responseBody = "[Unable to read response body]";
+                    }
+                }
+                // Complete the request record
+                const completedRequest = {
+                    ...networkRequest,
+                    responseStatus: response.status,
+                    responseHeaders: Object.keys(responseHeaders).length > 0 ? self.filterHeaders(responseHeaders) : undefined,
+                    responseBody,
+                    duration
+                };
+                self.addCompletedRequest(requestId, completedRequest);
+                return response;
+            }
+            catch (error) {
+                const duration = Date.now() - timestamp;
+                const errorRequest = {
+                    ...networkRequest,
+                    error: error instanceof Error ? error.message : String(error),
+                    duration
+                };
+                self.addCompletedRequest(requestId, errorRequest);
+                throw error;
+            }
+        };
+    };
+    patchXHR = () => {
+        const self = this;
+        XMLHttpRequest.prototype.open = function (method, url, async, username, password) {
+            const xhr = this;
+            const urlString = typeof url === "string" ? url : url.toString();
+            if (self.shouldCaptureRequest(urlString)) {
+                const requestId = self.generateRequestId();
+                const timestamp = Date.now();
+                xhr.__networkRecorder = {
+                    requestId,
+                    timestamp,
+                    method: method.toUpperCase(),
+                    url: self.sanitizeUrl(urlString)
+                };
+            }
+            return self.originalXHROpen.call(this, method, url, async ?? true, username, password);
+        };
+        XMLHttpRequest.prototype.send = function (body) {
+            const xhr = this;
+            if (xhr.__networkRecorder) {
+                const { requestId, timestamp, method, url } = xhr.__networkRecorder;
+                let requestHeaders = {};
+                let requestBody;
+                if (self.networkSettings.captureRequestBodies && body) {
+                    if (typeof body === "string") {
+                        requestBody = body;
+                    }
+                    else {
+                        try {
+                            requestBody = JSON.stringify(body);
+                        }
+                        catch (e) {
+                            requestBody = "[Unable to serialize body]";
+                        }
+                    }
+                }
+                const networkRequest = {
+                    requestId,
+                    type: "xhr",
+                    method,
+                    url,
+                    requestHeaders: Object.keys(requestHeaders).length > 0 ? self.filterHeaders(requestHeaders) : undefined,
+                    requestBody: self.truncateContent(requestBody, self.networkSettings.maxRequestBodySize),
+                    timestamp
+                };
+                self.pendingRequests.set(requestId, networkRequest);
+                // Handle response
+                const originalOnReadyStateChange = xhr.onreadystatechange;
+                xhr.onreadystatechange = function () {
+                    if (xhr.readyState === XMLHttpRequest.DONE) {
+                        const duration = Date.now() - timestamp;
+                        let responseHeaders = {};
+                        let responseBody;
+                        if (self.networkSettings.captureHeaders) {
+                            const headerString = xhr.getAllResponseHeaders();
+                            if (headerString) {
+                                headerString.split('\r\n').forEach(line => {
+                                    const parts = line.split(': ');
+                                    if (parts.length === 2) {
+                                        responseHeaders[parts[0]] = parts[1];
+                                    }
+                                });
+                            }
+                        }
+                        if (self.networkSettings.captureResponseBodies) {
+                            try {
+                                responseBody = self.truncateContent(xhr.responseText, self.networkSettings.maxResponseBodySize);
+                            }
+                            catch (e) {
+                                responseBody = "[Unable to read response]";
+                            }
+                        }
+                        const completedRequest = {
+                            ...networkRequest,
+                            responseStatus: xhr.status,
+                            responseHeaders: Object.keys(responseHeaders).length > 0 ? self.filterHeaders(responseHeaders) : undefined,
+                            responseBody,
+                            duration,
+                            error: xhr.status === 0 ? "Network error" : undefined
+                        };
+                        self.addCompletedRequest(requestId, completedRequest);
+                    }
+                    if (originalOnReadyStateChange) {
+                        originalOnReadyStateChange.call(this, new Event('readystatechange'));
+                    }
+                };
+            }
+            return self.originalXHRSend.call(this, body ?? null);
+        };
+    };
+    shouldCaptureRequest(url) {
+        if (!this.isRunning || !this.networkSettings.enabled) {
+            return false;
+        }
+        try {
+            const urlObj = new URL(url, this.window.location.href);
+            // Don't capture requests to our own API endpoints
+            if (urlObj.pathname.includes('/public/captured-sessions')) {
+                return false;
+            }
+            // Check excluded domains
+            if (this.networkSettings.excludeDomains.some(domain => urlObj.hostname.includes(domain))) {
+                return false;
+            }
+            return true;
+        }
+        catch (e) {
+            return false;
+        }
+    }
+    sanitizeUrl(url) {
+        try {
+            const urlObj = new URL(url, this.window.location.href);
+            // Apply same sanitization as EventRecorder
+            for (const key of urlObj.searchParams.keys()) {
+                if (!this.queryParamsAllowed.has(key.toLowerCase())) {
+                    urlObj.searchParams.set(key, "$redacted");
+                }
+            }
+            return urlObj.toString();
+        }
+        catch (e) {
+            logger.error("Failed to sanitize URL", e);
+            return url;
+        }
+    }
+    filterHeaders(headers) {
+        const filtered = {};
+        const defaultSensitiveHeaders = new Set([
+            'authorization', 'cookie', 'x-api-key', 'x-auth-token',
+            'x-csrf-token', 'x-session-token', 'set-cookie'
+        ]);
+        // Combine default sensitive headers with user-specified excluded headers
+        const excludedHeaders = new Set([
+            ...defaultSensitiveHeaders,
+            ...this.networkSettings.excludeHeaders.map(h => h.toLowerCase())
+        ]);
+        for (const [key, value] of Object.entries(headers)) {
+            if (excludedHeaders.has(key.toLowerCase())) {
+                // Don't record excluded headers
+                continue;
+            }
+            filtered[key] = value;
+        }
+        return filtered;
+    }
+    truncateContent(content, maxSize) {
+        if (!content)
+            return content;
+        // Apply masking function if provided
+        let processedContent = content;
+        if (this.networkSettings.requestBodyMaskingFunction) {
+            processedContent = this.networkSettings.requestBodyMaskingFunction(content);
+        }
+        if (processedContent.length > maxSize) {
+            return processedContent.substring(0, maxSize) + `... [truncated from ${processedContent.length} chars]`;
+        }
+        return processedContent;
+    }
+    generateRequestId() {
+        return `req_${crypto.randomUUID()}`;
+    }
+    addCompletedRequest(requestId, request) {
+        this.pendingRequests.delete(requestId);
+        this.requestsBuffer.push(request);
+    }
+}

package/dist/recorder/recorder.d.ts

@@ -1,27 +1,43 @@
 export declare class Recorder {
     private window;
     private publicToken;
-    private recorderSettings;
     private sessionRecorder;
     private eventRecorder;
+    private errorRecorder;
+    private networkRecorder;
+    private recorderSettings;
     private capturedSessionId;
     private pingIntervalMs;
     private pingTimeout;
-    constructor(window: Window, publicToken: string, recorderSettings?: RecorderSettings);
+    constructor(window: Window, publicToken: string, userSettings?: Partial<RecorderSettings>);
     private schedulePing;
     private ping;
     /**
-     * Start both recorders
+     * Start all recorders
      */
     start(): void;
     /**
-     * Stop both recorders
+     * Stop all recorders
      */
     stop(): void;
     private collectCapturedUserMetadata;
 }
 export interface RecorderSettings {
-    maskingLevel?: "none" | "all" | "input-and-textarea" | "input-password-or-email-and-textarea";
+    maskingLevel: "none" | "all" | "input-and-textarea" | "input-password-or-email-and-textarea";
+    consoleRecording: {
+        enabled: boolean;
+    };
+    networkRecording: {
+        enabled: boolean;
+        maxRequestBodySize: number;
+        maxResponseBodySize: number;
+        excludeDomains: string[];
+        captureHeaders: boolean;
+        captureRequestBodies: boolean;
+        captureResponseBodies: boolean;
+        excludeHeaders: string[];
+        requestBodyMaskingFunction?: (body: string) => string;
+    };
 }
 export interface CapturedUserMetadata {
     browserName?: string;