@echoteam/signoz-react 1.2.7 → 1.2.10

package/TROUBLESHOOTING.md

@@ -1,5 +1,81 @@
 # Troubleshooting Guide
 
+## Error: Timeout from BatchSpanProcessor
+
+### Masalah
+Jika Anda mendapatkan error seperti ini di console:
+```
+Unhandled Promise rejection: Timeout ; Zone: <root> ; Task: Promise.then ; Value: Error: Timeout
+at BatchSpanProcessorBase.js:132:1
+```
+
+### Penyebab
+Error ini terjadi ketika BatchSpanProcessor mencoba mengirim spans ke backend SignOz tetapi mengalami timeout. Ini biasanya terjadi karena:
+1. Backend SignOz tidak dapat dijangkau
+2. Network lambat atau tidak stabil
+3. CORS tidak dikonfigurasi dengan benar di backend
+4. Timeout terlalu pendek untuk koneksi Anda
+
+### Solusi
+
+#### 1. Verifikasi Backend SignOz Dapat Dijangkau
+Pastikan URL SignOz Anda benar dan dapat diakses dari browser:
+```javascript
+// Test di browser console
+fetch('http://your-signoz-url:4318/v1/traces', {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json' }
+})
+```
+
+#### 2. Periksa CORS Configuration
+Pastikan backend SignOz Anda mengizinkan request dari domain frontend Anda. Lihat [BACKEND_CORS_SETUP.md](./BACKEND_CORS_SETUP.md) untuk panduan lengkap.
+
+#### 3. Tingkatkan Timeout (Recommended)
+Sejak versi 1.2.10, timeout default sudah ditingkatkan menjadi 60 detik. Jika masih timeout, Anda bisa meningkatkannya lebih lanjut:
+
+```javascript
+import { initializeSignOzTracing } from '@echoteam/signoz-react';
+
+initializeSignOzTracing({
+  serviceName: 'my-app',
+  serviceVersion: '1.0.0',
+  environment: 'production',
+  serviceNamespace: 'frontend',
+  url: 'http://your-signoz-url:4318/v1/traces',
+  batchSpanProcessorConfig: {
+    maxQueueSize: 100,
+    scheduledDelayMillis: 5000,
+    exportTimeoutMillis: 120000, // 120 seconds
+    maxExportBatchSize: 50
+  }
+});
+```
+
+#### 4. Suppress Timeout Errors (Jika Tidak Mengganggu)
+Sejak versi 1.2.10, timeout errors dari BatchSpanProcessor secara otomatis di-suppress untuk menghindari noise di console. Error ini biasanya aman untuk diabaikan karena spans akan di-retry atau di-queue ulang.
+
+Jika Anda ingin melihat warning untuk timeout ini, aktifkan console logging:
+```javascript
+initializeSignOzTracing({
+  // ... config lainnya
+  enableConsoleLog: true
+});
+```
+
+#### 5. Gunakan Network yang Lebih Stabil
+Jika Anda mengalami timeout secara konsisten, pertimbangkan:
+- Menggunakan koneksi internet yang lebih stabil
+- Mengurangi ukuran batch dengan `maxExportBatchSize`
+- Meningkatkan `scheduledDelayMillis` untuk mengirim spans lebih jarang
+
+### Catatan Penting
+- Timeout errors biasanya tidak mempengaruhi fungsionalitas aplikasi Anda
+- Spans yang gagal dikirim akan di-queue ulang dan dicoba lagi
+- Jika backend SignOz tidak dapat dijangkau sama sekali, spans akan di-drop setelah queue penuh
+
+---
+
 ## Error: Can't resolve 'perf_hooks'
 
 ### Masalah

package/dist/index.d.ts

@@ -11,6 +11,7 @@ interface SignOzConfig {
         maxQueueSize?: number;
         scheduledDelayMillis?: number;
         exportTimeoutMillis?: number;
+        maxExportBatchSize?: number;
     };
     allowedOrigins?: (string | RegExp)[];
     enableRequestLogging?: boolean;

