Browser agent collection data
The WhaTap browser agent collects events that occur from each user's browser, reprocesses the collected data, and uses the data for monitoring. All collected data is user session dependent.
Types
The following lists the types of data that the WhaTap browser agent collects.
- Long: A unique ID data type in the long to string32 format.
- TimeStamp: Time stamp upon measurement, in milliseconds (ms).
- HighResolutionTime: Elapsed time in milliseconds (ms)
- TimeSet: The start time stamp and the elapsed time are displayed for display of a timeline.
- It is any of ResourceType :
document,xhr,fetch,beacon,css,script,image,font,media, andother. - ErrorType : It is any of
console,onError,promiseRejection,fetchError,xhrError, andmessageError.
Common collection data
When any event occurs, the collected basic data is as follows:
| Data name | Type | Description | Example |
|---|---|---|---|
| sessionID | Long | A unique ID issued when a web application user starts navigating to a web page. The maximum duration of a session is 4 hours, and the ID expires after 15 minutes of inactivity. IDs are stored in browser cookies. | x7dbvq64ga80sd |
| userID | Long | It is a unique ID issued when a web application user first connects and has no expiration time. IDs are stored in browser cookies. | z7eqnnitlc19j9 |
| sendEventID | Long | This is a unique request ID issued when data is transmitted to the collection server after an event occurs. | x4rp4tnuq25i0h |
| page.url | String | The URL of the page where an event occurred. | https://site.whatap.io/8/dashboard?dataKey=abcd |
| page.host | String | The URL domain name of the page where an event occurred. | site.whatap.io |
| page.path | String | The URL path of the page where an event occurred. | /8/dashboard |
| page.query | String | The URL parameter of the page where an event occurred. | dataKey=abcd |
| page.protocol | String | The URL protocol of the page where an event occurred. | https |
| page.title | String | The document title of the page where an event occurred. | SaaS Monitoring No.1 WhaTap Monitoring | WhaTap |
| userAgent | String | The useragent of the browser where an event occurred. | 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 |
Page Load Event
This event occurs when you access the web application and the page content is fully loaded. The basic collection data is as follows:
| Data name | Type | Description | Example |
|---|---|---|---|
| navigationTiming.startTimeStamp | TimeStamp | It is the time stamp of navigationStart. Time stamp of the page that starts loading | 1658057382311 |
| navigationTiming.eventID | Long | This is a unique ID issued when a page loading event occurs. | x7mkg24tags307 |
| navigationTiming.redirect | TimeSet | Time taken for HTTP redirection. | {duration: 10, start: 315} |
| navigationTiming.cache | TimeSet | Time taken to load the app cache resources. | {duration: 5, start: 325} |
| navigationTiming.dns | TimeSet | Time taken for browsing the website domain. | {duration: 5, start: 330} |
| navigationTiming.connect | TimeSet | Time taken for TCP connection setting. | {duration: 6, start: 335} |
| navigationTiming.ssl | TimeSet | Time taken for the ssl handshake process. | {duration: 5, start: 336} |
| navigationTiming.download | TimeSet | Time taken for document downloading. | {duration: 100, start: 341} |
| navigationTiming.firstByte | TimeSet | It is the time taken for the browser to request a document from the server and receive the first byte. | {duration: 10, start: 341} |
| navigationTiming.domInteractive | HighResolutionTime | It is the time when the browser finished parsing the document from navigationStart. DOM is ready. | 441 |
| navigationTiming.domContnentLoaded | TimeSet | Time taken to build the DOM tree. | {duration: 50, start: 441} |
| navigationTiming.domComplete | HighResolutionTime | This is the time between navigationStart and completion of loading documents and resources. | 491 |
| navigationTiming.domLoad | TimeSet | Time taken for the onload event. | {duration: 1, start: 491} |
| navigationTiming.backendTime | HighResolutionTime | Time from navigationStart to resource downloading. | 126 |
| navigationTiming.frontendTime | TimeSet | Time from browser parsing completion to load event completion. | {duration: 51, start: 441} |
| navigationTiming.loadTime | HighResolutionTime | Time from navigationStart to loadEventEnd. | 492 |
| totalDuration | HighResolutionTime | This is the time between navigationStart and completion of importing the final page. | 550 |
Page load time
Pageload time is the total time from the moment the web browser requests the URL of a page until all of the page's resources (HTML, CSS, JavaScript, images, etc.) are downloaded and processed, and the browser completely renders the page so that it is available.
To collect page load times, browser agents collect them through the Navigation Timing API, one of the web APIs provided by the browser. This API provides measurements of the times for each step (e.g. request start, response, rendering start and completion).
Navigation timing
There are measurement events accessible through the PerformanceTiming interface that are measured in milliseconds. The following is a list of those events in the order in which they occur.
| Event | Description | Remarks |
|---|---|---|
navigationStart | Starting point of page navigation. | - |
redirectStart | First HTTP redirection time point. | If there is no redirection, the value is 0. |
redirectEnd | Time point when the response to the last redirection has been received. | If there is no redirection, the value is 0. |
fetchStart | Time point when the browser begins the process of fetching resources. | Time point when cache lookup has begun. |
domainLookupStart | Starting point for DNS lookups for domain names. | The browser begins converting the host name in the URL into an IP address. It can have the same value as fetchStart if there is cached DNS information or information in the local hosts file. |
domainLookupEnd | Time point when the DNS lookup has been completed. | The browser successfully obtains the IP address for the domain. Even if the DNS lookup fails, it is logged with this time point. |
connectStart | Time point when the connection to the server has begun. | TCP connection begins. If you are reusing the persistent connection, you can have the same value as domainLookupEnd. |
connectEnd | Time point when the connection to the server has been established completely. | The TCP handshake is completed. For HTTPS, the SSL/TLS handshake is also completed by this time point. Even if the connection fails, it is logged with this time point. |
secureConnectionStart | Time point when the HTTPS connection has begun. | It is recorded only when applicable. |
requestStart | Time point when requesting resources to the server has begun. | - |
responseStart | Time point when receiving the first byte of the response from the server has begun. | It is used to calculate the server's initial response time (Time to First Byte, TTFB) starting from the time the first byte of the HTTP response header was received. |
responseEnd | Time point at which the last byte has been received from the server. | Time point when the entire response (header and body) has been received. If you have a redirection response, it is the time point when the last byte of the final response has been received. |
domInteractive | It is the time point when DOM parsing has been finished and the script is ready. | - |
domContentLoadedEventStart | Time point when the DOMCONTENTLOADED event has occurred. | At this time, the loading and parsing of the HTML document have been completed and the DOM tree has been completely built. |
domContentLoadedEventEnd | Time point at which all DOMContentLoaded event handlers have completed execution. | - |
domComplete | Time point at which both DOM loading and subresource loading have been completed. | - |
loadEventStart | Time point just before the load event. | Time point immediately after the DOM is fully configured and all resources have been loaded. Moment just before the window.onload event handler has been executed. |
loadEventEnd | Time point at which all load event handlers have completed execution. | The page and all subresources are fully loaded. |
Router change event
This event occurs when you move to a page in a single page application (SPA) type web application. The basic collection data is as follows:
| Data name | Type | Description | Example |
|---|---|---|---|
| loadTime | HighResolutionTime | Time taken to change the router. | 500 |
| startTimeStamp | TimeStamp | Timestamp of the router change start time. | 1658057382311 |
| endTimeStamp | TimeStamp | Timestamp of the router change completion time. | 1658057382811 |
| pageLocation | String | The URL of the page where a router change event occurred. | https://site.whatap.io/8/dashboard?dataKey=abcd |
| host | String | URL domain name of the page URL where a router change event occurred. | site.whatap.io |
| path | String | The URL path of the page where a router change event occurred. | /8/dashboard |
| query | String | The URL parameter of the page where a router change event occurred. | dataKey=abcd |
| protocol | String | The URL protocol of the page where a router change event occurred. | https |
| isComplete | Boolean | This value is used to distinguish when a router is changed to another page while the router change is not completed. | true |
Resource Load Event
This event occurs when you call a resource while using the web application. The basic collection data is as follows:
| Data name | Type | Description | Example |
|---|---|---|---|
| startTime | HighResolutionTime | Time from navigationStart to the resource request start. | 1000 |
| startTimeStamp | TimeStamp | Timestamp of the resource request start. | 1658057382321 |
| eventID | Long | A unique ID issued each time a resource is fetched. | x280or4ok0kqo0 |
| type | ResourceType | Resource type. | image |
| url | String | Resource URL. | https://unpkg.com/purecss@2.0.3/build/pure-min.css?dataKey=abcd |
| urlHost | String | Domain name of the resource URL. | unpkg.com |
| urlPath | String | Path of the resource URL. | /purecss@2.0.3/build/pure-min.css |
| urlQuery | String | Parameter of the resource URL. | dataKey=abcd |
| urlProtocol | String | Protocol of the resource URL. | https |
| is3rdParty | Boolean | This value is used to identify resources requested by the 3rd party. | false |
| timing.duration | HighResolutionTime | Time taken to complete the resource download. | 61 |
| timing.size | Number | Resource encoding size. | 20 |
| timing.redirect | TimeSet | Time taken for HTTP redirection. | {duration: 10, start: 315} |
| timing.cache | TimeSet | Time taken to load the app cache resources. | {duration: 5, start: 325} |
| timing.dns | TimeSet | Time taken to search the resource domain. | {duration: 5, start: 330} |
| timing.connect | TimeSet | Time taken for TCP connection setting. | {duration: 6, start: 335} |
| timing.ssl | TimeSet | Time taken for the ssl handshake process. | {duration: 5, start: 336} |
| timing.firstByte | TimeSet | It is the time taken for the browser to request resources from the server and receive the first byte. | {duration: 10, start: 341} |
| timing.download | TimeSet | Time taken to complete the resource download. | {duration: 100, start: 341} |
| resourceInfo.method | String | Resource request method. | POST |
| resourceInfo.status | Number | Resource request state. | 200 |
Error event
It is an error that occurred from the browser while you are using the web application. The basic collection data is as follows:
| Data name | Type | Description | Example |
|---|---|---|---|
| message | String | Message displayed when an error occurs. | SyntaxError: Unexpected end of JSON input |
| stack | String | Stack information displayed when an error occurs. | 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 | Timestamp of an error occurred. | 1658057382321 |
| type | ErrorType | Error type. | onError |
| status | Number | This is the error status value to be collected when the error type is xhr or fetch. | 501 |
| url | String | This is the AJAX request URL when the error type is xhr or fetch. | https://site.whatap.io/yard/api?pcode=8&type=summary |
Core Web Vitals Event
Core Web Vitals are three metrics that Google considers important, among various measurement values that affect the user experience of web content. The basic collection data is as follows:
| Data name | Type | Description | Example |
|---|---|---|---|
| lcp | HighResolutionTime | Largest Contentful Paint (LCP), which reports the rendering time of the largest image or text block within the viewport based on the first page loaded time. | 12334 |
| fid | HighResolutionTime | First Input Delay (FID), from the first time you interact with the page (e.g. clicking a link, tapping a button, or using a custom JavaScript-based control) to the time to start the event handler in response to that interaction. | 7 |
| cls | Number | Cumulative Layout Shift (CLS) is a score that quantifies the unexpected layout shifts caused by the dynamically loaded content. | 2 |