文档链接：help.aliyun.com/document_de…

应用实时监控服务ARMS（Application Real-Time Monitoring Service）是一款应用性能管理（APM）产品，包含应用监控、Prometheus监控和前端监控三大子产品，涵盖分布式应用、容器环境、浏览器、小程序、APP等领域的性能管理，能帮助您实现全栈式性能监控和端到端全链路追踪诊断，让应用运维从未如此轻松高效。

ARMS前端监控

文档链接：help.aliyun.com/document_de… ARMS前端监控专注于对Web场景、Weex场景和小程序场景的监控，从页面打开速度（测速）、页面稳定性（JS Error）和外部服务调用成功率（API）这三个方面监测Web和小程序页面的健康度

为什么要有前端监控？

用户访问您的业务时，整个访问过程大致可以分为三个阶段：页面生产时（服务器端状态）、页面加载时和页面运行时。

为了保证线上业务稳定运行，我们会在服务器端对业务的运行状态进行各种监控。现有的服务器端监控系统相对已经很成熟，而页面加载和页面运行时的状态监控一直比较欠缺。例如：

• 无法第一时间获知用户访问您的站点时遇到的错误。
• 各个国家、各个地区的用户访问您的站点的真实速度未知。
• 每个应用内有大量的异步数据调用，而它们的性能、成功率都是未知的

解决方案

ARMS前端监控重点监控页面的加载过程和运行时状态，同时将页面加载性能、运行时异常以及API调用状态和耗时等数据，上报到日志服务器。之后借助ARMS提供的海量实时日志分析和处理服务，对当前线上所有真实用户的访问情况进行监控。最后通过直观的报表展示，帮助您及时发现并诊断问题。

以npm方式接入前端监控

文档链接：help.aliyun.com/document_de…

安装

在npm仓库中安装alife-logger。

npm install alife-logger --save

初始化

SDK以BrowserLogger.singleton方式初始化。

const BrowserLogger = require('alife-logger');
                // BrowserLogger.singleton(conf) conf传入config配置。
                const __bl = BrowserLogger.singleton({
                pid: 'your-project-id',
                // 设定日志上传地址：
                // 部署新加坡地域可设为`https://arms-retcode-sg.aliyuncs.com/r.png?`。
                // 部署美西地域可设为`http://arms-us-west-1.console.aliyun.com/r.png?`。
                imgUrl: 'https://arms-retcode.aliyuncs.com/r.png?', 
                // 其他config配置。
                });

使用npm方式接入ARMS前端监控时，Web端SDK会自动生成UID来统计UV等信息。自动生成的UID可以用来区分用户的标识，但不具有业务属性，如需自定义UID，请在上述代码中加入以下内容：

uid: 'xxx', // 该值用于区分用户的标识，根据业务设置。

示例：

const BrowserLogger = require('alife-logger');
                // BrowserLogger.singleton(conf) conf传入config配置。
                const __bl = BrowserLogger.singleton({
                    pid: 'your-project-id',
                        // 设定日志上传地址：
                        // 部署新加坡地域可设为`https://arms-retcode-sg.aliyuncs.com/r.png?`。
                        // 部署美西地域可设为`http://arms-us-west-1.console.aliyun.com/r.png?`。
                    uid: 'xxx', // 该值用于区分用户的标识，根据业务设置。
                        imgUrl: 'https://arms-retcode.aliyuncs.com/r.png?', 
                    // 其他config配置。
                });

通用SDK配置项

ARMS前端监控提供一系列SDK配置项，让您能够通过设置参数来满足额外需求。以下是适用于本文场景的通用配置项。

参数	类型	描述	是否必选	默认值
pid	String	项目唯一ID，由ARMS在创建站点时自动生成。	是	无
uid	String	用户ID，用于标识访问用户，可手动配置，用于根据用户ID检索。如果不配置，则由SDK自动生成且每半年更新一次。	否	由SDK自动生成
tag	String	传入的标记，每条日志都会携带该标记。	否	无
release	String	应用版本号。建议您配置，便于查看不同版本的上报信息。	否	undefined
environment	String	环境字段，取值为：prod、gray、pre、daily和local，