@imqa/instrumentation-document-load

개요

@imqa/instrumentation-document-load는 웹 페이지 로딩 성능 지표를 캡처하고 보고합니다. 이 스키마는 OpenTelemetry 형식을 사용하여 웹 페이지 로드의 전체 수명 주기를 추적하도록 설계되었습니다. 이는 ResourceFetch, 렌더링, 완료 이벤트를 포함합니다.

스키마 구조

스키마는 JSON 문서로, JSON Schema Draft 2020-12 사양을 따릅니다. DocumentLoad Telemetry 데이터의 구조화된 형식을 정의하며, 다음과 같은 주요 구성요소를 포함합니다:

스팬

DocumentLoad 인스트루멘테이션은 여러 유형의 스팬을 생성합니다:

DocumentLoad 스팬

전체 페이지 로딩 프로세스를 나타내는 주 스팬입니다:

• traceId: 트레이스의 고유 식별자
• spanId: 스팬의 고유 식별자
• name: "documentLoad"
• kind: 스팬의 타입 (INTERNAL = 1)
• startTimeUnixNano: 에포크 이후의 페이지 로드 시작 시간 (나노초)
• endTimeUnixNano: 에포크 이후의 페이지 로드 종료 시간 (나노초)
• status: 결과 상태 (0 = OK, 1 = ERROR, 2 = UNSET)

DocumentFetch 스팬

초기 HTML DocumentFetch 작업을 나타내는 자식 스팬입니다:

• name: "documentFetch"
• parentSpanId: 부모 documentLoad 스팬의 ID

ResourceFetch 스팬

스크립트, 스타일시트 등 다양한 페이지 리소스의 가져오기를 나타내는 여러 자식 스팬:

• name: "resourceFetch"
• parentSpanId: 부모 documentLoad 스팬의 ID

스팬 속성

각 DocumentLoad 스팬은 다음과 같은 공통 속성을 포함합니다:

| 속성 | 타입 | 설명 | |-----------|------|-------------| | location.href | string | 현재 페이지 URL | | environment | string | 환경 이름 | | deployment.environment | string | 배포 환경 | | screen.name | string | 화면/페이지 이름 | | screen.type | string | 화면/페이지 타입 (예: "page") | | session.id | string | 사용자 세션 식별자 | | url.full | string | 요청 전체 URL (예: "https://example.com/articles/4?s=1&t1" ) | | http.url | string | (deprecated) 가져오는 문서나 리소스의 URL (예: "https://example.com/articales/4" ) | | http.response_content_length | integer | 응답 컨텐츠의 크기 (바이트) | | component | string | 컴포넌트 타입 (예: "document-load") | | span.type| string | 스팬 타입 (예: "render") | | http.request.method | string | 요청에 사용된 HTTP 메서드 (일반적으로 "GET") | | http.scheme | string | 요청에 사용된 프로토콜 (예: "https") | | http.host | string | 요청에 사용된 호스트 (예: "example.com") |

주 문서Load 스팬은 다음과 같은 추가 속성도 포함할 수 있습니다:

| 속성 | 타입 | 설명 | |-----------|------|-------------| | http.user_agent | string | 브라우저 사용자 에이전트 | | document.referrer | string | 적용 가능한 경우 이전 페이지 URL | | screen.xy | string | 화면 크기 (예: "1920x1080") |

이벤트

DocumentLoad 스팬은 페이지 로드 프로세스의 주요 마일스톤을 나타내는 다양한 이벤트를 포함합니다:

DocumentLoad 이벤트

| 이벤트 | 설명 | |-------|-------------| | fetchStart | 가져오기 프로세스 시작 | | unloadEventStart | 이전 페이지의 언로드 이벤트 시작 | | unloadEventEnd | 이전 페이지의 언로드 이벤트 종료 | | domInteractive | DOM이 상호작용 준비 완료 | | domContentLoadedEventStart | DOMContentLoaded 이벤트 시작 | | domContentLoadedEventEnd | DOMContentLoaded 이벤트 종료 | | domComplete | DOM 구조화 완료 | | loadEventStart | 로드 이벤트 시작 | | loadEventEnd | 로드 이벤트 종료 |

ResourceFetch 이벤트

| 이벤트 | 설명 | |-------|-------------| | fetchStart | ResourceFetch 시작 | | domainLookupStart | DNS 조회 시작 | | domainLookupEnd | DNS 조회 종료 | | connectStart | 서버 연결 시작 | | connectEnd | 서버 연결 종료 | | requestStart | 서버로 요청 전송 | | responseStart | 첫 번째 바이트 응답 수신 | | responseEnd | 마지막 바이트 응답 수신 |

계측 설정

(boolean 또는 IMQADocLoadInstrumentationConfig, 선택)

DocumentLoad 계측을 활성화하거나 비활성화합니다. true로 설정하면 DocumentLoad 이벤트가 계측됩니다. IMQADocLoadInstrumentationConfig을 제공하여 계측의 세부 설정을 조정할 수 있습니다.

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

• ignoreUrls: 계측하지 않을 URL 패턴을 지정합니다. 정규식이나 문자열 배열로 설정할 수 있으며, 부분 일치 또는 정확히 일치하는 URL은 계측되지 않습니다.

라이센스

Copyright (c) 2024-2025 ONYCOM CO., LTD. All rights reserved.