@echoteam/signoz-react 1.2.2 → 1.2.3

package/dist/index.js

@@ -15370,6 +15370,16 @@ function addFetchLogging(config) {
                     const responseData = await clonedResponse.text();
                     const truncatedData = truncateBody(responseData, config.maxBodyLogSize);
                     span.setAttribute('response.data', truncatedData);
+                    // Try to parse JSON and extract message if exists
+                    try {
+                        const jsonData = JSON.parse(responseData);
+                        if (jsonData.message) {
+                            span.setAttribute('response.message', jsonData.message);
+                        }
+                    }
+                    catch (e) {
+                        // Not JSON or no message field, ignore
+                    }
                     if (config.enableConsoleLog) {
                         console.log(`[SignOz] ${method} Response from ${url} (${response.status}) on page ${pagePath} [${Math.round(duration)}ms]:`, truncatedData);
                     }
@@ -15452,6 +15462,16 @@ function addXHRLogging(config) {
                     const responseData = xhr.responseText;
                     const truncatedData = truncateBody(responseData, config.maxBodyLogSize);
                     span.setAttribute('response.data', truncatedData);
+                    // Try to parse JSON and extract message if exists
+                    try {
+                        const jsonData = JSON.parse(responseData);
+                        if (jsonData.message) {
+                            span.setAttribute('response.message', jsonData.message);
+                        }
+                    }
+                    catch (e) {
+                        // Not JSON or no message field, ignore
+                    }
                     if (config.enableConsoleLog) {
                         console.log(`[SignOz] ${method} Response from ${url} (${xhr.status}) on page ${pagePath} [${Math.round(duration)}ms]:`, truncatedData);
                     }
@@ -15605,6 +15625,169 @@ function addNavigationTracking(enableConsoleLog = false) {
         return result;
     };
 }
+// Fungsi untuk menambahkan WebSocket logging
+function addWebSocketLogging(config) {
+    if (!config.enableWebSocketLogging)
+        return;
+    const OriginalWebSocket = window.WebSocket;
+    window.WebSocket = function (url, protocols) {
+        const ws = new OriginalWebSocket(url, protocols);
+        const wsUrl = typeof url === 'string' ? url : url.toString();
+        // Capture current page info
+        const pageUrl = window.location.href;
+        const pagePath = window.location.pathname;
+        const tracer = trace.getTracer('websocket-logger');
+        let connectionSpan = tracer.startSpan('WebSocket Connection');
+        const connectionStartTime = performance.now();
+        connectionSpan.setAttribute('websocket.url', wsUrl);
+        connectionSpan.setAttribute('websocket.protocols', Array.isArray(protocols) ? protocols.join(',') : (protocols || 'none'));
+        connectionSpan.setAttribute('page.url', pageUrl);
+        connectionSpan.setAttribute('page.pathname', pagePath);
+        // Track connection open
+        const originalOnOpen = ws.onopen;
+        ws.addEventListener('open', function (event) {
+            const duration = performance.now() - connectionStartTime;
+            connectionSpan.setAttribute('websocket.state', 'open');
+            connectionSpan.setAttribute('duration_ms', Math.round(duration));
+            connectionSpan.setStatus({ code: SpanStatusCode.OK });
+            if (config.enableConsoleLog) {
+                console.log(`[SignOz] WebSocket Connected to ${wsUrl} from page ${pagePath} [${Math.round(duration)}ms]`);
+            }
+            connectionSpan.end();
+            if (originalOnOpen) {
+                originalOnOpen.call(ws, event);
+            }
+        });
+        // Track messages sent
+        const originalSend = ws.send;
+        ws.send = function (data) {
+            if (config.logWebSocketMessages) {
+                const messageSpan = tracer.startSpan('WebSocket Send');
+                const sendStartTime = performance.now();
+                messageSpan.setAttribute('websocket.url', wsUrl);
+                messageSpan.setAttribute('websocket.direction', 'send');
+                messageSpan.setAttribute('page.url', pageUrl);
+                messageSpan.setAttribute('page.pathname', pagePath);
+                // Log message data
+                if (typeof data === 'string') {
+                    const truncatedData = truncateBody(data, config.maxBodyLogSize);
+                    messageSpan.setAttribute('websocket.message', truncatedData);
+                    // Try to parse JSON and extract message if exists
+                    try {
+                        const jsonData = JSON.parse(data);
+                        if (jsonData.message) {
+                            messageSpan.setAttribute('websocket.message.text', jsonData.message);
+                        }
+                        if (jsonData.type || jsonData.event) {
+                            messageSpan.setAttribute('websocket.message.type', jsonData.type || jsonData.event);
+                        }
+                    }
+                    catch (e) {
+                        // Not JSON, ignore
+                    }
+                    if (config.enableConsoleLog) {
+                        console.log(`[SignOz] WebSocket Send to ${wsUrl} from page ${pagePath}:`, truncatedData);
+                    }
+                }
+                else {
+                    messageSpan.setAttribute('websocket.message', '[Binary Data]');
+                    messageSpan.setAttribute('websocket.message.type', 'binary');
+                    if (config.enableConsoleLog) {
+                        console.log(`[SignOz] WebSocket Send to ${wsUrl} from page ${pagePath}: [Binary Data]`);
+                    }
+                }
+                const duration = performance.now() - sendStartTime;
+                messageSpan.setAttribute('duration_ms', Math.round(duration));
+                messageSpan.setStatus({ code: SpanStatusCode.OK });
+                messageSpan.end();
+            }
+            return originalSend.call(ws, data);
+        };
+        // Track messages received
+        const originalOnMessage = ws.onmessage;
+        ws.addEventListener('message', function (event) {
+            if (config.logWebSocketMessages) {
+                const messageSpan = tracer.startSpan('WebSocket Receive');
+                messageSpan.setAttribute('websocket.url', wsUrl);
+                messageSpan.setAttribute('websocket.direction', 'receive');
+                messageSpan.setAttribute('page.url', pageUrl);
+                messageSpan.setAttribute('page.pathname', pagePath);
+                // Log message data
+                if (typeof event.data === 'string') {
+                    const truncatedData = truncateBody(event.data, config.maxBodyLogSize);
+                    messageSpan.setAttribute('websocket.message', truncatedData);
+                    // Try to parse JSON and extract message if exists
+                    try {
+                        const jsonData = JSON.parse(event.data);
+                        if (jsonData.message) {
+                            messageSpan.setAttribute('websocket.message.text', jsonData.message);
+                        }
+                        if (jsonData.type || jsonData.event) {
+                            messageSpan.setAttribute('websocket.message.type', jsonData.type || jsonData.event);
+                        }
+                    }
+                    catch (e) {
+                        // Not JSON, ignore
+                    }
+                    if (config.enableConsoleLog) {
+                        console.log(`[SignOz] WebSocket Receive from ${wsUrl} on page ${pagePath}:`, truncatedData);
+                    }
+                }
+                else {
+                    messageSpan.setAttribute('websocket.message', '[Binary Data]');
+                    messageSpan.setAttribute('websocket.message.type', 'binary');
+                    if (config.enableConsoleLog) {
+                        console.log(`[SignOz] WebSocket Receive from ${wsUrl} on page ${pagePath}: [Binary Data]`);
+                    }
+                }
+                messageSpan.setStatus({ code: SpanStatusCode.OK });
+                messageSpan.end();
+            }
+            if (originalOnMessage) {
+                originalOnMessage.call(ws, event);
+            }
+        });
+        // Track connection errors
+        const originalOnError = ws.onerror;
+        ws.addEventListener('error', function (event) {
+            const errorSpan = tracer.startSpan('WebSocket Error');
+            errorSpan.setAttribute('websocket.url', wsUrl);
+            errorSpan.setAttribute('websocket.state', 'error');
+            errorSpan.setAttribute('page.url', pageUrl);
+            errorSpan.setAttribute('page.pathname', pagePath);
+            errorSpan.recordException(new Error('WebSocket connection error'));
+            errorSpan.setStatus({ code: SpanStatusCode.ERROR, message: 'WebSocket connection error' });
+            if (config.enableConsoleLog) {
+                console.error(`[SignOz] WebSocket Error for ${wsUrl} on page ${pagePath}`);
+            }
+            errorSpan.end();
+            if (originalOnError) {
+                originalOnError.call(ws, event);
+            }
+        });
+        // Track connection close
+        const originalOnClose = ws.onclose;
+        ws.addEventListener('close', function (event) {
+            const closeSpan = tracer.startSpan('WebSocket Close');
+            closeSpan.setAttribute('websocket.url', wsUrl);
+            closeSpan.setAttribute('websocket.state', 'closed');
+            closeSpan.setAttribute('websocket.close.code', event.code);
+            closeSpan.setAttribute('websocket.close.reason', event.reason || 'No reason provided');
+            closeSpan.setAttribute('websocket.close.wasClean', event.wasClean);
+            closeSpan.setAttribute('page.url', pageUrl);
+            closeSpan.setAttribute('page.pathname', pagePath);
+            if (config.enableConsoleLog) {
+                console.log(`[SignOz] WebSocket Closed ${wsUrl} on page ${pagePath} - Code: ${event.code}, Reason: ${event.reason || 'No reason'}, Clean: ${event.wasClean}`);
+            }
+            closeSpan.setStatus({ code: SpanStatusCode.OK });
+            closeSpan.end();
+            if (originalOnClose) {
+                originalOnClose.call(ws, event);
+            }
+        });
+        return ws;
+    };
+}
 /**
  * Inisialisasi SignOz tracing untuk aplikasi React
  * @param config - Konfigurasi SignOz (opsional, akan menggunakan environment variables jika tidak disediakan)
@@ -15636,7 +15819,9 @@ function initializeSignOzTracing(config) {
             enableDocumentLoad: (config === null || config === void 0 ? void 0 : config.enableDocumentLoad) !== undefined ? config.enableDocumentLoad : (getConfigValue('REACT_APP_SIGNOZ_ENABLE_DOCUMENT_LOAD') === 'true'),
             enableErrorTracking: (config === null || config === void 0 ? void 0 : config.enableErrorTracking) !== undefined ? config.enableErrorTracking : (getConfigValue('REACT_APP_SIGNOZ_ENABLE_ERROR_TRACKING') !== 'false'),
             enableNavigationTracking: (config === null || config === void 0 ? void 0 : config.enableNavigationTracking) !== undefined ? config.enableNavigationTracking : (getConfigValue('REACT_APP_SIGNOZ_ENABLE_NAVIGATION_TRACKING') === 'true'),
-            enableConsoleLog: (config === null || config === void 0 ? void 0 : config.enableConsoleLog) !== undefined ? config.enableConsoleLog : (getConfigValue('REACT_APP_SIGNOZ_ENABLE_CONSOLE_LOG') === 'true')
+            enableConsoleLog: (config === null || config === void 0 ? void 0 : config.enableConsoleLog) !== undefined ? config.enableConsoleLog : (getConfigValue('REACT_APP_SIGNOZ_ENABLE_CONSOLE_LOG') === 'true'),
+            enableWebSocketLogging: (config === null || config === void 0 ? void 0 : config.enableWebSocketLogging) !== undefined ? config.enableWebSocketLogging : (getConfigValue('REACT_APP_SIGNOZ_ENABLE_WEBSOCKET_LOGGING') === 'true'),
+            logWebSocketMessages: (config === null || config === void 0 ? void 0 : config.logWebSocketMessages) !== undefined ? config.logWebSocketMessages : (getConfigValue('REACT_APP_SIGNOZ_LOG_WEBSOCKET_MESSAGES') === 'true')
         };
         // Validasi konfigurasi
         const { isValid, missingFields } = validateConfig(effectiveConfig);
@@ -15724,6 +15909,15 @@ function initializeSignOzTracing(config) {
         if (effectiveConfig.enableNavigationTracking) {
             addNavigationTracking(effectiveConfig.enableConsoleLog);
         }
+        // Tambahkan WebSocket logging
+        if (effectiveConfig.enableWebSocketLogging) {
+            addWebSocketLogging({
+                enableWebSocketLogging: effectiveConfig.enableWebSocketLogging,
+                logWebSocketMessages: effectiveConfig.logWebSocketMessages,
+                maxBodyLogSize: effectiveConfig.maxBodyLogSize,
+                enableConsoleLog: effectiveConfig.enableConsoleLog
+            });
+        }
         console.log('SignOz: Konfigurasi tracing:', {
             serviceName: effectiveConfig.serviceName,
             environment: effectiveConfig.environment,
@@ -15735,7 +15929,9 @@ function initializeSignOzTracing(config) {
             maxBodyLogSize: effectiveConfig.maxBodyLogSize,
             enableDocumentLoad: effectiveConfig.enableDocumentLoad,
             enableErrorTracking: effectiveConfig.enableErrorTracking,
-            enableNavigationTracking: effectiveConfig.enableNavigationTracking
+            enableNavigationTracking: effectiveConfig.enableNavigationTracking,
+            enableWebSocketLogging: effectiveConfig.enableWebSocketLogging,
+            logWebSocketMessages: effectiveConfig.logWebSocketMessages
         });
         console.log('SignOz: Tracing berhasil diinisialisasi');
     }