@echoteam/signoz-react 1.2.6 → 1.2.8

package/README.md

@@ -194,6 +194,7 @@ Library ini secara otomatis melog semua HTTP request dan response yang dilakukan
    - `http.url`: URL endpoint
    - `http.method`: HTTP method
    - `http.status_code`: Status code response
+   - `http.response_content_length`: Ukuran response dalam bytes
    - `duration_ms`: Durasi request dalam milliseconds
    - `page.url`: URL halaman frontend yang melakukan request
    - `page.pathname`: Pathname halaman frontend

package/dist/index.esm.js

@@ -15344,24 +15344,49 @@ function addFetchLogging(config) {
             span.setAttribute('duration_ms', Math.round(duration));
             // Log response data
             span.setAttribute('http.status_code', response.status);
-            if (config.logResponseBody && response.ok) {
+            // Log response content length from headers
+            const contentLength = response.headers.get('content-length');
+            if (contentLength) {
+                span.setAttribute('http.response_content_length', parseInt(contentLength));
+            }
+            // Log response body for both success and error responses
+            if (config.logResponseBody) {
                 const clonedResponse = response.clone();
                 try {
                     const responseData = await clonedResponse.text();
                     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) {
-                        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) {
@@ -15371,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;
@@ -15437,27 +15462,71 @@ function addXHRLogging(config) {
                 const duration = performance.now() - startTime;
                 span.setAttribute('duration_ms', Math.round(duration));
                 span.setAttribute('http.status_code', xhr.status);
-                // 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);
-                    // Try to parse JSON and extract message if exists
+                // Log response content length from headers
+                const contentLength = xhr.getResponseHeader('content-length');
+                if (contentLength) {
+                    span.setAttribute('http.response_content_length', parseInt(contentLength));
+                }
+                // 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();
@@ -15490,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) {
@@ -15501,28 +15576,93 @@ 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) => {
         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) {
@@ -16085,17 +16225,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 = "", }) => {
@@ -16104,10 +16233,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();