All Products
Search
Document Center

Application Real-Time Monitoring Service:Web and HTML5 page monitoring details

Last Updated:Aug 14, 2024

The web and HTML5 page monitoring feature collects and analyzes the performance data of web pages and mobile HTML5 pages. The performance data includes the number of page views (PVs), resource loading, number of API requests, and JavaScript error statistics. This feature can trace single-user sessions, reconstruct real user flows, collect error stacks and contextual information, and pinpoint the root causes of performance issues to help R&D engineers expedite troubleshooting processes.

Go to the application details page

  1. Log on to the ARMS console.
  2. In the left-side navigation pane, choose User Experience Monitoring > Application List. In the top navigation bar, select the region in which your applications reside.

  3. Click the name of the application that you want to manage. On the application details page that appears, view the relevant information on the Application Overview, Session Tracing, PVs, Resource loading, API Requests, and Abnormal statistics tabs.

    You can adjust the time range of the data that you want to query by using the time selector in the upper-right corner of the page.

Application Overview tab

The Application Overview tab displays key metrics related to users, pages, and requests of a specific application. The metrics include the number of user sessions, PVs, unique visitors (UVs), resources, API requests, and exceptions, and the maximum page rendering time. The tab also displays the trends of the metrics. The information helps you understand the overall performance of the application.

image.png

Session Tracing tab

When you locate a fault, you usually need to check the context of the fault to reproduce the fault scenario. The session tracing feature supports end-to-end tracing based on the username or user ID to reproduce the traces of user visits. This helps effectively locate and analyze the fault causes.

image.png

  • In the search box (marked as ①), you can enter a session ID to search for a session.

  • In the Quick Filter section (marked as ②), you can specify a condition to filter data. This section works in conjunction with the search box (marked as ①) and allows you to manually hide metrics.

  • In the metric aggregation section (marked as ③), you can specify an aggregation metric and dimension to filter data. You can choose to view the metric data by using a column chart, line chart, pie chart, or map.

  • In the session list (marked as ④), you can view the information about each session. You can click the ID of a session to view the details of the session. You can also drill down to view the information about PVs, resource loading, and user actions.

    image.png

PVs tab

The PVs tab displays the number of PVs, WebVitals core metrics, and page load key metrics of pages. You can perform targeted analysis based on the data of a specific page.

image.png

  • In the Quick Filter section (marked as ①), you can specify a condition to search for a page.

  • In the trend chart section (marked as ②), you can view the trends of the number of PVs, WebVitals core metrics, and page load key metrics. WebVitals core metrics include Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Offset (CLS). Page load key metrics include First Contentful Paint (FCP), DOM Ready, Time To Interactive (TTI), and Page Fully Loaded.

  • In the page list (marked as ③), you can view the following information about each page: number of PVs, average load time, and number of views per user. You can click the name of a page to view the details of the page, including the trend analysis information and PV details.

    image.png

Resource loading tab

The Resource loading tab displays the error statistics, performance data, and request data of resources, including API requests and Content Delivery Network (CDN) static resources. You can perform targeted analysis based on the data of a specific resource.

image.png

  • In the Quick Filter section (marked as ①), you can specify a condition to filter data.

  • In the trend chart section (marked as ②), you can view the trends of the number of resource loads, load time, and number of errors. The system displays the number of resource loads by resource type or request method. The system displays the load time by resource type.

  • In the resource list (marked as ③), you can view the following information about each resource: domain name, type, request method, number of requests, number of failures, number of slow responses, and average request duration. You can click the name of a resource to view the details of the resource, including the trend analysis information and load stacks.

    image.png

API Requests tab

The API Requests tab displays the number of requests, request duration, and status code of API operations. You can perform targeted analysis based on the data of a specific API operation.

You can also view the information about abnormal API requests and the details of API requests.

image.png

  • In the Quick Filter section (marked as ①), you can specify a condition to filter data.

  • In the trend chart section (marked as ②), you can view the trends of the number of API requests and request duration, as well as the status code distribution.

  • In the API operation list (marked as ③), you can view the following information about each API operation: request method, number of requests, number of errors, number of slow responses, average request duration, and number of called pages. You can click the name of an API operation to view the details of the API operation, including the trend analysis information and API request details.

    image.png

Abnormal statistics tab

The Abnormal statistics tab displays the number of exceptions, number of various affected items, and exception distribution. You can perform targeted analysis based on the data of a specific exception.

image.png

  • In the search box (marked as ①), you can enter JavaScript error information to filter exceptions.

  • In the Quick Filter section (marked as ②), you can specify a condition to filter data.

  • In the trend chart section (marked as ③), you can view the trends of the total number of exceptions and the number of affected pages, users, and sessions as well as the distribution of exception types, abnormal files, and abnormal pages in the application.

  • In the exception list (marked as ④), you can view the following information about each exception: exception information, abnormal files, number of exceptions, and number of affected pages, PVs, users, and sessions. You can click the name of an exception to view the details of the exception, including the trend analysis information and error details.

    image.png

References

You can use the data exploration feature to query, aggregate, and trace data. For more information, see Data exploration.