ARMS frontend monitoring

Prerequisites

Before you read this topic, you should be familiar with the following concepts:

• What is an API?

• What is an SDK?

Why do you need frontend monitoring?

When users access your services, their access process consists of three main stages: page generation (server-side state), page loading, and page runtime.

To ensure service stability, you typically monitor server-side operations. While existing server-side monitoring systems are relatively mature, monitoring page loading and runtime states is often overlooked. For example:

• You cannot immediately know when users encounter errors on your site.

• You do not know the actual access speeds for users in different countries and regions.

• Your application makes numerous asynchronous data calls, but you do not know their performance and success rates.

Our solution

ARMS Frontend Monitoring monitors the page loading process and runtime state. It reports data on page load performance, runtime exceptions, and API call status and latency to a log server. ARMS uses its large-scale, real-time log analysis and processing services to monitor the experience of your real users. ARMS presents this data in intuitive reports to help you promptly identify and diagnose issues.

In the left-side navigation pane of the ARMS console, select Frontend Monitoring to go to the overview page. This page displays core monitoring data, such as page load speed, JS error rate, and API success rate, in metric cards for a quick overview of your application's health.

Supported scenarios

ARMS Frontend Monitoring supports the following scenarios:

• Web/H5

• Weex

• DingTalk mini program

• Alipay mini program

• WeChat mini program

• Other mini programs

Capabilities

ARMS Frontend Monitoring offers a wide range of capabilities. Here are a few examples.

• Page load speed

  ARMS Frontend Monitoring measures various page performance metrics, including first render time, First Contentful Paint (FCP) time, DOM ready time, and resource loading time.

• JS error diagnosis

  The JS error diagnosis feature in ARMS Frontend Monitoring displays basic information and the distribution of JS errors. It also helps you trace user actions to quickly locate the source of each error.

• API request monitoring

  ARMS Frontend Monitoring provides details about each API request in your application, including success rates, response information, and the average latency for successful and failed requests.

• Distributed tracing

  The distributed tracing feature connects API requests from the frontend to their corresponding backend calls, providing a complete trace of the entire code execution path.

Browser and platform compatibility