Sentry 를 알아보자 - (2) Transaction, Span 직접 생성해보기

* 이전 글을 먼저 읽고 와주세요

2024.02.04 - [프론트엔드] - Sentry 를 알아보자 - (1) Trace, Transaction, Span 이란?

---

이번 시간에는 Sentry 가 어떠한 단위로 트랜잭션과 스팬을 생성하는지 실습을 통해 알아보도록 하겠습니다.

직접 트랜잭션과 스팬을 생성해보도록 하겠습니다.

트랜잭션 ( Transaction ) 생성해보기

다음과 같이 버튼을 클릭하면 트랜잭션을 생성하고, 2초 뒤에 트랜잭션을 종료하는 코드를 짜보았습니다.

브라우저	코드 ( VueJS 사용 )	동작 영상 첨부

 

init 설정을 해두었던 Sentry 객체에서 "startTransaction" 메서드를 통해 트랜잭션을 생성할 수 있습니다.

트랜잭션 역시 스팬의 한 종류이기 때문에, SPAN에 포함되는 데이터들과 동일한 데이터들을 커스터마이징할 수 있습니다. ( ex. name, op )

transaction.finish() 함수를 호출해야지만 트랜잭션이 종료되고 DSN으로 전송됩니다.

영상에서처럼, 버튼을 클릭하고 2초 뒤에 Transaction을 전송하는 것을 볼 수 있습니다.

 

전송된 트랜잭션

 

잘 들어온 것을 확인할 수 있습니다.

스팬 ( Span ) 생성해보기

트랜잭션을 생성해보았습니다. 이제 트랜잭션 내부에 하위 스팬들을 생성해보도록 하겠습니다.

 

코드	센트리

Transaction 을 정의하고 finish() 하는 사이에 해당 트랜잭션 객체를 가져와서 스팬을 생성했습니다.

스팬 역시, op, name 등과 같은 값들을 설정할 수 있었습니다. 또한, setTimeout을 통해 실행시간을 2초로 지연시켰더니 그대로 측정된 것을 볼 수 있었습니다.

트랜잭션은 마지막 스팬이 종료된 후에 종료돼야합니다. 실제로 우리가 사용하는 sentry/browser 에서는 마지막 스팬이 종료된 후 2초 뒤에 트랜잭션을 종료합니다.

 

Sentry 화면에서 볼 수 있는 것처럼 트랜잭션에 대한 스팬을 만들면 트리구조로 들어가게됩니다.

그리고 스팬객체에 startChild() 함수를 이용해 다시 하위 스팬을 만들 수 있는데, 이런 식으로 부모-자식 트리 구조를 형성하게 됩니다.

 

코드	설명
	api span 객체에서 startChild를 이용하여 다시 자식 스팬을 만드는 방식으로 트리구조를 형성할 수 있습니다.

 

지금까지, 트랜잭션과 스팬을 직접 만들어보았습니다. 실제 센트리에서는 정해진 Operation 단위로 트랜잭션과 스팬을 생성하여 DSN으로 전송하게 됩니다. 다음 시간에는 Sentry 가 Pageload 단위로 성능을 측정하는 상황에 대해 분석해보도록 하겠습니다.