문서 로드 후 리소스 계측

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

{
  allowedInitiatorTypes: ['img', 'script', 'css', 'link'],
  ignoreUrls: [],
  enabled: true
}

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: {
    postload: {
      enabled: true,
      // 이미지와 스크립트만 추적
      allowedInitiatorTypes: ['img', 'script']
    }
  }
});

IMQA.init({
  collectorUrl: 'https://collector.example.com',
  serviceName: 'my-web-app',
  serviceKey: 'your-service-key',
  instrumentations: {
    postload: {
      enabled: true,
      // 분석 도구와 광고 제외
      ignoreUrls: [
        /google-analytics\.com/,
        /googletagmanager\.com/,
        /doubleclick\.net/,
        'https://cdn.example.com/analytics'
      ]
    }
  }
});

IMQA.init({
  collectorUrl: 'https://collector.example.com',
  serviceName: 'my-web-app',
  serviceKey: 'your-service-key',
  instrumentations: {
    postload: {
      enabled: true,
      // 기본 타입 + 'other' 타입 추가
      allowedInitiatorTypes: ['img', 'script', 'css', 'link', 'other']
    }
  }
});

// 내부 구현
this.performanceObserver = new PerformanceObserver((list) => {
  if (window.document.readyState === 'complete') {
    list.getEntries().forEach((entry) => {
      if (this.config.allowedInitiatorTypes?.includes(entry.initiatorType)) {
        this._createSpan(entry);
      }
    });
  }
});

this.performanceObserver.observe({
  entryTypes: ['resource', 'navigation', 'element']
});

// 내부 구현
this.headMutationObserver = new MutationObserver((mutations) => {
  if (context.active() === ROOT_CONTEXT) {
    return; // ROOT 컨텍스트에서는 매핑하지 않음
  }
  
  mutations
    .flatMap((mutation) => Array.from(mutation.addedNodes || []))
    .filter(node => 
      node instanceof HTMLScriptElement || 
      node instanceof HTMLImageElement
    )
    .forEach((node) => {
      const src = node.getAttribute('src');
      if (src) {
        const srcUrl = new URL(src, location.origin);
        this.urlToContextMap[srcUrl.toString()] = context.active();
      }
    });
});

this.headMutationObserver.observe(document.head, { childList: true });

// 사용자 이벤트 시작
const eventId = IMQA.userEvent.start('load-additional-content');

// 동적으로 스크립트 추가
const script = document.createElement('script');
script.src = 'https://example.com/dynamic-content.js';
document.head.appendChild(script);
// → 이 스크립트는 자동으로 eventId 컨텍스트와 연결됨

// 이벤트 완료
IMQA.userEvent.end(eventId);

// 컨텍스트 관리자가 컨텍스트를 변경하기 전에 호출
public onBeforeContextChange(): void {
  // 아직 처리되지 않은 mutation 레코드 처리
  this._processHeadMutationObserverRecords(
    this.headMutationObserver?.takeRecords() || []
  );
}

addSpanNetworkEvents(span, entry);

// Intersection Observer로 lazy loading 구현
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      // → post-doc-load 계측이 자동으로 추적
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

{
  name: "resourceFetch",
  attributes: {
    "imqa.span.type": "post-docs",
    "url.full": "https://example.com/lazy-image.jpg",
    "http.request.method": "GET"
  },
  events: {
    fetchStart: 5000,
    responseEnd: 5200
  }
}

// 사용자 이벤트 내에서 동적 스크립트 로드
const eventId = IMQA.userEvent.start('load-widget');

function loadWidget() {
  const script = document.createElement('script');
  script.src = 'https://cdn.example.com/widget.js';
  script.onload = () => {
    IMQA.userEvent.end(eventId, { result: 'success' });
  };
  script.onerror = () => {
    IMQA.userEvent.end(eventId, { result: 'error' });
  };
  document.head.appendChild(script);
  // → 스크립트 로딩이 eventId의 자식 스팬으로 추적됨
}

loadWidget();

// React Router 예시
function ArticlePage({ articleId }) {
  useEffect(() => {
    // 페이지 전환 시 추가 리소스 로드
    const img = new Image();
    img.src = `/api/articles/${articleId}/cover.jpg`;
    document.body.appendChild(img);
    // → post-doc-load가 자동 추적
    
    return () => {
      document.body.removeChild(img);
    };
  }, [articleId]);
  
  return <div>...</div>;
}

// 위젯 로드 시작
const widgetEventId = IMQA.userEvent.start('load-chat-widget', {
  'widget.type': 'chat',
  'widget.vendor': 'example-chat'
});

// 써드파티 위젯 스크립트
(function() {
  const script = document.createElement('script');
  script.src = 'https://widget.example.com/chat.js';
  script.async = true;
  script.onload = function() {
    IMQA.userEvent.end(widgetEventId, {
      'load.result': 'success'
    });
  };
  document.head.appendChild(script);
})();