@echoteam/signoz-react 1.2.2 → 1.2.3

package/README.md

@@ -24,6 +24,12 @@ Library React untuk monitoring dan tracing aplikasi menggunakan OpenTelemetry da
   - First Paint, First Contentful Paint
   - DOM Content Loaded, Load Complete
   - Resource timing
+- **WebSocket Logging**: Otomatis track WebSocket connections dan messages
+  - Track connection open, close, error
+  - Log messages sent dan received
+  - Extract message type dan text dari JSON
+  - Connection duration tracking
+  - Data tersimpan di SignOz span attributes
 - **No Click Tracking**: User interaction (click events) tidak di-track untuk privacy dan performa
 - **Error Boundary**: Komponen React untuk menangkap dan melaporkan error dengan tracing
 - **Error Page**: Halaman error untuk React Router dengan integrasi tracing
@@ -71,6 +77,10 @@ REACT_APP_SIGNOZ_ENABLE_DOCUMENT_LOAD=false  # default: false
 REACT_APP_SIGNOZ_ENABLE_ERROR_TRACKING=true  # default: true
 REACT_APP_SIGNOZ_ENABLE_NAVIGATION_TRACKING=false  # default: false
 
+# WebSocket Logging (opsional, default: false)
+REACT_APP_SIGNOZ_ENABLE_WEBSOCKET_LOGGING=false
+REACT_APP_SIGNOZ_LOG_WEBSOCKET_MESSAGES=false
+
 # Console Logging (opsional, default: false)
 REACT_APP_SIGNOZ_ENABLE_CONSOLE_LOG=false
 ```
@@ -137,6 +147,9 @@ initializeSignOzTracing({
   enableDocumentLoad: false, // Track page load performance (default: false)
   enableErrorTracking: true, // Track unhandled errors (default: true)
   enableNavigationTracking: false, // Track route changes (default: false)
+  // WebSocket logging (default: false)
+  enableWebSocketLogging: false, // Track WebSocket connections and messages
+  logWebSocketMessages: false, // Log WebSocket message content
   // Console logging (default: false, hanya kirim ke SignOz tanpa console.log)
   enableConsoleLog: false // Set true untuk enable console.log di browser
 });
@@ -177,9 +190,11 @@ Library ini secara otomatis melog semua HTTP request dan response yang dilakukan
 4. Lihat span attributes:
    - `http.request.body`: Body dari request (untuk POST/PUT/PATCH)
    - `response.data`: Body dari response
+   - `response.message`: Message dari response JSON (jika ada field `message`)
    - `http.url`: URL endpoint
    - `http.method`: HTTP method
    - `http.status_code`: Status code response
+   - `duration_ms`: Durasi request dalam milliseconds
    - `page.url`: URL halaman frontend yang melakukan request
    - `page.pathname`: Pathname halaman frontend
    - `page.search`: Query parameters halaman frontend
@@ -303,6 +318,64 @@ initializeSignOzTracing({
 });
 ```
 
+### WebSocket Logging
+
+Library ini otomatis track semua WebSocket connections dan messages.
+
+**Contoh Output di Console:**
+```
+[SignOz] WebSocket Connected to wss://api.example.com/ws from page /dashboard [45ms]
+[SignOz] WebSocket Send to wss://api.example.com/ws from page /dashboard: {"type":"subscribe","channel":"updates"}
+[SignOz] WebSocket Receive from wss://api.example.com/ws on page /dashboard: {"type":"message","data":"Hello"}
+[SignOz] WebSocket Closed wss://api.example.com/ws on page /dashboard - Code: 1000, Reason: Normal closure, Clean: true
+```
+
+**Data yang Di-track:**
+- WebSocket connection (open, close, error)
+- Connection duration
+- Messages sent (dengan content)
+- Messages received (dengan content)
+- Close code dan reason
+- URL halaman frontend yang membuat connection
+- Message type (jika ada field `type` atau `event` di JSON)
+- Message text (jika ada field `message` di JSON)
+
+**Melihat di SignOz:**
+1. Navigasi ke **Traces**
+2. Filter by span name: "WebSocket Connection", "WebSocket Send", "WebSocket Receive", "WebSocket Close", atau "WebSocket Error"
+3. Lihat span attributes:
+   - `websocket.url`: URL WebSocket
+   - `websocket.protocols`: Protocols yang digunakan
+   - `websocket.state`: State connection (open, closed, error)
+   - `websocket.direction`: Arah message (send/receive)
+   - `websocket.message`: Content message
+   - `websocket.message.type`: Tipe message (jika ada)
+   - `websocket.message.text`: Text message (jika ada field `message`)
+   - `websocket.close.code`: Close code
+   - `websocket.close.reason`: Alasan close
+   - `websocket.close.wasClean`: Apakah close dengan clean
+   - `duration_ms`: Durasi connection
+   - `page.url`: URL halaman frontend
+   - `page.pathname`: Pathname halaman frontend
+
+**Mengaktifkan WebSocket Logging:**
+```typescript
+// WebSocket logging disabled by default
+// Untuk mengaktifkan:
+initializeSignOzTracing({
+  // ... konfigurasi lainnya
+  enableWebSocketLogging: true,
+  logWebSocketMessages: true // Enable message logging
+});
+
+// Atau hanya track connection tanpa log messages
+initializeSignOzTracing({
+  // ... konfigurasi lainnya
+  enableWebSocketLogging: true,
+  logWebSocketMessages: false // Hanya track connection, tidak log messages
+});
+```
+
 ### Error Boundary
 
 #### Penggunaan Dasar
@@ -461,6 +534,8 @@ Inisialisasi SignOz tracing untuk aplikasi React.
   - `enableErrorTracking` (opsional): Aktifkan automatic error tracking (default: true)
   - `enableNavigationTracking` (opsional): Aktifkan navigation/route tracking (default: false)
   - `enableConsoleLog` (opsional): Aktifkan console.log output di browser (default: false)
+  - `enableWebSocketLogging` (opsional): Aktifkan WebSocket connection dan message tracking (default: false)
+  - `logWebSocketMessages` (opsional): Log WebSocket message content (default: false)
 
 ### `ErrorBoundary`
 

package/dist/index.d.ts

@@ -21,6 +21,8 @@ interface SignOzConfig {
     enableErrorTracking?: boolean;
     enableNavigationTracking?: boolean;
     enableConsoleLog?: boolean;
+    enableWebSocketLogging?: boolean;
+    logWebSocketMessages?: boolean;
 }
 declare global {
     interface Window {

package/dist/index.esm.js

@@ -15350,6 +15350,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);
                     }
@@ -15432,6 +15442,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);
                     }
@@ -15585,6 +15605,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)
@@ -15616,7 +15799,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);
@@ -15704,6 +15889,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,
@@ -15715,7 +15909,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');
     }