문서 로드 계측

interface IMQADocLoadInstrumentationConfig extends InstrumentationConfig {
  ignoreUrls?: (string | RegExp)[];
  screenNameOption?: ScreenNameOption;
}

IMQA.init({
  collectorUrl: 'https://collector.example.com',
  serviceName: 'my-web-app',
  serviceKey: 'your-service-key',
  // 문서 로드 계측은 기본적으로 활성화됨
});

IMQA.init({
  collectorUrl: 'https://collector.example.com',
  serviceName: 'my-web-app',
  serviceKey: 'your-service-key',
  instrumentations: {
    documentLoad: {
      enabled: true,
      // CDN 리소스 제외
      ignoreUrls: [
        /cdn\.example\.com/,
        'https://analytics.example.com',
        /google-analytics/
      ]
    }
  }
});

IMQA.init({
  collectorUrl: 'https://collector.example.com',
  serviceName: 'my-web-app',
  serviceKey: 'your-service-key',
  instrumentations: {
    documentLoad: {
      enabled: true,
      screenNameOption: {
        screenNameType: 'routeOnly', // 또는 'full', 'pathOnly'
        urlWithSearchParams: false
      }
    }
  }
});

HTTP/1.1 200 OK
Server-Timing: db;dur=53, app;dur=47.2, total;dur=100.2
Server-Timing: traceparent;desc="00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01"

// documentFetch 및 resourceFetch 스팬에서 자동 처리
captureTraceParentFromPerformanceEntries(entries, span);

const excludedInitiatorTypes = ['beacon', 'fetch', 'xmlhttprequest'];

// 이전 페이지 정보
if (document.referrer && document.referrer !== '') {
  span.setAttribute('imqa.document.referrer', document.referrer);
}

// 화면 해상도
if (window.screen) {
  span.setAttribute(
    'imqa.document.screen.xy',
    window.screen.width + 'x' + window.screen.height
  );
}

// Navigation Timing 이벤트
{
  fetchStart: 1234567890,
  domainLookupStart: 1234567891,
  domainLookupEnd: 1234567892,
  connectStart: 1234567892,
  connectEnd: 1234567895,
  requestStart: 1234567895,
  responseStart: 1234567900,
  responseEnd: 1234567950,
  domInteractive: 1234568000,
  domContentLoadedEventStart: 1234568100,
  domContentLoadedEventEnd: 1234568110,
  domComplete: 1234568200,
  loadEventStart: 1234568200,
  loadEventEnd: 1234568210
}

// documentLoad 스팬 분석
{
  name: "documentLoad",
  startTime: 0,
  duration: 3500, // 3.5초
  events: {
    domInteractive: 1200,
    domContentLoadedEventEnd: 2000,
    loadEventEnd: 3500
  }
}

// resourceFetch 스팬들 분석
[
  { name: "style.css", duration: 50, size: 24000 },
  { name: "app.js", duration: 500, size: 2400000 },  // 병목!
  { name: "vendor.js", duration: 300, size: 1200000 },
  { name: "hero.jpg", duration: 800, size: 1500000 }  // 병목!
]

// documentFetch 스팬의 Server-Timing
{
  serverTiming: [
    { name: "db", duration: 53 },
    { name: "app", duration: 47.2 },
    { name: "total", duration: 100.2 }
  ]
}