package/dist/index.esm.js

@@ -15349,7 +15349,8 @@ function addFetchLogging(config) {
             if (contentLength) {
                 span.setAttribute('http.response_content_length', parseInt(contentLength));
             }
-            if (config.logResponseBody && response.ok) {
+            // Log response body for both success and error responses
+            if (config.logResponseBody) {
                 const clonedResponse = response.clone();
                 try {
                     const responseData = await clonedResponse.text();
@@ -15365,12 +15366,27 @@ function addFetchLogging(config) {
                         if (jsonData.message) {
                             span.setAttribute('response.message', jsonData.message);
                         }
+                        // Also log error details if present
+                        if (jsonData.errors) {
+                            span.setAttribute('response.errors', JSON.stringify(jsonData.errors));
+                        }
+                        if (jsonData.status !== undefined) {
+                            span.setAttribute('response.status', jsonData.status);
+                        }
+                        if (jsonData.status_code !== undefined) {
+                            span.setAttribute('response.status_code', jsonData.status_code);
+                        }
                     }
                     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);
+                        if (response.ok) {
+                            console.log(`[SignOz] ${method} Response from ${url} (${response.status}) on page ${pagePath} [${Math.round(duration)}ms]:`, truncatedData);
+                        }
+                        else {
+                            console.error(`[SignOz] ${method} Error Response from ${url} (${response.status}) on page ${pagePath} [${Math.round(duration)}ms]:`, truncatedData);
+                        }
                     }
                 }
                 catch (e) {
@@ -15380,7 +15396,7 @@ function addFetchLogging(config) {
                 }
             }
             else if (!response.ok && config.enableConsoleLog) {
-                console.log(`[SignOz] ${method} Request to ${url} from page ${pagePath} - Status: ${response.status} [${Math.round(duration)}ms]`);
+                console.error(`[SignOz] ${method} Request to ${url} from page ${pagePath} - Status: ${response.status} [${Math.round(duration)}ms]`);
             }
             span.setStatus({ code: SpanStatusCode.OK });
             return response;
@@ -15451,31 +15467,66 @@ function addXHRLogging(config) {
                 if (contentLength) {
                     span.setAttribute('http.response_content_length', parseInt(contentLength));
                 }
-                // Log response body
-                if (config.logResponseBody && xhr.status >= 200 && xhr.status < 300) {
-                    const responseData = xhr.responseText;
-                    const truncatedData = truncateBody(responseData, config.maxBodyLogSize);
-                    span.setAttribute('response.data', truncatedData);
-                    // If content-length header is not available, calculate from response data
-                    if (!contentLength) {
-                        span.setAttribute('http.response_content_length', responseData.length);
-                    }
-                    // Try to parse JSON and extract message if exists
+                // Log response body for both success and error responses
+                if (config.logResponseBody) {
                     try {
-                        const jsonData = JSON.parse(responseData);
-                        if (jsonData.message) {
-                            span.setAttribute('response.message', jsonData.message);
+                        // Only read responseText if responseType allows it
+                        if (xhr.responseType === '' || xhr.responseType === 'text') {
+                            const responseData = xhr.responseText;
+                            const truncatedData = truncateBody(responseData, config.maxBodyLogSize);
+                            span.setAttribute('response.data', truncatedData);
+                            // If content-length header is not available, calculate from response data
+                            if (!contentLength) {
+                                span.setAttribute('http.response_content_length', responseData.length);
+                            }
+                            // Try to parse JSON and extract message if exists
+                            try {
+                                const jsonData = JSON.parse(responseData);
+                                if (jsonData.message) {
+                                    span.setAttribute('response.message', jsonData.message);
+                                }
+                                // Also log error details if present
+                                if (jsonData.errors) {
+                                    span.setAttribute('response.errors', JSON.stringify(jsonData.errors));
+                                }
+                                if (jsonData.status !== undefined) {
+                                    span.setAttribute('response.status', jsonData.status);
+                                }
+                                if (jsonData.status_code !== undefined) {
+                                    span.setAttribute('response.status_code', jsonData.status_code);
+                                }
+                            }
+                            catch (e) {
+                                // Not JSON or no message field, ignore
+                            }
+                            if (config.enableConsoleLog) {
+                                if (xhr.status >= 200 && xhr.status < 300) {
+                                    console.log(`[SignOz] ${method} Response from ${url} (${xhr.status}) on page ${pagePath} [${Math.round(duration)}ms]:`, truncatedData);
+                                }
+                                else {
+                                    console.error(`[SignOz] ${method} Error Response from ${url} (${xhr.status}) on page ${pagePath} [${Math.round(duration)}ms]:`, truncatedData);
+                                }
+                            }
+                        }
+                        else {
+                            // For other response types (blob, arraybuffer, etc), just log the type
+                            span.setAttribute('response.data', `[${xhr.responseType} data]`);
+                            span.setAttribute('response.type', xhr.responseType);
+                            if (config.enableConsoleLog) {
+                                console.log(`[SignOz] ${method} Response from ${url} (${xhr.status}) on page ${pagePath} [${Math.round(duration)}ms]: [${xhr.responseType} data]`);
+                            }
                         }
                     }
                     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);
+                        // If there's an error reading response, log it
+                        span.setAttribute('response.data', '[Error reading response]');
+                        if (config.enableConsoleLog) {
+                            console.warn(`[SignOz] Failed to read response from ${url}:`, e);
+                        }
                     }
                 }
                 else if (xhr.status >= 300 && config.enableConsoleLog) {
-                    console.log(`[SignOz] ${method} Request to ${url} from page ${pagePath} - Status: ${xhr.status} [${Math.round(duration)}ms]`);
+                    console.error(`[SignOz] ${method} Request to ${url} from page ${pagePath} - Status: ${xhr.status} [${Math.round(duration)}ms]`);
                 }
                 span.setStatus({ code: SpanStatusCode.OK });
                 span.end();
@@ -15508,9 +15559,15 @@ function addErrorTracking(enableConsoleLog = false) {
         span.setAttribute('error.filename', event.filename || 'unknown');
         span.setAttribute('error.lineno', event.lineno || 0);
         span.setAttribute('error.colno', event.colno || 0);
+        // Add page context
+        span.setAttribute('page.url', window.location.href);
+        span.setAttribute('page.pathname', window.location.pathname);
+        span.setAttribute('page.search', window.location.search);
+        span.setAttribute('page.hash', window.location.hash);
         if (event.error) {
             span.recordException(event.error);
             span.setAttribute('error.stack', event.error.stack || '');
+            span.setAttribute('error.name', event.error.name || 'Error');
         }
         span.setStatus({ code: SpanStatusCode.ERROR, message: event.message });
         if (enableConsoleLog) {
@@ -15519,28 +15576,102 @@ function addErrorTracking(enableConsoleLog = false) {
                 filename: event.filename,
                 lineno: event.lineno,
                 colno: event.colno,
-                stack: (_a = event.error) === null || _a === void 0 ? void 0 : _a.stack
+                stack: (_a = event.error) === null || _a === void 0 ? void 0 : _a.stack,
+                page: window.location.pathname
             });
         }
         span.end();
-    });
+    }, true); // Use capture phase to catch errors early
     // Track unhandled promise rejections
     window.addEventListener('unhandledrejection', (event) => {
+        // Suppress BatchSpanProcessor timeout errors to avoid noise
+        const reason = String(event.reason);
+        if (reason.includes('Timeout') && reason.includes('BatchSpanProcessor')) {
+            if (enableConsoleLog) {
+                console.warn('[SignOz] Span export timeout (this is usually safe to ignore):', event.reason);
+            }
+            event.preventDefault(); // Prevent the error from being logged
+            return;
+        }
         const tracer = trace.getTracer('error-tracker');
         const span = tracer.startSpan('Unhandled Promise Rejection');
         span.setAttribute('error.type', 'unhandled_rejection');
         span.setAttribute('error.reason', String(event.reason));
+        // Add page context
+        span.setAttribute('page.url', window.location.href);
+        span.setAttribute('page.pathname', window.location.pathname);
+        span.setAttribute('page.search', window.location.search);
+        span.setAttribute('page.hash', window.location.hash);
         if (event.reason instanceof Error) {
             span.recordException(event.reason);
             span.setAttribute('error.message', event.reason.message);
             span.setAttribute('error.stack', event.reason.stack || '');
+            span.setAttribute('error.name', event.reason.name || 'Error');
         }
         span.setStatus({ code: SpanStatusCode.ERROR, message: String(event.reason) });
         if (enableConsoleLog) {
-            console.error('[SignOz] Unhandled Promise Rejection:', event.reason);
+            console.error('[SignOz] Unhandled Promise Rejection:', event.reason, 'on page', window.location.pathname);
         }
         span.end();
     });
