Tracking and monitoring the end user interactions with your Visual Builder application is key in creating a better user experience. Knowing information such as which pages are being used the most, the performance of REST calls, and how often do users encounter errors can help deliver a better user experience to customers. It can help you tune your app to achieve better performance too. The new Oracle Application Performance Monitoring (Oracle APM), part of the Oracle Cloud Observability and Management Platform, provides a great solution for tracking what is happening in your Visual Builder apps from the client perspective. In this blog we'll show you how to get the combination of VB and APM working.
The new version of Oracle APM, released earlier this month, includes a browser agent solution that can be used for tracking any web app. The data it collects is gathered in a queriable repository and let you explore multiple dimensions of your app. From looking at high-level statistics about app usage such as type of browser used, overall response times and error rates – all the way to individual interactions and the time it took to invoke specific REST calls in a page.
You can use the free forever APM level to get started. So, you should already have everything you need to experiment with VB tracing using APM in your current account. Start by spinning up your own APM Domain, once that is set follow the steps in the video below to get VB app data.
In the demo you can see some of the information we can get on an app by hooking it into the APM browser agent. The documentation for setting up the APM browser agent is here, it basically involves injecting some JavaScript and a JS library into your pages. Since VB creates standard HTML pages, it is very easy to apply the same in our case.
Adding APM Tracking to VB App
To inject the APM browser agent into a VB app include the code needed for it in your app's index.html page. Simply click your Web app and look at the HTML code tab. Then add the APM browser agent code from the APM doc into the header area – similar to this:
<script>
window.apmrum = (window.apmrum || {});
window.apmrum.serviceName='VBCS';
window.apmrum.webApplication='aNameForYourApp';
window.apmrum.ociDataUploadEndpoint='yourserver.apm-agt.yourregion-1.oci.oraclecloud.com';
window.apmrum.OracleAPMPublicDataKey='YourKey';
</script>
<script async crossorigin="anonymous"src="https://yourserver.apm-agt.yourRegion.oci.oraclecloud.com/static/jslib/apmrum.min.js">
</script>
With this code in place, APM will start tracking your app and you will see information about it in the APM dashboard and trace explorer.
Adding VB Specific Data Points
Beyond all the built-in attributes that APM tracks for you, it also allows you to define additional custom attributes that you want to track. You control the assignment of values into these attributes. In the video, we added a custom attribute that is populated with the name of the VB page that the user is on. We also made sure to populate the Username attribute that APM tracks with the username that is currently logged into your app.
To add the username, we created an application level JS method that looks like this:
AppModule.prototype.setAPMUser = function (arg1) {
window.apmrum.username = arg1;
};
We then called this method in the action chain associated with the vbEnter event at the application level. We mapped the username into the parameter for this function in our expression builder. This is invoked very early in our app lifecycle before all the REST calls and before the first page is even shown.
To populate the page name that we are on into the custom attribute we modify the pageModule function of each page to look like this.
define([], function () {
use strict;
var PageModule = function PageModule() {
window.apmrum.udfAttribute2 = function () {
return "search-start";
}
};
return PageModule;
});
The function in row 4 sets the value for the custom Attribute2 with the name of the page that we are returning in the return statement.
The APM doc has more info on working with the 10 custom attributes.
Queries in the Tracer
The Trace Explorer in APM lets you see all the recent transactions, but in many cases you'll want to customize the query to get to the specific info you need. You'll be using a SQL like syntax for filtering and summarizing data – you can learn more about that in the doc. The following are examples of queries used in the demo to help you get started:
- How many activities of each type – show (traces) * group by ApmrumType
- How many invocations of each REST service – show (spans) * group by HttpUrlPath
- What actions resulted in errors – SHOW SPANS * where Error = 'true'
- How many page views for each page – show (traces) count_distinct(Username), ApmrumAttribute2 as pagename group by ApmrumAttribute2
Summary
As the demo shows, it is very easy to get started with APM in VB. The combination of Oracle Visual Builder and Oracle Application Performance Monitoring can play a key part in helping you deliver better user experience to your customers. Take it for a spin on your apps too.