Post

Enriching Website Monitoring Data through Custom Events and User Timings

Instana captures a lot of information about activities happening on websites through our website monitoring, also known as end-user or real-user monitoring. Information about page loads, page transitions, HTTP calls, errors and more are collected as they are happening within your users’ web browsers and transmitted to Instana for analysis, enrichment, presentation and alerting. You can even look at individual visits to your website in order to understand the complete path that a user took, e.g. to analyze why a JavaScript error was thrown. This means that our website monitoring is a great out-of-the-box solution for insights into the standard website behavior.

Custom Events

We recently opened up our data collection for insights into non-standard/custom website behavior by means of a custom event API. This powerful mechanism enables you to report information to us that we could otherwise not capture. The custom event system uses the same technical mechanism as all our other standard data collection, which in turn means that you can see aggregations within the website dashboard, analyze custom events via filtering/grouping the way you need, and see exactly which custom events were raised in a single page load!
Here are some of the solutions and benefits our customers have realized leveraging custom events:

  • Instrumentation of a custom WebSocket-based request/response model, including backend correlation,
  • Insights into usage distribution of transport types for WebSocket emulators/abstractions such as SockJS and Socket.IO,
  • Collection of performance data for business intelligence apps that make use of multiple successive page loads between the initiation of a report and actual availability of it,
  • Recording image loading types within product configurators that render the image based on end-user selections on the server. The custom event includes metadata to slice and dice the statistics for various rendering specific attributes.


W3C_User_Timing_API_Custom_Event_Analytics

The previous screenshot shows a breakdown of used transport types for a website leveraging Socket.IO. We are using Instana’s custom event analysis capabilities in order to visualize this, but we could have also done this on a custom dashboard. Reporting of such data to Instana is easy as the following code snippet shows.

ineum('reportEvent', 'socket.io.connect', {
  meta: {
    transport: getSocketTransport()
  }
});

User Timing API

Another way to enhance the information we collect is the User Timing API. User Timing is a W3C recommendation (sometimes also referred to as specification) implemented in all major web browsers (aside from Opera Mini) designed to help web developers gain insights and a deeper understanding for the performance of their websites. In contrast to our custom events API, the User Timing API addresses a smaller set of use cases, but it manages to address these in a vendor-agnostic way with deep web browser integrations.

One common use case for the User Timing API is reporting of custom app initialization timings for single-page applications. These timings are often designed to be aware of the specifics of the websites’ internals and their frameworks.

W3C_User_Timing_API_Custom_Event_Dashboard

Instana automatically turns all User Timings into custom events in order to avoid any data model differences between usages of the two APIs. The previous screenshot shows what a User Timing measure looks like within Instana’s custom event dashboard. You can see how frequently the User Timing was seen, by how many users and what the recorded timings were. But of course, this is not all, as you can dive into full analyze mode via the Analyze Custom Event button.

The screenshot also shows a common use case for modern single-page applications (SPAs): Recording a custom initialization time. Websites implementing a SPA architecture often have non-standard initialization steps inherent to their website or framework used. Custom initialization time measured via User Timing means that they can see exactly when their SPA is ready (which can be quite different than regular page load and paint timings).

The following code snippet shows what this could look like for server-side rendered React apps that make use of React’s client-side hydration mechanism.

ReactDOM.hydrate(
  <App />,
  document.getElementById('app'),
  () => window.performance?.measure?.('react.hydrated')
);

Conclusions

The W3C User Timing API and our custom event API both enable advanced monitoring use cases that can be leveraged to step up your monitoring game. We recommend using the W3C User Timing API wherever possible and to fall back to our custom event API for more complicated cases or when you need to record additional metadata as part of the recorded timing/event.

Play with Instana’s APM Observability Sandbox

Announcement, Developer, Featured, Product
Instana has been leading the Application Performance Monitoring (APM) industry with our automated distributed tracing technology, AutoTrace™. With AutoTrace, Instana has eliminated the need to manually instrument distributed tracing in your environment....
|
Announcement, Featured, Product
Generating performance and error alerts for websites has historically never been an intuitive process. What do we alert on? How do we define the KPIs that we care about? Are we setting...
|
Announcement, Product
The idea is simple, trace every network request from a mobile application and capture the resulting activity on the backend services that process each request. When you do this you will have...
|

Start your FREE TRIAL today!

As the leading provider of Automatic Application Performance Monitoring (APM) solutions for microservices, Instana has developed the automatic monitoring and AI-based analysis DevOps needs to manage the performance of modern applications. Instana is the only APM solution that automatically discovers, maps and visualizes microservice applications without continuous additional engineering. Customers using Instana achieve operational excellence and deliver better software faster. Visit https://www.instana.com to learn more.