以简单易行的步骤接入阿里云ARMS前端监控Angular

2023-12-22 02:12:19

对于广大开发人员来说，当用户访问业务时，整个访问过程大致可以分为三个阶段：页面生产时（服务器端状态）、页面加载时和页面运行时。为了保证线上业务稳定运行，我们会在服务器端对业务的运行状态进行各种监控。现有的服务器端监控系统相对已经很成熟，而页面加载和页面运行时的状态监控一直比较欠缺。例如：无法第一时间发现页面资源加载缓慢导致的白屏、页面卡顿和数据加载失败等问题。这些问题会导致极差的用户体验。对于重运营的业务来说，页面加载速度和页面运行时的稳定性直接关系到运营效果和业务收入。

Angular是我们前端团队在项目中使用比较广泛的框架。前段时间，我在网上了解到阿里云ARMS前端监控的产品可以很好的帮助我们解决前端页面加载和运行时的性能问题，于是就决定在我们的项目中进行接入。接下来，就让我们一起了解一下在Angular项目中，阿里云ARMS前端监控的接入步骤。

创建应用

首先，我们需要登录阿里云ARMS控制台，点击“应用监控”，然后点击“创建应用”。在弹出的窗口中，我们选择“前端应用”，然后输入应用名称和项目名称，最后点击“创建”。
安装SDK

创建好应用之后，我们还需要下载和安装阿里云ARMS前端监控的SDK。在SDK的下载页面中，我们可以选择Angular版本的SDK。下载完成后，我们解压SDK并将其复制到项目的node_modules目录中。
修改package.json

将以下代码添加到项目的package.json文件中：
```
"scripts": {
  "start": "ng serve --aot --prod --optimization"
}
```
配置Angular应用

打开项目的angular.json文件，在“projects”部分中，找到“architect”对象，然后找到“build”对象。在“build”对象的“options”部分中，添加以下代码：
```
"aot": true,
"optimization": true,
"vendorChunk": true,
"extractLicenses": true,
"sourceMap": true,
"buildOptimizer": true,
"namedChunks": true
```

添加阿里云ARMS监控代码

在项目的src/environments/environment.prod.ts文件中，添加以下代码：

import { environment } from './environment';
import { ARMS_KEY } from './arms.key';

export const environment = {
  ...environment,
  production: true,
  arms: {
    key: ARMS_KEY
  }
};

在项目的src/app.module.ts文件中，添加以下代码：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ARMSModule } from 'arms-angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ARMSModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

运行应用

在项目根目录中，运行以下命令：
```
npm run build --prod
```
然后，在项目dist目录中，运行以下命令：
```
npm start
```
查看监控数据

登录阿里云ARMS控制台，点击“应用监控”，然后点击“前端应用”。在弹出的页面中，我们就可以看到应用的监控数据了。