브라우저 에이전트 수집 데이터
와탭 브라우저 에이전트는 사용자의 브라우저에서 발생한 이벤트를 수집하고, 수집한 데이터를 재가공해 모니터링에 활용합니다. 모든 수집 데이터는 사용자 세션에 종속적입니다.
타입(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 |
페이지 로드 시간
페이지 로드 시간은 웹 브라우저에서 특정 페이지의 URL을 요청한 순간부터 페이지의 모든 리소스(HTML, CSS, JavaScript, 이미지 등)가 다운로드 및 처리되고, 브라우저가 페이지를 완전히 렌더링하여 사용 가능한 상태가 되기까지의 총 시간을 의미합니다.
페이지 로드 시간을 수집하기 위해 브라우저 에이전트는 브라우저에서 제공하는 Web API 중 하나인 Navigation Timing API를 통해 수집합니다. 이 API를 통해 각 단계별 시간(예: 요청 시작, 응답, 렌더링 시작 및 완료)을 측정하여 제공합니다.
Navigation timing
PerformanceTiming 인터페이스를 통해 접근할 수 있는 밀리초 단위의 측정 이벤트들이 있습니다. 다음은 이러한 이벤트들이 발생하는 순서대로 나열한 목록입니다.
| 이벤트 | 설명 | 비고 |
|---|---|---|
navigationStart | 페이지 탐색 시작 시점입니다. | - |
redirectStart | 첫 번째 HTTP 리다이렉트 시작 시점입니다. | 리다이렉트가 없으면 값은 0입니다. |
redirectEnd | 마지막 리다이렉트의 응답 수신 완료 시점입니다. | 리다이렉트가 없으면 값은 0입니다. |
fetchStart | 브라우저가 리소스를 가져오기 위한 프로세스를 시작하는 시점입니다. | 캐시 조회가 시작되는 시점이기도 합니다. |
domainLookupStart | 도메인 이름에 대한 DNS 조회 시작 시점입니다. | 브라우저가 URL의 호스트 이름을 IP 주소로 변환하기 시작합니다. 캐시된 DNS 정보가 있거나 로컬 hosts 파일에 정보가 있다면 fetchStart와 동일한 값을 가질 수 있습니다. |
domainLookupEnd | DNS 조회 완료 시점입니다. | 브라우저가 도메인에 대한 IP 주소를 성공적으로 받아옵니다. DNS 조회를 실패하더라도 이 시점으로 기록합니다. |
connectStart | 서버와의 연결 시작 시점입니다. | TCP 연결을 시작합니다. 만약 지속적인 연결(persistent connection)을 재사용하는 경우라면 domainLookupEnd와 동일한 값을 가질 수 있습니다. |
connectEnd | 서버와의 연결이 완전히 설정된 시점입니다. | TCP 핸드셰이크를 완료합니다. HTTPS의 경우 SSL/TLS 핸드셰이크도 이 시점까지 완료합니다. 연결이 실패하더라도 이 시점으로 기록합니다. |
secureConnectionStart | HTTPS 연결 시작 시점입니다. | 해당하는 경우에만 기록합니다. |
requestStart | 서버에 리소스를 요청하기 시작한 시점입니다. | - |
responseStart | 서버로부터 응답의 첫 바이트(byte)를 받기 시작한 시점입니다. | HTTP 응답 헤더의 첫 바이트(byte)를 받은 시점으로 서버의 초기 응답 시간(Time to First Byte, TTFB)을 계산하는 데 사용합니다. |
responseEnd | 서버로부터 마지막 바이트(byte)를 받은 시점 | 전체 응답(헤더와 본문)을 모두 받은 시점입니다. 리다이렉트 응답이 있으면 최종 응답의 마지막 바이트(byte)를 받은 시점입니다. |
domInteractive | DOM 파싱이 끝나고 스크립트 실행 준비가 된 시점입니다. | - |
domContentLoadedEventStart | DOMContentLoaded 이벤트가 발생한 시점입니다. | 이 때는 HTML 문서의 로딩과 파싱이 완료되었으며 DOM 트리가 완전히 구축되었음을 의미합니다. |
domContentLoadedEventEnd | 모든 DOMContentLoaded 이벤트 핸들러의 실행이 완료된 시점입니다. | - |
domComplete | DOM 로딩과 하위 리소스 로딩이 완료된 시점입니다. | - |
loadEventStart | load 이벤트 발생 직전 시점입니다. | DOM이 완전히 구성되고 모든 리소스를 로드한 직후입니다. window.onload 이벤트 핸들러가 실행되기 직전의 시점입니다. |
loadEventEnd | 모든 load 이벤트 핸들러의 실행이 완료된 시점입니다. | 페이지와 모든 종속 리소스를 완전히 로드한 상태입니다. |
라우터 변경 이벤트
사용자가 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 |