이전 글에서 설명한 개념이 필요합니다. 이전글을 읽지 않았다면 먼저 읽고 오시기를 추천합니다.
2024.02.04 - [프론트엔드] - Sentry 를 알아보자 - (1) Trace, Transaction, Span 이란?
2024.02.05 - [프론트엔드] - Sentry 를 알아보자 - (2) Transaction, Span 직접 생성해보기
오늘은 Transaction, Span 의 개념을 바탕으로 Sentry가 어떻게 성능을 측정하는지 알아보겠습니다.
일반적으로 FE 에서 사용하는 Sentry는 Browser Integration을 사용하며, pageload 단위로 성능 데이터가 수집됩니다.
즉, Pageload 단위로 트랜잭션이 수집됩니다.
Pageload 시에 발생하는 하위 이벤트들을 트랜잭션의 자식 SPAN 으로 생성하고, 마지막 SPAN 이 끝난 시점부터 일정 시간을 기다린 후 트랜잭션을 종료하게됩니다.
Pageload 시 발생하는 이벤트들 중 어떠한 이벤트들을 SPAN 으로 생성할까요?
SPAN 생성의 트리거가 되는 이벤트들을 Operation이라고 합니다. Operation 종류에 대해 살펴보겠습니다.
다음 문서를 볼까요?
https://develop.sentry.dev/sdk/performance/span-operations/
위 문서를 보면 Span Operation List 가 나와있습니다.
트랜잭션도 하나의 스팬이기 때문에 트랜잭션의 Operation이 되는 "pageload" 도 보이네요
또 navigation, resource.script, resource.img 등등의 Operation 등이 있습니다.
Sentry Operation 종류
| Sentry Docs | Sentry Transaction |
 |
 |
| Sentry Docs 를 보면 Operation 종류들을 볼 수 있습니다. | 실제 Sentry 에 수집되는 Span 데이터 |
오른쪽 이미지는 실제 Sentry 에 수집되는 SPAN 데이터를 보여줍니다.
SPAN Operation 과 좀더 세부적인 내용을 보여줍니다. 위 내용을 바탕으로 어떤 작업에서 Pageload 시간을 오래 잡아먹는지 파악할 수 있습니다.
그렇다면 Sentry는 이 Operation 들을 모두 어떻게 측정하는걸까요?
Sentry 를 설치하면 이러한 이벤트들이 발생할 때마다 실행되는 시간을 측정할까요?
@sentry/tracing SourceCode 를 분석하면서, 대부분의 Operation은 Web API 중, Performance API 활용한다는 것을 알아냈습니다.
Performance API : https://developer.mozilla.org/en-US/docs/Web/API/Performance
실제 브라우저에서 performance API에 접근해보았습니다.
Web Performanc API
웹 애플리케이션에는 Web API에서 제공하는 Performance API가 포함되어 있습니다. 전역객체로 접근이 가능합니다.
getEntries() 함수를 통해 기록된 PerformanceEntry를 모두 가져옵니다.
브라우저의 퍼포먼스 메트릭 데이터가 타임라인에 맞게 기록되어 있습니다.
Performance API 의 메서드
왼쪽 리스트를 보게되면 Performance API가 데이터를 측정하는 인터페이스 종류에 대해 살펴볼 수 있습니다.
인터페이스 종료로는 PerformanceNavigationTiming, PerformanceResourceTiming, PerformancePaintTiming 등이 보입니다.
Sentry SPAN Operation 타입과 동일한 것을 볼 수 있습니다. 실제로 센트리는 Performance API에서 측정하는 메트릭 정보를 이용하여 SPAN 을 생성합니다.
또한, FID, CLS, FCP 같은 Web Vital 지표들도 Performance API를 활용하여 수집합니다.
뿐만아니라 센트리는 React, Vue, Svelte, NextJS 등과 같은 JS Frameworks 성능데이터도 Operatioin 으로 취급합니다.
브라우저의 성능 측정시, 문서에 적혀있는 라이프사이클 함수 실행 시간을 수집하게됩니다.
해당 Frameworks 에 맞는 Sentry SDK를 설치하면 됩니다.
이번 호 까지하여 Sentry 에 대해서 자세하게 알아보았습니다. 이전의 개념을 바탕으로 센트리가 어떻게 성능을 측정하는지 알아보았습니다.