Application of the browser agent
To use the WhaTap monitoring service, after Sign up, create a project and then apply the WhaTap browser agent to web applications.
See the following video guide.
Creating a project
Create a project before installing the agent.
-
Log in to the WhaTap Monitoring Service.
-
In the left side menu, click All Projects > + Project.
-
On the Select product screen, select the product you want to install.
-
Enter or select the following items:
-
Project name: Enter the project name.
-
Data server region: Select the data server region. A region is a group of data centers that provide cloud services. Your data will be stored in the selected region.
-
Time zone: Set the time zone to be used for alerts and report generation.
-
Notification language setting: Set the language for alert notifications. (Supports Korean and English)
-
Project groups: Group multiple projects for easier management. Select a group if applicable.
-
Project description: Add additional details or a description for your project.
-
-
After completing all settings, click the Creating a project button.
For more information about groups, see the related document.
If you add a project while an organization is selected, you must set the Groups of organization field.
Checking the project access key
Project access key is the unique ID for activating the WhaTap services.
In the installation guide section, select Getting the access key. After automatic reception of project access key, proceed to the next step.
After a project has been created, the Agent installation page appears automatically. If the Agent installation does not appear, select All projects on the left and then select a newly created project.
Installing the WhaTap browser agent
Follow the instructions on the agent installation screen to apply the WhaTap browser agent code to your web application.
Data collection sampling
The WhaTap browser agent collects data based on the user session. You can set the percentage of all sessions collected from 0 to 100.
WhaTap browser agent script
The WhaTap browser agent is provided in the form of an inline script. Add the script code provided by the installation guide to the top in the <head> tag of any HTML page to monitor.
Select one of the following two methods to apply the agent.
-
Async (Asynchronous Load): Loads the WhaTap browser agent asynchronously in your web application.
-
It does not affect the load performance of your web application.
-
There may be missing data such as AJAX or errors that occurred before loading the browser agent.
-
-
Sync (Synchronous Load): Loads the WhaTap browser agent synchronously in your web application.
-
It is recommended if you want to collect all data when loading your web application.
-
It may affect the load performance of your web application.
-
Setting the WhaTap browser agent's options
It sets the options to apply to the WhaTap browser agent. The options can be set in the Config object of the installation script. You can set the project access keys, percentage of all user sessions, resource domains to exclude from collection, and such.
config: {
projectAccessKey: {projec_access_key},
pcode: {pcode},
sampleRate: 100,
ignoreOrigins: [ 'https://ignore-site.com/', /^(https?://)([^/]*)(ignore-site.io)(/)(.*)/i ],
}
Option parameters
projectAccessKey String required
It is a project access key. You can see in the project installation guide (Management > Agent Installation).
config: {
projectAccessKey: {projec_access_key},
pcode: {pcode},
sampleRate: 100,
proxyBaseUrl: "https://repo.whatap-browser-agent.io/rum/prod/v1/whatap-browser-agent.js"
}
pcode Number required
It is a project access key. You can see in the project installation guide (Management > Agent Installation).
config: {
projectAccessKey: {projec_access_key},
pcode: {pcode},
sampleRate: 100,
proxyBaseUrl: "https://repo.whatap-browser-agent.io/rum/prod/v1/whatap-browser-agent.js"
}
sampleRate Number required
You can set the ratio of user sessions to be collected. You can set it from 0 to 100.
config: {
projectAccessKey: {projec_access_key},
pcode: {pcode},
sampleRate: 100,
proxyBaseUrl: "https://repo.whatap-browser-agent.io/rum/prod/v1/whatap-browser-agent.js"
}
proxyBaseUrl String required
It is the agent collection data transmission URL.
config: {
projectAccessKey: {projec_access_key},
pcode: {pcode},
sampleRate: 100,
proxyBaseUrl: "https://repo.whatap-browser-agent.io/rum/prod/v1/whatap-browser-agent.js"
}
ignorePageUrls Array<string | RegExp> optional
It is a list of page URLs to exclude from collection. String matching is performed using the startsWith method.
config: {
projectAccessKey: {projec_access_key},
pcode: {pcode},
sampleRate: 100,
proxyBaseUrl: "https://repo.whatap-browser-agent.io/rum/prod/v1/whatap-browser-agent.js"
ignorePageUrls: ["https://test.webpage.com/", "http://localhost:2003/page1/", /^.localhost.$/i]
}
ignoreResources Array<string | RegExp> optional
It is a list of resource URLs to exclude from collection. String matching is performed using the startsWith method.
config: {
projectAccessKey: {projec_access_key},
pcode: {pcode},
sampleRate: 100,
proxyBaseUrl: "https://repo.whatap-browser-agent.io/rum/prod/v1/whatap-browser-agent.js"
ignoreResources: ["https://test.web.com/yard/api/flush", "http://localhost:2003/whatap-browser-agent.js", /^.\/path1\/api.$/i]
}
ignoreErrors Array<string | RegExp> optional
It is a list of browser errors to exclude from collection. String matching is performed using the includes method.
config: {
projectAccessKey: {projec_access_key},
pcode: {pcode},
sampleRate: 100,
proxyBaseUrl: "https://repo.whatap-browser-agent.io/rum/prod/v1/whatap-browser-agent.js"
ignoreErrors: ["cannot read", "cors", "basic"]
}
collectUserClick Boolean optional
Default false
It can collect user click events. For the method to find the collected data, see the following.
config: {
projectAccessKey: {projec_access_key},
pcode: {pcode},
sampleRate: 100,
proxyBaseUrl: "https://repo.whatap-browser-agent.io/rum/prod/v1/whatap-browser-agent.js"
collectUserClick: true
}
sessionReplaySampleRate Number optional
Default 0
It is the ratio of sessions to collect the session replay data. You can set from 0 to 100 for user sessions to collect.
For example, if sampleRate is set to 50 and sessionReplaySampleRate to 20, 50% of all sessions are collected, and for only 20% of those sessions, the session replay data is collected.
config: {
projectAccessKey: {projec_access_key},
pcode: {pcode},
sampleRate: 100,
proxyBaseUrl: "https://repo.whatap-browser-agent.io/rum/prod/v1/whatap-browser-agent.js"
sessionReplaySampleRate: 50
}
sessionReplayMaskAllTexts Boolean optional
Default true
If you set the value to false, all text data is collected without masking.
config: {
projectAccessKey: {projec_access_key},
pcode: {pcode},
sampleRate: 100,
proxyBaseUrl: "https://repo.whatap-browser-agent.io/rum/prod/v1/whatap-browser-agent.js"
sessionReplaySampleRate: 50,
sessionReplayMaskAllTexts: false
}
sessionReplayMaskAllInputs Boolean optional
Default true
If you set the value to false, the data in all input fields is collected without masking.
config: {
projectAccessKey: {projec_access_key},
pcode: {pcode},
sampleRate: 100,
proxyBaseUrl: "https://repo.whatap-browser-agent.io/rum/prod/v1/whatap-browser-agent.js"
sessionReplaySampleRate: 50,
sessionReplayMaskAllInputs: false
}
sessionReplayCollectAllBrowser Boolean optional
Default false
The session replay data is collected even in the browsers that do not support requestIdleCallback(). e.g. Safari, Safari on iOS
config: {
projectAccessKey: {projec_access_key},
pcode: {pcode},
sampleRate: 100,
proxyBaseUrl: "https://repo.whatap-browser-agent.io/rum/prod/v1/whatap-browser-agent.js"
sessionReplaySampleRate: 50,
sessionReplayCollectAllBrowser: true
}
ignoreStatusZero Boolean optional
Default false
This option excludes data from collection when the status code of the AJAX request is 0.
config: {
projectAccessKey: {project_access_key},
pcode: {pcode},
sampleRate: 100,
proxyBaseUrl: "https://repo.whatap-browser-agent.io/rum/prod/v1/whatap-browser-agent.js",
ignoreStatusZero: true
}
-
For more information about the session replay, see the following.
-
For more information about the browsers that support session replay collection, see the following.
Next steps
-
Collecting custom events
To identify the web service issues and improve user experience through browser monitoring, it provides an interface that allows developers and operators to additionally collect desired events that occur on web pages. For more information about custom events, see the following.
-
Setting the actual user ID
In the browser monitoring, you can collect data by setting the user ID via the actual user's login ID or email address. You can check the user session performance and event information based on the actual login ID, and then check the browser's errors to identify problems. For more details, see the following.
-
Configuring the session replay
Session replay is a feature that allows to record and replay all events performed by users on the website. This feature allows you to reproduce user behaviors such as clicking, scrolling, typing, and page switching. This helps you understand exactly how users actually interact with the website. For more details, see the following.
-
Starting the monitoring
Go to WhaTap Monitoring Service and then start the browser monitoring. Select a created project and then go to Dashboard > Browser Monitoring Dashboard. You can see the monitoring status. For more information about Browser Monitoring Dashboard, see the following.