imqa.document

Long Task 계측

@imqa/instrumentation-browser-longtask

NPM Version NPM Last Update NPM Unpacked Size npm package minimized gzipped size NPM Downloads NPM Type Definitions

개요

브라우저 장시간 작업 계측은 웹 애플리케이션에서 메인 스레드를 오랫동안 차단하는 작업(Long Task)을 자동으로 감지하고 모니터링하는 기능을 제공합니다. 50ms 이상 실행되는 작업을 추적하여 사용자 인터페이스의 응답성 문제를 식별하고 성능 최적화를 지원합니다.

주요 기능

장시간 작업 감지

  • 50ms 이상 실행되는 작업 자동 감지
  • Long Task API를 통한 정밀한 측정
  • 메인 스레드 차단 시간 추적

성능 영향 분석

  • 사용자 상호작용 지연 원인 식별
  • UI 응답성 문제 진단
  • JavaScript 성능 병목 지점 발견

최적화 지원

  • 코드 분할 최적화 가이드
  • 비동기 처리 개선점 도출
  • 사용자 경험 개선을 위한 데이터

계측 범위

브라우저 장시간 작업 계측은 다음과 같은 작업을 추적합니다:

  • JavaScript 실행: 복잡한 계산 및 DOM 조작
  • 렌더링 작업: 대량의 DOM 변경 및 레이아웃 계산
  • 이벤트 처리: 무거운 이벤트 핸들러 실행
  • 외부 라이브러리: 서드파티 스크립트의 장시간 실행

주요 속성

리소스 속성

리소스 섹션은 서비스와 환경을 설명하는 속성을 포함합니다:

속성설명
service.nameTelemetry를 생성하는 서비스의 이름
service.version서비스 버전
service.namespace서비스 네임스페이스
deployment.environment.name배포 환경
telemetry.sdk.languageTelemetry SDK의 프로그래밍 언어
telemetry.sdk.nameTelemetry SDK의 이름
telemetry.sdk.versionTelemetry 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.versionIMQA 에이전트 버전
rum.versionRUM (Real User Monitoring) 버전
rum.scriptInstanceRUM 스크립트 인스턴스 식별자
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.hrefstring현재 페이지 URL
environmentstring환경 이름
deployment.environmentstring배포 환경
screen.namestring화면/페이지 이름
screen.typestring화면/페이지 타입
session.idstring사용자 세션 식별자
url.fullstring요청 전체 URL (예: "https://example.com/articles/4?s=1&t1" )
componentstring인스트루멘테이션 컴포넌트 이름
span.typestring스팬 타입 (예: "longtask")
longtask.namestringLong Task의 소스 (예: "self")
longtask.entry_typestring엔트리 타입 (일반적으로 "longtask")
longtask.durationintegerLong Task의 지속 시간 (밀리초)
longtask.attribution.namestring속성 소스의 이름
longtask.attribution.entry_typestring속성 엔트리의 타입
longtask.attribution.start_timeinteger속성 시작 시간
longtask.attribution.durationinteger속성 지속 시간
longtask.attribution.container_typestring컨테이너 타입 (예: "window")
longtask.attribution.container_srcstring컨테이너의 소스
longtask.attribution.container_idstring컨테이너의 ID
longtask.attribution.container_namestring컨테이너의 이름

사용 방법

이 스키마는 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 프로토콜 형식을 따릅니다.