Monitoring websites

Website monitoring, often called End-User Monitoring (EUM), or Real-User Monitoring (RUM), is an important tool to understand digital user experience.

Concepts

Instana supports website monitoring by analyzing actual browser request times and route loading times. It allows detailed insights into the web browsing experience of users, and deep visibility into application call paths.

Website Monitoring Overview
Figure 1. Website monitoring overview

Loaded asynchronously into the website, the agent reports its findings to Instana in the form of beacons. This beacon data can be found in an aggregated form within the website dashboards in the Instana UI. The dashboards help explore the behavior and speed of websites. They are accessible to a wide audience and to answer the most common questions. More specific questions and hypotheses can be answered by using analyze capabilities.

The following screen capture shows collected data for a page load, which combines a user's browser activity and links to backend tracing.

Website Trace
Figure 2. Website trace

Installation

The Instana website monitoring solution works by using a lightweight JavaScript agent, which is embedded into the monitored website. To install the JavaScript agent, access the Websites section in the Instana UI to start tracking website performance data. The Instana UI guides you through the installation process.

Instana user interface guiding through the setup process
Figure 3. Instana user interface guiding through the setup process

Wordpress monitoring

If you want to use website monitoring with Wordpress, use the WP Instana EUM plug-in.

For more information about Wordpress, see What is Wordpress.

Enable Subresource Integrity

Instana website monitoring provides you with the option to enable Subresource Integrity (SRI) for the tracking script. Users can enable or disable SRI for their tracking script and also choose a specific version of the agent with SRI. In the tracking script, the JavaScript agent version is added, and a new field integrity can be seen with a base64-encoded sha384 hash.

Enabling subresource integrity for website monitoring
Figure 4. Enabling subresource integrity for website monitoring

When Subresource Integrity is disabled, the tracking script defaults to the latest version of the JavaScript agent, but does not contain the integrity field.

Disabling subresource integrity for website monitoring
Figure 5. Disabling subresource integrity for website monitoring

SRI is a security feature that ensures browsers can verify the resources that they fetch. Although enabling SRI is recommended from a security perspective, you must manually ensure that you are using the latest version of the agent from the dropdown. If you decide to disable it, you are using the latest version of the agent but ensure that you are in a secure network environment.

Enabling auto page transition detection

If your website is a single page application (SPA), you can set the agent to automatically detect page transitions within your website. Enabling auto detection for page transitions eliminates the need to modify the application, adding calls to the agent for page transitions. Auto detection for page transitions is enabled by default for single-page applications. To enable this option, select Single page applications and then set Enable auto detection for page transitions to Yes.

Selecting a single page application
Figure 6. Single page application

When auto page transition detection is enabled, the agent sends beacons, which use either the page title or URL as the page name. Having a meaningful page name is helpful when you analyze beacons for your website. For websites, which already have a meaningful page title, use the page title as the page name in beacons.

When you use the URL as the page name, it can be helpful to convert the URL to a more meaningful name in the beacon. You can provide a regular expression that converts a URL pattern to a descriptive name.

To provide a regular expression, complete the following steps:

  1. Select the "Enable regex mapping" slider.
  2. Enter one or more regular expressions that describe your page URLs, with a descriptive name for each. Page URLs matching a regular expression is changed to the descriptive name in the beacon.
  3. After you finish entering regular expressions, click "Save All" to update the tracking script with the configuration.

Enabling regex mapping
Figure 7. Enabling regex mapping

The auto page detection configuration, including regular expressions, is not saved with the website configuration. Be sure to copy the tracking script before you navigate away from the website configuration. The tracking script contains the auto page detection configuration, including regular expressions.

Dashboards

Getting started with Instana website monitoring involves entering your website name and copying over a JavaScript snippet. For more information about monitoring a website, see the installation section.

Speed

In the speed tab you can view the throughput, latency, and metrics that describe page load times.

Website Monitoring Speed
Figure 8. Website monitoring speed

Resources

Third-party resources, like scripts and images, are often responsible for slow page loading. On the resource tab, you can find a table that shows you all the resource providers that are actively used by your website.

Website Monitoring Resources
Figure 9. Website monitoring resources

After you click a specific origin, you can see more detailed information, including load time breakdowns and caching performance. You can see changes in caching statistics over time and how it relates to loading times.

Website Monitoring Resources
Figure 10. Website monitoring resources

HTTP requests

On the HTTP Requests tab, you can analyze which of your HTTP requests are slow or problematic. If you select a specific origin, you see an insight into HTTP Method Breakdown, throughput and latency, and error rates and latency breakdown.

