Angular 集成
编辑Angular 集成编辑
本文档介绍了如何在 Angular 应用程序中使用实时用户监控 JavaScript 代理。
支持的版本编辑
此集成支持 Angular 版本 ≥ 12.0
安装 Elastic APM Angular 包编辑
将 @elastic/apm-rum-angular 包作为依赖项安装到您的应用程序中
npm install @elastic/apm-rum-angular --save
如果您使用的是 Angular 版本 < 12.0，请使用 @elastic/apm-rum-angular 2.x 来检测您的应用程序。
如果您使用的是 Angular 版本 < 9.0，请使用 @elastic/apm-rum-angular 1.x 来检测您的应用程序。详细信息可在 先前版本 中找到。
检测您的 Angular 应用程序编辑
Angular 集成包公开 ApmModule 和 ApmService，它们使用 Angular 的依赖注入模式，并在服务初始化后开始订阅 Angular 路由器事件。
ApmService 必须从应用程序模块或应用程序组件初始化，因为 RUM 代理必须尽快开始捕获所有资源和 API 调用。
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Routes, RouterModule } from '@angular/router'
import { ApmModule, ApmService } from '@elastic/apm-rum-angular'
const routes: Routes = [
{ path: 'contact', component: ContactListComponent },
{ path: 'contact/:id', component: ContactDetailComponent }
]
@NgModule({
imports: [ApmModule, BrowserModule, RouterModule.forRoot(routes)],
declarations: [AppComponent, ContactListComponent, ContactDetailComponent],
providers: [ApmService],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(service: ApmService) {
// Agent API is exposed through this apm instance
const apm = service.init({
serviceName: 'angular-app',
serverUrl: 'https://127.0.0.1:8200'
})
apm.setUserContext({
'username': 'foo',
'id': 'bar'
})
}
}
服务初始化后，页面加载和单页应用程序导航事件将被捕获为事务，其名称为路由的 path，类型为 page-load 或 route-change。
捕获 Angular 应用程序中的错误编辑
默认情况下，当 Angular 应用程序内部抛出错误时，默认错误处理程序会将错误消息打印到控制台，而不会将它们重新抛出为浏览器事件。
ApmErrorHandler 提供了集中式错误处理，它捕获并报告错误以显示在 APM UI 中，并将它们记录到浏览器控制台。
import { ErrorHandler } from '@angular/core'
import { ApmErrorHandler } from '@elastic/apm-rum-angular'
@NgModule({
providers: [
{
provide: ErrorHandler,
useClass: ApmErrorHandler
}
]
})
class AppModule {}