With the latest release of our APM tool inspectIT, a new long-awaited feature has been integrated: inspectIT now supports Browser End User Experience Monitoring. This means that for every Java Servlet API based application (or any technology which itself uses the Servlet API), you can now monitor the actually experienced performance of your web front-end via the APIs the internet browsers expose. Examples for such APIs are the Navigation Timing API and the Resource Timing API. All you need to do to use these new capabilities is to adapt your configuration of inspectIT, no changes are needed on your application itself.
Configuring and Enabling EUM
To use the end user monitoring, it is required that that the inspectIT Java Agent has been integrated into the application. Now let’s have a look at the new configuration options:
In this section, you can now enable the end user monitoring and configure it for your needs (the configuration options are described in detail in our documentation).
And that’s it! If you start up the application (in my case Spring Pet Clinic) with this configuration now, the end user monitoring will already perform its duty.
Let the (Monitoring) Games Begin!
Let’s start the Demo Application and open up the welcome page in a browser. The page still looks the same as previously (would be a shame if not), however let us take a look at the source HTML of the page:
As highlighted in the image, two new script tags have appeared right in the beginning of the head section in the source of the page:
- First, a inline script containing our configuration
Now let’s take a look at the actual data. When opening the tracing overview in the inspectIT UI, we can see traces with the origin “Browser”. These are traces which start at the users browser. In the shown screenshot, we opened the trace details view for the first trace with origin “Browser”, which is the request of loading the welcome page.
Next we can try something else: As we enabled the “Listener Instrumentation” Module, we are able to see event listeners of our application (e.g. clicks), which execute performance relevant actions. If we click on a link of our demo application, we will find the following trace in the inspectIT UI:
For the next section it is important to know that our demo application is built as a single page application. This means that, for example, page links do not cause the entire page to be reloaded, but instead the application dynamically changes the page contents based on the data it queries via AJAX requests. This behavior can be nicely observed when inspecting the trace shown in the screenshot: The click-listener executed first loads an empty HTML template. Subsequently, data is loaded from the back end using another AJAX request. Hereby, we can see that it traverses through multiple back end services, in our case api-gateway and customer-service, before it is returned. This means you can now fully observe traces from the initial click to the resulting back-end actions, like SQL queries!
Long-Term Monitoring with influxDB
In addition to enriching traces with front-end information, enabling the end user monitoring will also store records about the front-end request performance in an influxDB instance, if it is connected to the CMR. With EUM enabled, three influx time series are generated: One for all page-load requests, including the Navigation Timings, one for all resource loads, and one for all AJAX requests. These are generated and populated if the corresponding EUM modules are active. In addition, if you have the “Browser Meta-Info Capturing” Module active, information like the browser or the device of the users are also attached to each measurement point.
Based on this data, it is possible to derive long term usage statics and information on which browsers you need to focus when optimizing your application. The data is best viewed with Grafana Dashboards, for which we already provide sample dashboard configurations. A screenshot of the provided “EUM Summary” dashboard is shown below, which is useful to get a general overview over the health of your application from the end-user perspective:
Therefore, if you enjoyed this post (which I hope so) I recommend you to stay tuned on the EUM feature and to continue the journey yourself by trying it out on your application!