HTTP Request Details
Figure 11. HTTP request details

Errors

Errors can occur in critical processes. For example, in a process to check out purchased items in an online storefront, duplicate charge payment errors might occur. As a result, the customer can be dissatisfied and the business needs to make provisions such as to process a credit card refund.

Although seeing uncaught errors in traces is helpful, sometimes you don’t care about a single issue. When many teams are involved, or many errors occur, it is much more useful to get an overview of the situation. In the Instana UI, you have the complete error breakdown, with the following information:

  • What errors are occurring and how many errors exist
  • Number of affected users
  • In which browsers the errors occur
  • In which operating systems the errors occur
  • In which pages the errors occur

Insights into affected users are available as user information is made available to the JavaScript agent. For more information, see Identifying Users.

Uncaught Errors Breakdown
Figure 12. Errors breakdown

Custom events

You can view the list of custom events on the Custom Events tab. Select an event to view all the related metrics.

Custom Events
Figure 13. Custom events

For more information about how to report custom events, see Reporting Custom Events.

Pages

Often it's important to isolate specific pages and analyze their performance. This view is also a great one to find your page with the most traffic, or the slowest response times.

After you select a specific page, you can see all the metrics just for this single page.

Page Details
Figure 14. Page details

For more information on how to enable Instana to track page transitions in addition to page loads, see Page.

Smart Alerts

View a list of all your configured Smart Alerts. Click an alert to view its configuration, modify it, or view its revision history. If required, you can also disable or remove the alert.

For more information about how to add an alert, see Smart Alerts.

Analyze

Similar to Instana analyze capabilities for traces and call, the analytics view for website monitoring data can be used to answer specific questions that aren't covered by any preconfigured dashboards. A single piece of website monitoring data is called a beacon. A few beacon types exist, that is, page loads, HTTP requests, resources, and JavaScript errors. For convenience purposes, each beacon type has its own main navigation item within the analytics view.

Beacon data can be used to filter and group. The default grouping depends on the selected beacon type. Grouping can be removed to inspect the individual beacons that match filters.

Grouped view

Within the grouped analytics view, beacon data is grouped by a certain tag. By default, beacon data is grouped as follows:

  • Page loads by page name (beacon.page.name).
  • Resources by resource origin (beacon.http.origin).
  • HTTP requests by call target origin (beacon.http.origin).
  • JavaScript errors by error message (beacon.error.message).

The following screen capture shows page loads grouped by browser name (beacon.browser.name), with a chart that is displaying the distribution of page load times (mean) across browsers for a website called Robotshop.

Groups of page loads
Figure 15. Groups of page loads

Metric selection

The analyze table shows a default set of metrics for every beacon type that are helpful in most cases. To answer more specific questions, Instana supports the selection of metrics for these tables. The selection of metrics enables analysis by using different aggregations, for example percentiles, and separate metrics, like the TCP/SSL times.

The combination of filtering, grouping, metric selection and charting is enough that all the tables and charts that are found within the website dashboards can be rebuilt in the analytics view.

Selectable columns in analyze
Figure 16. Metric selection

Ungrouped view

The ungrouped view is accessible after the grouping criteria is removed. It lists every beacon that matches the provided filters. The ungrouped view is also the gateway to the page load view.

Selectable columns in analyze
Figure 17. Ungrouped view

Page load view

Similar to the trace view for traces and calls, the page load view is the highest detail level within Instana. A page load is defined as the retrieval of the initial HTML document and everything that follows that until the next full-page navigation.

The page load view is designed to give you a quick overview about the page load that occurred. Additionally, you can see every piece of data that is received by Instana for the page load, which means that context is always available when you are analyzing problems. For example, when you are analyzing JavaScript errors, this view adds an understanding of what happened before.

The page load view is modeled after common web developer tools' network tabs. Filtering and searching is possible to handle even much data. Even navigation to backend traces is possible to gain a full understanding why something is behaving the way that it is!

Selectable columns in analyze
Figure 18. Page load view

Trace view integration

Enabling website monitoring for your websites also enhances the trace views. The trace views are enriched with website monitoring data as the following screen capture shows.

The page load summary is visible in the trace view
Figure 20. Trace view integration

Geographic data

Instana maps end-user IP addresses to geographic details based on the GeoLite2 database, which is provided by MaxMind. The IP addresses are collected by using the reverse proxy server.

For self-hosted installation, make sure that you configure the URL of the end-user Monitoring endpoint as the agent reporting URL. Otherwise, the IP addresses are not collected, and the related geographic details information is not available.