Long Task 계측
@imqa/instrumentation-browser-longtask
개요
브라우저 장시간 작업 계측은 웹 애플리케이션에서 메인 스레드를 오랫동안 차단하는 작업(Long Task)을 자동으로 감지하고 모니터링하는 기능을 제공합니다. 50ms 이상 실행되는 작업을 추적하여 사용자 인터페이스의 응답성 문제를 식별하고 성능 최적화를 지원합니다.
주요 기능
장시간 작업 감지
- 50ms 이상 실행되는 작업 자동 감지
- Long Task API를 통한 정밀한 측정
- 메인 스레드 차단 시간 추적
성능 영향 분석
- 사용자 상호작용 지연 원인 식별
- UI 응답성 문제 진단
- JavaScript 성능 병목 지점 발견
최적화 지원
- 코드 분할 최적화 가이드
- 비동기 처리 개선점 도출
- 사용자 경험 개선을 위한 데이터
계측 범위
브라우저 장시간 작업 계측은 다음과 같은 작업을 추적합니다:
- JavaScript 실행: 복잡한 계산 및 DOM 조작
- 렌더링 작업: 대량의 DOM 변경 및 레이아웃 계산
- 이벤트 처리: 무거운 이벤트 핸들러 실행
- 외부 라이브러리: 서드파티 스크립트의 장시간 실행
주요 속성
리소스 속성
리소스 섹션은 서비스와 환경을 설명하는 속성을 포함합니다:
| 속성 | 설명 |
|---|---|
service.name | Telemetry를 생성하는 서비스의 이름 |
service.version | 서비스 버전 |
service.namespace | 서비스 네임스페이스 |
deployment.environment.name | 배포 환경 |
telemetry.sdk.language | Telemetry SDK의 프로그래밍 언어 |
telemetry.sdk.name | Telemetry SDK의 이름 |
telemetry.sdk.version | Telemetry SDK의 버전 |
process.runtime.name | 런타임 이름 (예: "browser") |
os.name | 운영체제 이름 |
os.version | 운영체제 버전 |
imqa.browser.device | 디바이스 타입 |
imqa.browser.name | 브라우저 이름 |
imqa.browser.version | 브라우저 전체 버전 |
imqa.browser.version_major | 브라우저 메이저 버전 |
service.key | 서비스 식별 키 |
imqa.agent.version | IMQA 에이전트 버전 |
rum.version | RUM (Real User Monitoring) 버전 |
rum.scriptInstance | RUM 스크립트 인스턴스 식별자 |
session.id | 사용자 세션 식별자 |
인스트루멘테이션 범위
브라우저 Long Task Telemetry는 주로 다음과 같은 인스트루멘테이션 범위를 통해 캡처됩니다:
@imqa/instrumentation-browser-longtask: 브라우저에서 발생하는 긴 작업 캡처
Long Task 스팬
각 스팬은 브라우저에서 실행되는 단일 Long Task를 나타내며, 다음과 같은 내용을 포함합니다:
traceId: 트레이스의 고유 식별자spanId: 스팬의 고유 식별자name: 작업의 이름 (일반적으로 "longtask")kind: 스팬의 타입 (INTERNAL = 1)startTimeUnixNano: 에포크 이후의 Long Task 시작 시간 (나노초)endTimeUnixNano: 에포크 이후의 Long Task 종료 시간 (나노초)status: 결과 상태 (OK = 0, ERROR = 1, UNSET = 2)
Long Task 스팬 속성
각 Long Task 스팬은 다음과 같은 속성을 포함합니다:
| 속성 | 타입 | 설명 |
|---|---|---|
location.href | string | 현재 페이지 URL |
environment | string | 환경 이름 |
deployment.environment | string | 배포 환경 |
screen.name | string | 화면/페이지 이름 |
screen.type | string | 화면/페이지 타입 |
session.id | string | 사용자 세션 식별자 |
url.full | string | 요청 전체 URL (예: "https://example.com/articles/4?s=1&t1" ) |
component | string | 인스트루멘테이션 컴포넌트 이름 |
span.type | string | 스팬 타입 (예: "longtask") |
longtask.name | string | Long Task의 소스 (예: "self") |
longtask.entry_type | string | 엔트리 타입 (일반적으로 "longtask") |
longtask.duration | integer | Long Task의 지속 시간 (밀리초) |
longtask.attribution.name | string | 속성 소스의 이름 |
longtask.attribution.entry_type | string | 속성 엔트리의 타입 |
longtask.attribution.start_time | integer | 속성 시작 시간 |
longtask.attribution.duration | integer | 속성 지속 시간 |
longtask.attribution.container_type | string | 컨테이너 타입 (예: "window") |
longtask.attribution.container_src | string | 컨테이너의 소스 |
longtask.attribution.container_id | string | 컨테이너의 ID |
longtask.attribution.container_name | string | 컨테이너의 이름 |
사용 방법
이 스키마는 IMQA 모니터링 시스템으로 Telemetry 데이터를 처리하고 저장하기 전에 Long Task Telemetry 데이터를 검증하는 데 사용됩니다. 이는 모든 필수 필드가 올바르게 포함되어 있는지 확인합니다.
계측 설정
(
boolean또는InstrumentationConfig, 선택)
브라우저 Long Task 계측을 활성화하거나 비활성화합니다. true로 설정하면 50ms 이상 실행되는 긴 작업이 자동으로 계측됩니다.
interface InstrumentationConfig {
enabled?: boolean;
}
enabled: 계측을 활성화할지 여부를 설정합니다. 기본값은true입니다.
예시
유효한 브라우저 Long Task Telemetry 객체는 다음과 같은 내용을 포함합니다:
- 서비스, 브라우저 및 환경을 식별하는 리소스 정보
- Long Task를 나타내는 하나 이상의 스팬
- 작업 지속 시간과 속성에 대한 상세 정보를 포함하는 각 스팬
Long Task는 50ms 이상 실행되는 작업으로, 사용자 경험 저하를 초래할 수 있습니다. 이러한 작업을 모니터링하면 웹 애플리케이션의 성능 병목 현상을 식별하는 데 도움이 됩니다.
데이터는 다양한 Telemetry 수집 및 분석 도구와 호환되는 OpenTelemetry 프로토콜 형식을 따릅니다.