@echoteam/signoz-react 1.2.0 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +15 -9
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.esm.js +98 -50
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/index.js +98 -50
  6. package/dist/index.js.map +1 -1
  7. package/dist/types/tracing.d.ts +1 -0
  8. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -15338,6 +15338,8 @@ function addFetchLogging(config) {
15338
15338
  // Capture current page info
15339
15339
  const pageUrl = window.location.href;
15340
15340
  const pagePath = window.location.pathname;
15341
+ // Track start time
15342
+ const startTime = performance.now();
15341
15343
  const tracer = trace.getTracer('fetch-logger');
15342
15344
  const span = tracer.startSpan(`HTTP ${method} ${url}`);
15343
15345
  try {
@@ -15352,9 +15354,14 @@ function addFetchLogging(config) {
15352
15354
  if (config.logRequestBody && (init === null || init === void 0 ? void 0 : init.body) && ['POST', 'PUT', 'PATCH'].includes(method.toUpperCase())) {
15353
15355
  const bodyStr = truncateBody(init.body, config.maxBodyLogSize);
15354
15356
  span.setAttribute('http.request.body', bodyStr);
15355
- console.log(`[SignOz] ${method} Request to ${url} from page ${pagePath}:`, bodyStr);
15357
+ if (config.enableConsoleLog) {
15358
+ console.log(`[SignOz] ${method} Request to ${url} from page ${pagePath}:`, bodyStr);
15359
+ }
15356
15360
  }
15357
15361
  const response = await originalFetch.apply(this, args);
15362
+ // Calculate duration
15363
+ const duration = performance.now() - startTime;
15364
+ span.setAttribute('duration_ms', Math.round(duration));
15358
15365
  // Log response data
15359
15366
  span.setAttribute('http.status_code', response.status);
15360
15367
  if (config.logResponseBody && response.ok) {
@@ -15362,23 +15369,32 @@ function addFetchLogging(config) {
15362
15369
  try {
15363
15370
  const responseData = await clonedResponse.text();
15364
15371
  const truncatedData = truncateBody(responseData, config.maxBodyLogSize);
15365
- span.setAttribute('http.response.body', truncatedData);
15366
- console.log(`[SignOz] ${method} Response from ${url} (${response.status}) on page ${pagePath}:`, truncatedData);
15372
+ span.setAttribute('response.data', truncatedData);
15373
+ if (config.enableConsoleLog) {
15374
+ console.log(`[SignOz] ${method} Response from ${url} (${response.status}) on page ${pagePath} [${Math.round(duration)}ms]:`, truncatedData);
15375
+ }
15367
15376
  }
15368
15377
  catch (e) {
15369
- console.warn('[SignOz] Failed to read response body:', e);
15378
+ if (config.enableConsoleLog) {
15379
+ console.warn('[SignOz] Failed to read response body:', e);
15380
+ }
15370
15381
  }
15371
15382
  }
15372
- else if (!response.ok) {
15373
- console.log(`[SignOz] ${method} Request to ${url} from page ${pagePath} - Status: ${response.status}`);
15383
+ else if (!response.ok && config.enableConsoleLog) {
15384
+ console.log(`[SignOz] ${method} Request to ${url} from page ${pagePath} - Status: ${response.status} [${Math.round(duration)}ms]`);
15374
15385
  }
15375
15386
  span.setStatus({ code: SpanStatusCode.OK });
15376
15387
  return response;
15377
15388
  }
15378
15389
  catch (error) {
15390
+ // Calculate duration even on error
15391
+ const duration = performance.now() - startTime;
15392
+ span.setAttribute('duration_ms', Math.round(duration));
15379
15393
  span.recordException(error);
15380
15394
  span.setStatus({ code: SpanStatusCode.ERROR, message: error.message });
15381
- console.error(`[SignOz] ${method} Error for ${url} on page ${pagePath}:`, error);
15395
+ if (config.enableConsoleLog) {
15396
+ console.error(`[SignOz] ${method} Error for ${url} on page ${pagePath} [${Math.round(duration)}ms]:`, error);
15397
+ }
15382
15398
  throw error;
15383
15399
  }
15384
15400
  finally {
@@ -15395,6 +15411,7 @@ function addXHRLogging(config) {
15395
15411
  const xhr = new OriginalXHR();
15396
15412
  let method = '';
15397
15413
  let url = '';
15414
+ let startTime = 0;
15398
15415
  // Capture current page info when XHR is created
15399
15416
  const pageUrl = window.location.href;
15400
15417
  const pagePath = window.location.pathname;
@@ -15406,6 +15423,8 @@ function addXHRLogging(config) {
15406
15423
  };
15407
15424
  const originalSend = xhr.send;
15408
15425
  xhr.send = function (body) {
15426
+ // Track start time
15427
+ startTime = performance.now();
15409
15428
  const tracer = trace.getTracer('xhr-logger');
15410
15429
  const span = tracer.startSpan(`HTTP ${method} ${url}`);
15411
15430
  span.setAttribute('http.url', url);
@@ -15419,27 +15438,39 @@ function addXHRLogging(config) {
15419
15438
  if (config.logRequestBody && body && ['POST', 'PUT', 'PATCH'].includes(method.toUpperCase())) {
15420
15439
  const bodyStr = truncateBody(body, config.maxBodyLogSize);
15421
15440
  span.setAttribute('http.request.body', bodyStr);
15422
- console.log(`[SignOz] ${method} Request to ${url} from page ${pagePath}:`, bodyStr);
15441
+ if (config.enableConsoleLog) {
15442
+ console.log(`[SignOz] ${method} Request to ${url} from page ${pagePath}:`, bodyStr);
15443
+ }
15423
15444
  }
15424
15445
  this.addEventListener('load', function () {
15446
+ // Calculate duration
15447
+ const duration = performance.now() - startTime;
15448
+ span.setAttribute('duration_ms', Math.round(duration));
15425
15449
  span.setAttribute('http.status_code', xhr.status);
15426
15450
  // Log response body
15427
15451
  if (config.logResponseBody && xhr.status >= 200 && xhr.status < 300) {
15428
15452
  const responseData = xhr.responseText;
15429
15453
  const truncatedData = truncateBody(responseData, config.maxBodyLogSize);
15430
- span.setAttribute('http.response.body', truncatedData);
15431
- console.log(`[SignOz] ${method} Response from ${url} (${xhr.status}) on page ${pagePath}:`, truncatedData);
15454
+ span.setAttribute('response.data', truncatedData);
15455
+ if (config.enableConsoleLog) {
15456
+ console.log(`[SignOz] ${method} Response from ${url} (${xhr.status}) on page ${pagePath} [${Math.round(duration)}ms]:`, truncatedData);
15457
+ }
15432
15458
  }
15433
- else if (xhr.status >= 300) {
15434
- console.log(`[SignOz] ${method} Request to ${url} from page ${pagePath} - Status: ${xhr.status}`);
15459
+ else if (xhr.status >= 300 && config.enableConsoleLog) {
15460
+ console.log(`[SignOz] ${method} Request to ${url} from page ${pagePath} - Status: ${xhr.status} [${Math.round(duration)}ms]`);
15435
15461
  }
15436
15462
  span.setStatus({ code: SpanStatusCode.OK });
15437
15463
  span.end();
15438
15464
  });
15439
15465
  this.addEventListener('error', function () {
15466
+ // Calculate duration even on error
15467
+ const duration = performance.now() - startTime;
15468
+ span.setAttribute('duration_ms', Math.round(duration));
15440
15469
  span.recordException(new Error('XHR request failed'));
15441
15470
  span.setStatus({ code: SpanStatusCode.ERROR, message: 'XHR request failed' });
15442
- console.error(`[SignOz] ${method} Error for ${url} on page ${pagePath}`);
15471
+ if (config.enableConsoleLog) {
15472
+ console.error(`[SignOz] ${method} Error for ${url} on page ${pagePath} [${Math.round(duration)}ms]`);
15473
+ }
15443
15474
  span.end();
15444
15475
  });
15445
15476
  return originalSend.call(this, body);
@@ -15448,7 +15479,7 @@ function addXHRLogging(config) {
15448
15479
  };
15449
15480
  }
15450
15481
  // Fungsi untuk menambahkan error tracking
15451
- function addErrorTracking() {
15482
+ function addErrorTracking(enableConsoleLog = false) {
15452
15483
  // Track unhandled errors
15453
15484
  window.addEventListener('error', (event) => {
15454
15485
  var _a;
@@ -15464,13 +15495,15 @@ function addErrorTracking() {
15464
15495
  span.setAttribute('error.stack', event.error.stack || '');
15465
15496
  }
15466
15497
  span.setStatus({ code: SpanStatusCode.ERROR, message: event.message });
15467
- console.error('[SignOz] Unhandled Error:', {
15468
- message: event.message,
15469
- filename: event.filename,
15470
- lineno: event.lineno,
15471
- colno: event.colno,
15472
- stack: (_a = event.error) === null || _a === void 0 ? void 0 : _a.stack
15473
- });
15498
+ if (enableConsoleLog) {
15499
+ console.error('[SignOz] Unhandled Error:', {
15500
+ message: event.message,
15501
+ filename: event.filename,
15502
+ lineno: event.lineno,
15503
+ colno: event.colno,
15504
+ stack: (_a = event.error) === null || _a === void 0 ? void 0 : _a.stack
15505
+ });
15506
+ }
15474
15507
  span.end();
15475
15508
  });
15476
15509
  // Track unhandled promise rejections
@@ -15485,12 +15518,14 @@ function addErrorTracking() {
15485
15518
  span.setAttribute('error.stack', event.reason.stack || '');
15486
15519
  }
15487
15520
  span.setStatus({ code: SpanStatusCode.ERROR, message: String(event.reason) });
15488
- console.error('[SignOz] Unhandled Promise Rejection:', event.reason);
15521
+ if (enableConsoleLog) {
15522
+ console.error('[SignOz] Unhandled Promise Rejection:', event.reason);
15523
+ }
15489
15524
  span.end();
15490
15525
  });
15491
15526
  }
15492
15527
  // Fungsi untuk menambahkan navigation tracking
15493
- function addNavigationTracking() {
15528
+ function addNavigationTracking(enableConsoleLog = false) {
15494
15529
  let previousUrl = window.location.href;
15495
15530
  // Track initial page load
15496
15531
  const tracer = trace.getTracer('navigation-tracker');
@@ -15500,10 +15535,12 @@ function addNavigationTracking() {
15500
15535
  initialSpan.setAttribute('navigation.pathname', window.location.pathname);
15501
15536
  initialSpan.setAttribute('navigation.search', window.location.search);
15502
15537
  initialSpan.setAttribute('navigation.hash', window.location.hash);
15503
- console.log('[SignOz] Page Load:', {
15504
- url: window.location.href,
15505
- pathname: window.location.pathname
15506
- });
15538
+ if (enableConsoleLog) {
15539
+ console.log('[SignOz] Page Load:', {
15540
+ url: window.location.href,
15541
+ pathname: window.location.pathname
15542
+ });
15543
+ }
15507
15544
  initialSpan.end();
15508
15545
  // Track popstate (browser back/forward)
15509
15546
  window.addEventListener('popstate', () => {
@@ -15514,11 +15551,13 @@ function addNavigationTracking() {
15514
15551
  span.setAttribute('navigation.pathname', window.location.pathname);
15515
15552
  span.setAttribute('navigation.search', window.location.search);
15516
15553
  span.setAttribute('navigation.hash', window.location.hash);
15517
- console.log('[SignOz] Navigation (popstate):', {
15518
- from: previousUrl,
15519
- to: window.location.href,
15520
- pathname: window.location.pathname
15521
- });
15554
+ if (enableConsoleLog) {
15555
+ console.log('[SignOz] Navigation (popstate):', {
15556
+ from: previousUrl,
15557
+ to: window.location.href,
15558
+ pathname: window.location.pathname
15559
+ });
15560
+ }
15522
15561
  previousUrl = window.location.href;
15523
15562
  span.end();
15524
15563
  });
@@ -15533,11 +15572,13 @@ function addNavigationTracking() {
15533
15572
  span.setAttribute('navigation.pathname', window.location.pathname);
15534
15573
  span.setAttribute('navigation.search', window.location.search);
15535
15574
  span.setAttribute('navigation.hash', window.location.hash);
15536
- console.log('[SignOz] Navigation (pushState):', {
15537
- from: previousUrl,
15538
- to: window.location.href,
15539
- pathname: window.location.pathname
15540
- });
15575
+ if (enableConsoleLog) {
15576
+ console.log('[SignOz] Navigation (pushState):', {
15577
+ from: previousUrl,
15578
+ to: window.location.href,
15579
+ pathname: window.location.pathname
15580
+ });
15581
+ }
15541
15582
  previousUrl = window.location.href;
15542
15583
  span.end();
15543
15584
  return result;
@@ -15552,11 +15593,13 @@ function addNavigationTracking() {
15552
15593
  span.setAttribute('navigation.pathname', window.location.pathname);
15553
15594
  span.setAttribute('navigation.search', window.location.search);
15554
15595
  span.setAttribute('navigation.hash', window.location.hash);
15555
- console.log('[SignOz] Navigation (replaceState):', {
15556
- from: previousUrl,
15557
- to: window.location.href,
15558
- pathname: window.location.pathname
15559
- });
15596
+ if (enableConsoleLog) {
15597
+ console.log('[SignOz] Navigation (replaceState):', {
15598
+ from: previousUrl,
15599
+ to: window.location.href,
15600
+ pathname: window.location.pathname
15601
+ });
15602
+ }
15560
15603
  previousUrl = window.location.href;
15561
15604
  span.end();
15562
15605
  return result;
@@ -15590,9 +15633,10 @@ function initializeSignOzTracing(config) {
15590
15633
  logRequestBody: (config === null || config === void 0 ? void 0 : config.logRequestBody) !== undefined ? config.logRequestBody : (getConfigValue('REACT_APP_SIGNOZ_LOG_REQUEST_BODY') === 'true' || true),
15591
15634
  logResponseBody: (config === null || config === void 0 ? void 0 : config.logResponseBody) !== undefined ? config.logResponseBody : (getConfigValue('REACT_APP_SIGNOZ_LOG_RESPONSE_BODY') === 'true' || true),
15592
15635
  maxBodyLogSize: (config === null || config === void 0 ? void 0 : config.maxBodyLogSize) || parseInt(getConfigValue('REACT_APP_SIGNOZ_MAX_BODY_LOG_SIZE') || '10000') || 10000,
15593
- enableDocumentLoad: (config === null || config === void 0 ? void 0 : config.enableDocumentLoad) !== undefined ? config.enableDocumentLoad : (getConfigValue('REACT_APP_SIGNOZ_ENABLE_DOCUMENT_LOAD') !== 'false'),
15636
+ enableDocumentLoad: (config === null || config === void 0 ? void 0 : config.enableDocumentLoad) !== undefined ? config.enableDocumentLoad : (getConfigValue('REACT_APP_SIGNOZ_ENABLE_DOCUMENT_LOAD') === 'true'),
15594
15637
  enableErrorTracking: (config === null || config === void 0 ? void 0 : config.enableErrorTracking) !== undefined ? config.enableErrorTracking : (getConfigValue('REACT_APP_SIGNOZ_ENABLE_ERROR_TRACKING') !== 'false'),
15595
- enableNavigationTracking: (config === null || config === void 0 ? void 0 : config.enableNavigationTracking) !== undefined ? config.enableNavigationTracking : (getConfigValue('REACT_APP_SIGNOZ_ENABLE_NAVIGATION_TRACKING') !== 'false')
15638
+ enableNavigationTracking: (config === null || config === void 0 ? void 0 : config.enableNavigationTracking) !== undefined ? config.enableNavigationTracking : (getConfigValue('REACT_APP_SIGNOZ_ENABLE_NAVIGATION_TRACKING') === 'true'),
15639
+ enableConsoleLog: (config === null || config === void 0 ? void 0 : config.enableConsoleLog) !== undefined ? config.enableConsoleLog : (getConfigValue('REACT_APP_SIGNOZ_ENABLE_CONSOLE_LOG') === 'true')
15596
15640
  };
15597
15641
  // Validasi konfigurasi
15598
15642
  const { isValid, missingFields } = validateConfig(effectiveConfig);
@@ -15636,11 +15680,13 @@ function initializeSignOzTracing(config) {
15636
15680
  registerInstrumentations({
15637
15681
  instrumentations: [
15638
15682
  getWebAutoInstrumentations({
15683
+ // Nonaktifkan XMLHttpRequest auto-instrumentation (kita pakai custom logging)
15639
15684
  '@opentelemetry/instrumentation-xml-http-request': {
15640
- propagateTraceHeaderCorsUrls: effectiveConfig.allowedOrigins,
15685
+ enabled: false,
15641
15686
  },
15687
+ // Nonaktifkan Fetch auto-instrumentation (kita pakai custom logging)
15642
15688
  '@opentelemetry/instrumentation-fetch': {
15643
- propagateTraceHeaderCorsUrls: effectiveConfig.allowedOrigins,
15689
+ enabled: false,
15644
15690
  },
15645
15691
  // Nonaktifkan user interaction instrumentation (click events)
15646
15692
  '@opentelemetry/instrumentation-user-interaction': {
@@ -15659,22 +15705,24 @@ function initializeSignOzTracing(config) {
15659
15705
  enableRequestLogging: effectiveConfig.enableRequestLogging,
15660
15706
  logRequestBody: effectiveConfig.logRequestBody,
15661
15707
  logResponseBody: effectiveConfig.logResponseBody,
15662
- maxBodyLogSize: effectiveConfig.maxBodyLogSize
15708
+ maxBodyLogSize: effectiveConfig.maxBodyLogSize,
15709
+ enableConsoleLog: effectiveConfig.enableConsoleLog
15663
15710
  });
15664
15711
  addXHRLogging({
15665
15712
  enableRequestLogging: effectiveConfig.enableRequestLogging,
15666
15713
  logRequestBody: effectiveConfig.logRequestBody,
15667
15714
  logResponseBody: effectiveConfig.logResponseBody,
15668
- maxBodyLogSize: effectiveConfig.maxBodyLogSize
15715
+ maxBodyLogSize: effectiveConfig.maxBodyLogSize,
15716
+ enableConsoleLog: effectiveConfig.enableConsoleLog
15669
15717
  });
15670
15718
  }
15671
15719
  // Tambahkan error tracking
15672
15720
  if (effectiveConfig.enableErrorTracking) {
15673
- addErrorTracking();
15721
+ addErrorTracking(effectiveConfig.enableConsoleLog);
15674
15722
  }
15675
15723
  // Tambahkan navigation tracking
15676
15724
  if (effectiveConfig.enableNavigationTracking) {
15677
- addNavigationTracking();
15725
+ addNavigationTracking(effectiveConfig.enableConsoleLog);
15678
15726
  }
15679
15727
  console.log('SignOz: Konfigurasi tracing:', {
15680
15728
  serviceName: effectiveConfig.serviceName,