브라우저 에이전트 수집 데이터
와탭 브라우저 에이전트는 사용자의 브라우저에서 발생한 이벤트를 수집하고, 수집한 데이터를 재가공해 모니터링에 활용합니다. 모든 수집 데이터는 사용자 세션에 종속적입니다.
타입(Type)
다음은 와탭 브라우저 에이전트가 수집하는 데이터 유형입니다.
- Long : long to string32형식의 고유 ID 데이터 타입입니다.
- TimeStamp : ms(millisecond) 단위, 측정 시각의 타임스탬프입니다.
- HighResolutionTime : ms 단위의 소요된 시간입니다.
- TimeSet : 타임라인 표시를 위해 시작 타임스탬프와 소요시간으로 표현합니다.
- ResourceType :
document,xhr,fetch,beacon,css,script,image,font,media,other중 하나를 의미합니다. - ErrorType :
console,onError,promiseRejection,fetchError,xhrError,messageError중 하나를 의미합니다.
공통 수집 데이터
이벤트 발생 시 기 본으로 수집 데이터는 다음과 같습니다.
| 데이터 이름 | 타입 | 설명 | 예시 |
|---|---|---|---|
| sessionID | Long | 웹 애플리케이션 사용자가 웹 페이지 탐색을 시작할 때 발급하는 고유 ID입니다. 세션의 유지 기간은 최대 4시간이며, 15분 동안 활동이 없으면 ID는 만료합니다. 브라우저 쿠키에 저장합니다. | x7dbvq64ga80sd |
| userID | Long | 웹 애플리케이션 사용자가 처음 접속할 때 발급하는 고유 ID로 만료 시간이 없습니다. 브라우저 쿠키에 저장합니다. | z7eqnnitlc19j9 |
| sendEventID | Long | 이벤트 발생 후 수집 서버로 데이터 전송 시 발급하는 요청 고유 ID입니다. | x4rp4tnuq25i0h |
| page.url | String | 이벤트가 발생한 페이지 URL입니다. | https://site.whatap.io/8/dashboard?dataKey=abcd |
| page.host | String | 이벤트가 발생한 페이지 URL의 도메인 이름입니다. | site.whatap.io |
| page.path | String | 이벤트가 발생한 페이지 URL의 경로입니다. | /8/dashboard |
| page.query | String | 이벤트가 발생한 페이지 URL의 parameter입니다. | dataKey=abcd |
| page.protocol | String | 이벤트가 발생한 페이지 URL의 프로토콜입니다. | https |
| page.title | String | 이벤트가 발생한 페이지의 문서 제목입니다. | SaaS 모니터링 No.1 와탭 모니터링 | 와탭 |
| userAgent | String | 이벤트가 발생한 브라우저의 useragent입니다. | Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36 |
페이지 로드 이벤트
사용자가 웹 애플리케이션에 접속 후 페이지의 콘텐츠를 완전히 불러오고 발생하는 이벤트입니다. 기본 수집 데이터는 다음과 같습니다.
| 데이터 이름 | 타입 | 설명 | 예시 |
|---|---|---|---|
| navigationTiming.startTimeStamp | TimeStamp | navigationStart의 타임스탬프입니다. 페이지를 불러오기 시작하는 시간의 타임스탬프값입니다. | 1658057382311 |
| navigationTiming.eventID | Long | 페이지를 불러오는 이벤트 발생 시 발급하는 고유 ID입니다. | x7mkg24tags307 |
| navigationTiming.redirect | TimeSet | http 리디렉션의 소요 시간입니다. | {duration: 10, start: 315} |
| navigationTiming.cache | TimeSet | app cache 리소스를 불러오는 소요 시간입니다. | {duration: 5, start: 325} |
| navigationTiming.dns | TimeSet | 웹사이트 domain 탐색 소요 시간입니다. | {duration: 5, start: 330} |
| navigationTiming.connect | TimeSet | TCP 연결 설정의 소요 시간입니다. | {duration: 6, start: 335} |
| navigationTiming.ssl | TimeSet | ssl handshake 프로세스 소요 시간입니다. | {duration: 5, start: 336} |
| navigationTiming.download | TimeSet | document 다운로드 소요 시간입니다. | {duration: 100, start: 341} |
| navigationTiming.firstByte | TimeSet | 브라우저가 서버에 document를 요청하고 첫 번째 바이트를 수신할 때까지의 소요 시간입니다. | {duration: 10, start: 341} |
| navigationTiming.domInteractive | HighResolutionTime | navigationStart부터 브라우저가 document 파싱을 완료한 시각입니다. DOM이 준비된 상태입니다. | 441 |
| navigationTiming.domContnentLoaded | TimeSet | DOM 트리를 생성하는데 걸린 소요 시간입니다. | {duration: 50, start: 441} |
| navigationTiming.domComplete | HighResolutionTime | navigationStart부터 document 및 하위 리소스 불러오기를 완료한 시각입니다. | 491 |
| navigationTiming.domLoad | TimeSet | onload 이벤트 소요 시간입니다. | {duration: 1, start: 491} |
| navigationTiming.backendTime | HighResolutionTime | navigationStart부터 리소스 다운로드까지의 소요 시간입니다. | 126 |
| navigationTiming.frontendTime | TimeSet | 브라우저가 파싱을 완료한 시각부터 load 이벤트가 완료될 때까지의 소요 시간입니다. | {duration: 51, start: 441} |
| navigationTiming.loadTime | HighResolutionTime | navigationStart부터 loadEventEnd까지 소요 시간입니다. | 492 |
| totalDuration | HighResolutionTime | navigationStart부터 최종 페이지 불러오기를 완료한 시각입니다. | 550 |
라우터 변경 이벤트
사용자가 Single Page Application(SPA) 형태의 웹 애플리케이션에서 페이지 이동 시 발생하는 이벤트입니다. 기본 수집 데이터는 다음과 같습니다.
| 데이터 이름 | 타입 | 설명 | 예시 |
|---|---|---|---|
| loadTime | HighResolutionTime | 라우터 변경 소요 시간입니다. | 500 |
| startTimeStamp | TimeStamp | 라우터 변경 시작 시각 타임스탬프입니다. | 1658057382311 |
| endTimeStamp | TimeStamp | 라우터 변경 종료 시각 타임스탬프입니다. | 1658057382811 |
| pageLocation | String | 라우터 변경 이벤트가 발생한 페이지 URL입니다. | https://site.whatap.io/8/dashboard?dataKey=abcd |
| host | String | 라우터 변경 이벤트가 발생한 페이지 URL의 도메인 이름입니다. | site.whatap.io |
| path | String | 라우터 변경 이벤트가 발생한 페이지 URL의 경로입니다. | /8/dashboard |
| query | String | 라우터 변경 이벤트가 발생한 페이지 URL의 parameter입니다. | dataKey=abcd |
| protocol | String | 라우터 변경 이벤트가 발생한 페이지 URL의 프로토콜입니다. | https |
| isComplete | Boolean | 라우터 변경이 완료되지 않은 상태에서 다른 페이지로 라우터를 변경하는 경우 구분하기 위한 값입니다. | true |
리소스 로드 이벤트
사용자가 웹 애플리케이션을 사용 중 리소스를 불러올 때 발생하는 이벤트입니다. 기본 수집 데이터는 다음 과 같습니다.
| 데이터 이름 | 타입 | 설명 | 예시 |
|---|---|---|---|
| startTime | HighResolutionTime | navigationStart로 부터 리소스 요청 시작까지의 시간입니다. | 1000 |
| startTimeStamp | TimeStamp | 리소스 요청 시작 타임스탬프입니다. | 1658057382321 |
| eventID | Long | 리소스를 불러올 때마다 발급하는 고유 ID입니다. | x280or4ok0kqo0 |
| type | ResourceType | 리소스 타입입니다. | image |
| url | String | 리소스 URL입니다. | https://unpkg.com/purecss@2.0.3/build/pure-min.css?dataKey=abcd |
| urlHost | String | 리소스 URL의 도메인 이름입니다. | unpkg.com |
| urlPath | String | 리소스 URL의 경로입니다. | /purecss@2.0.3/build/pure-min.css |
| urlQuery | String | 리소스 URL의 parameter입니다. | dataKey=abcd |
| urlProtocol | String | 리소스 URL의 프로토콜입니다. | https |
| is3rdParty | Boolean | 3rd party로 요청한 리소스를 구분하기 위한 값입니다. | false |
| timing.duration | HighResolutionTime | 리소스 다운로드 완료까지 소요된 시간입니다. | 61 |
| timing.size | Number | 리소스 인코딩 사이즈입니다. | 20 |
| timing.redirect | TimeSet | http 리디렉션의 소요시간입니다. | {duration: 10, start: 315} |
| timing.cache | TimeSet | app cache 리소스를 불러오는 소요 시간입니다. | {duration: 5, start: 325} |
| timing.dns | TimeSet | 리소스 도메인 탐색 소요시간입니다. | {duration: 5, start: 330} |
| timing.connect | TimeSet | TCP 연결 설정의 소요 시간입니다. | {duration: 6, start: 335} |
| timing.ssl | TimeSet | ssl handshake 프로세스 소요 시간입니다. | {duration: 5, start: 336} |
| timing.firstByte | TimeSet | 브라우저가 서버에 리소스를 요청하고 첫 번째 바이트를 수신할 때까지의 소요 시간입니다. | {duration: 10, start: 341} |
| timing.download | TimeSet | 리소스 다운로드 소요 시간입니다. | {duration: 100, start: 341} |
| resourceInfo.method | String | 리소스 요청 메소드입니다. | POST |
| resourceInfo.status | Number | 리소스 요청 상태입니다. | 200 |
에러 이벤트
사용자가 웹 애플리케이션 사용 중 브라우저에서 발생한 에러입니다. 기본 수집 데이터는 다음과 같습니다.
| 데이터 이름 | 타입 | 설명 | 예시 |
|---|---|---|---|
| message | String | 에러 발생 시 메시지 정보입니다. | SyntaxError: Unexpected end of JSON input |
| stack | String | 에러 발생 시 스택 정보입니다. | at printWarning (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:86:30) at error (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:60:7) |
| timestamp | TimeStamp | 에러 발생 시점의 타임스탬프입니다. | 1658057382321 |
| type | ErrorType | 에러 타입입니다. | onError |
| status | Number | 에러 타입이 xhr, fetch의 경우 수집하는 에러 상태값입니다. | 501 |
| url | String | 에러 타입이 xhr, fetch의 경우 AJAX 요청 URL입니다. | https://site.whatap.io/yard/api?pcode=8&type=summary |
코어 웹 바이탈 이벤트
코어 웹 바이탈(Core Web Vitals)은 웹 콘텐츠 이용자의 사용 경험에 영향을 미치는 다양한 측정값들 중 구글이 중요하다고 강조하는 3가지 지표입니다. 기본 수집 데이터는 다음와 같습니다.
| 데이터 이름 | 타입 | 설명 | 예시 |
|---|---|---|---|
| lcp | HighResolutionTime | Largest Contentful Paint(LCP), 페이지를 처음 불러오기 시작한 시간을 기준으로 뷰포트 내에 있는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간을 보고합니다. | 12334 |
| fid | HighResolutionTime | First Input Delay(FID), 사용자가 페이지와 처음 상호 작용할 때(예: 링크를 클릭하거나 버튼을 탭할 때, 사용자 지정 JavaScript 기반 컨트롤을 사용할 때)부터 해당 상호 작용에 대한 응답으로 브라우저가 실제로 이벤트 핸들러 처리를 시작하기까지의 시간을 측정합니다. | 7 |
| cls | Number | Cumulative Layout Shift(CLS)는 동적으로 불러온 콘텐츠로 예기치 못한 레이아웃 이동을 수치화하여 표현한 점수입니다. | 2 |