+    // Track Zone.js errors (for Angular/React with zone.js)
+    if (typeof Zone !== 'undefined' && Zone.current) {
+        const currentZone = Zone.current;
+        const originalHandleError = currentZone.handleError;
+        if (originalHandleError) {
+            currentZone.handleError = function (error) {
+                const tracer = trace.getTracer('error-tracker');
+                const span = tracer.startSpan('Zone.js Error');
+                span.setAttribute('error.type', 'zone_error');
+                span.setAttribute('error.message', error.message || String(error));
+                span.setAttribute('error.name', error.name || 'Error');
+                // Add page context
+                span.setAttribute('page.url', window.location.href);
+                span.setAttribute('page.pathname', window.location.pathname);
+                span.setAttribute('page.search', window.location.search);
+                span.setAttribute('page.hash', window.location.hash);
+                if (error.stack) {
+                    span.setAttribute('error.stack', error.stack);
+                }
+                span.recordException(error);
+                span.setStatus({ code: SpanStatusCode.ERROR, message: error.message || String(error) });
+                if (enableConsoleLog) {
+                    console.error('[SignOz] Zone.js Error:', error, 'on page', window.location.pathname);
+                }
+                span.end();
+                // Call original handler
+                return originalHandleError.call(currentZone, error);
+            };
+        }
+    }
+    // Override console.error to catch React errors
+    const originalConsoleError = console.error;
+    console.error = function (...args) {
+        // Check if this is a React error
+        const errorMessage = args.map(arg => String(arg)).join(' ');
+        if (errorMessage.includes('React') || errorMessage.includes('TypeError') || errorMessage.includes('Uncaught')) {
+            const tracer = trace.getTracer('error-tracker');
+            const span = tracer.startSpan('Console Error');
+            span.setAttribute('error.type', 'console_error');
+            span.setAttribute('error.message', errorMessage);
+            // Add page context
+            span.setAttribute('page.url', window.location.href);
+            span.setAttribute('page.pathname', window.location.pathname);
+            span.setAttribute('page.search', window.location.search);
+            span.setAttribute('page.hash', window.location.hash);
+            // Try to extract stack trace
+            const errorObj = args.find(arg => arg instanceof Error);
+            if (errorObj) {
+                span.recordException(errorObj);
+                span.setAttribute('error.stack', errorObj.stack || '');
+                span.setAttribute('error.name', errorObj.name || 'Error');
+            }
+            span.setStatus({ code: SpanStatusCode.ERROR, message: errorMessage });
+            span.end();
+        }
+        // Call original console.error
+        return originalConsoleError.apply(console, args);
+    };
 }
 // Fungsi untuk menambahkan navigation tracking
 function addNavigationTracking(enableConsoleLog = false) {
@@ -15862,7 +15993,8 @@ function initializeSignOzTracing(config) {
             batchSpanProcessorConfig: (config === null || config === void 0 ? void 0 : config.batchSpanProcessorConfig) || {
                 maxQueueSize: 100,
                 scheduledDelayMillis: 5000,
-                exportTimeoutMillis: 30000
+                exportTimeoutMillis: 60000, // Increased to 60 seconds
+                maxExportBatchSize: 50 // Smaller batches to avoid timeouts
             },
             allowedOrigins: (config === null || config === void 0 ? void 0 : config.allowedOrigins) || parseAllowedOrigins(getConfigValue('REACT_APP_SIGNOZ_ALLOWED_ORIGINS')),
             enableRequestLogging: (config === null || config === void 0 ? void 0 : config.enableRequestLogging) !== undefined ? config.enableRequestLogging : (getConfigValue('REACT_APP_SIGNOZ_ENABLE_REQUEST_LOGGING') === 'true' || true),
@@ -15893,7 +16025,8 @@ function initializeSignOzTracing(config) {
         // Set up the OTLP trace exporter
         const exporter = new OTLPTraceExporter({
             url: effectiveConfig.url,
-            headers: effectiveConfig.headers
+            headers: effectiveConfig.headers,
+            timeoutMillis: 60000 // Set exporter timeout to 60 seconds
         });
         // Set up the span processor with configuration
         const processor = new BatchSpanProcessor(exporter, {
@@ -16103,17 +16236,6 @@ function hasArrayChanged() {
 }
 
 const DefaultErrorFallback = ({ error, resetErrorBoundary }) => {
-    const serviceName = window.REACT_APP_SIGNOZ_SERVICE_NAME || 'react-app';
-    const tracer = trace.getTracer(serviceName);
-    const span = tracer.startSpan(serviceName + ".error");
-    React2__default.useEffect(() => {
-        span.setAttribute('error.message', error.message);
-        span.setAttribute('error.stack', JSON.stringify(error.stack));
-        span.setAttribute('error.name', error.name);
-        span.recordException(error);
-        span.setStatus({ code: SpanStatusCode.ERROR, message: error.message });
-        span.end();
-    }, [error, span]);
     return (jsxs("div", { role: "alert", className: "error-boundary-fallback", children: [jsx("h1", { children: "Oops!" }), jsx("p", { children: "Terjadi kesalahan yang tidak terduga." }), jsx("p", { children: jsx("i", { children: error.statusText || error.message }) }), jsx("button", { onClick: resetErrorBoundary, children: "Coba lagi" })] }));
 };
 const ErrorBoundary = ({ children, fallback: FallbackComponent, onError, onReset, showResetButton = true, resetButtonText = "Coba lagi", fallbackClassName = "", }) => {
@@ -16122,10 +16244,16 @@ const ErrorBoundary = ({ children, fallback: FallbackComponent, onError, onReset
         const serviceName = window.REACT_APP_SIGNOZ_SERVICE_NAME || 'react-app';
         const tracer = trace.getTracer(serviceName);
         const span = tracer.startSpan(serviceName + ".error");
+        span.setAttribute('error.type', 'react_error_boundary');
         span.setAttribute('error.message', error.message);
-        span.setAttribute('error.stack', JSON.stringify(error.stack));
+        span.setAttribute('error.stack', error.stack || '');
         span.setAttribute('error.name', error.name);
         span.setAttribute('error.componentStack', errorInfo.componentStack || '');
+        // Add page context
+        span.setAttribute('page.url', window.location.href);
+        span.setAttribute('page.pathname', window.location.pathname);
+        span.setAttribute('page.search', window.location.search);
+        span.setAttribute('page.hash', window.location.hash);
         span.recordException(error);
         span.setStatus({ code: SpanStatusCode.ERROR, message: error.message });
         span.end();