[![NPM Published Version][npm-version-img]][npm-url] [![NPM Last Update][npm-last-update-img]][npm-url] [![NPM Unpacked Size][npm-unpacked-size-img]][npm-url] [![NPM Downloads][npm-downloads-img]][npm-url] [![NPM Type Definitions][npm-types-img]][npm-url]
npm install @spanmetric/instrumentation-browser-longtask[![NPM Published Version][npm-version-img]][npm-url] [![NPM Last Update][npm-last-update-img]][npm-url] [![NPM Unpacked Size][npm-unpacked-size-img]][npm-url] [![NPM Downloads][npm-downloads-img]][npm-url] [![NPM Type Definitions][npm-types-img]][npm-url] [![License][license-image]][license-url]
@spanmetric/instrumentation-browser-longtask는 브라우저에서 실행되는 LongTask를 캡처하고 보고합니다. 이 계측은 OpenTelemetry 형식을 사용하여 웹 애플리케이션의 성능 문제를 추적하도록 설계되었습니다.
스키마는 JSON 문서로, JSON 스키마 사양을 따릅니다. 브라우저 LongTask Telemetry 데이터의 구조화된 형식을 정의하며, 다음과 같은 주요 구성요소를 포함합니다:
각 스팬은 브라우저에서 실행되는 단일 LongTask를 나타내며, 다음과 같은 내용을 포함합니다:
- traceId: 트레이스의 고유 식별자
- spanId: 스팬의 고유 식별자
- name: 작업의 이름 (일반적으로 "longtask")
- kind: 스팬의 타입 (1 = INTERNAL)
- startTimeUnixNano: 에포크 이후의 시작 시간 (나노초)
- endTimeUnixNano: 에포크 이후의 종료 시간 (나노초)
- status: 결과 상태 (0 = OK, 1 = ERROR, 2 = UNSET)
각 스팬은 다음과 같은 속성을 포함합니다:
| 속성 | 타입 | 설명 |
|-----------|------|-------------|
| 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 | 컴포넌트 식별자 ("browser-longtask") |
| span.type | string | 스팬 타입 ("longtask") |
| longtask.name | string | LongTask의 소스 (예: "self") |
| longtask.entry_type | string | 엔트리 타입 (일반적으로 "longtask") |
| longtask.duration | integer | LongTask의 지속 시간 (밀리초) |
| 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 | 컨테이너의 이름 |
> (boolean 또는 InstrumentationConfig, 선택)
브라우저 LongTask 계측을 활성화하거나 비활성화합니다. true로 설정하면 긴 시간 동안 실행되는 작업이 자동으로 계측됩니다.
자세한 계측 정보는 @spanmetric/instrumentation-browser-longtask 참조
``typescript`
export interface InstrumentationConfig {
enabled?: boolean;
}
- enabled: 계측을 활성화할지 여부를 설정합니다. 기본값은 true`입니다.
유효한 브라우저 LongTask Telemetry 객체는 다음과 같은 내용을 포함합니다:
- 서비스, 브라우저 및 환경을 식별하는 리소스 정보
- LongTask를 나타내는 하나 이상의 스팬
- 작업 지속 시간과 속성에 대한 상세 정보를 포함하는 각 스팬
LongTask는 50ms 이상 실행되는 작업으로, 사용자 경험 저하를 초래할 수 있습니다. 이러한 작업을 모니터링하면 웹 애플리케이션의 성능 병목 현상을 식별하는 데 도움이 됩니다.
데이터는 다양한 Telemetry 수집 및 분석 도구와 호환되는 OpenTelemetry 프로토콜 형식을 따릅니다.
Copyright (c) 2024-2025 IDLERECORD. All rights reserved.
[license-url]: https://github.com/spanmetric/spanmetric-js/blob/main/packages/instrumentation-browser-longtask/LICENSE
[license-image]: https://img.shields.io/badge/license-IDLERECORD--All%20Rights%20Reserved-blue
[npm-url]: https://www.npmjs.com/package/@spanmetric/instrumentation-browser-longtask
[npm-version-img]: https://img.shields.io/npm/v/%40spanmetric%2Finstrumentation-browser-longtask?style=flat-square&logo=npm&color=%238ef7c1
[npm-last-update-img]: https://img.shields.io/npm/last-update/%40spanmetric%2Finstrumentation-browser-longtask?color=%238ef7c1
[npm-unpacked-size-img]: https://img.shields.io/npm/unpacked-size/%40spanmetric%2Finstrumentation-browser-longtask?color=%238ef7c1
[npm-downloads-img]: https://img.shields.io/npm/dw/%40spanmetric%2Finstrumentation-browser-longtask?color=%238ef7c1
[npm-types-img]: https://img.shields.io/npm/types/%40spanmetric%2Finstrumentation-browser-longtask
[npm-url]: https://www.npmjs.com/package/@spanmetric/instrumentation-browser-longtask