Enriching Website Monitoring Data through Custom Events and User Timings

Enriching Website Monitoring Data

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.


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.


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.

  <App />,
  () => window.performance?.measure?.('react.hydrated')


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

Developer, Engineering, Product
Laravel is one of the most beloved web framework for PHP. It was developed as an alternative to CodeIgniter and today is the most popular PHP project on GitHub based on the...
Announcement, Developer, 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, 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...

Start your FREE TRIAL today!

Instana, an IBM company, provides an Enterprise Observability Platform with automated application monitoring capabilities to businesses operating complex, modern, cloud-native applications no matter where they reside – on-premises or in public and private clouds, including mobile devices or IBM Z.

Control hybrid modern applications with Instana’s AI-powered discovery of deep contextual dependencies inside hybrid applications. Instana also gives visibility into development pipelines to help enable closed-loop DevOps automation.

This provides actionable feedback needed for clients as they to optimize application performance, enable innovation and mitigate risk, helping Dev+Ops add value and efficiency to software delivery pipelines while meeting their service and business level objectives.

For further information, please visit instana.com.