在前端工作中，应用程序性能监控是非常重要的一项任务。Microsoft 提供了一款名为 Application Insights 的应用性能管理 (APM) 工具，可以让我们更好地了解应用程序的性能表现。在 Angular 应用程序中，我们可以使用 @markpieszak/ngx-application-insights 这个 npm 包帮助我们与 Application Insights 进行集成。在这篇文章中，我们将学习如何使用该 npm 包。
文章目录
- 什么是 Application Insights？
- 安装 @markpieszak/ngx-application-insights 包
- 配置 @markpieszak/ngx-application-insights 包
- 如何在 Angular 项目中使用 @markpieszak/ngx-application-insights 包？
- 示例代码
什么是 Application Insights？
Application Insights 是一款由微软提供的 Saas 应用性能管理工具，可以帮助团队更好地了解生产环境中的应用程序性能。该工具可以提供以下功能：
- 监听应用程序的性能表现，并自动生成报表，帮助发现性能问题。
- 监听应用程序的运行时异常，并在发现异常时发送电子邮件提醒。
- 收集客户端的使用情况并生成报表。
安装 @markpieszak/ngx-application-insights 包
我们可以使用 npm 包管理器来安装 @markpieszak/ngx-application-insights 包。我们可以打开终端，并输入以下命令来安装该包：
npm install @markpieszak/ngx-application-insights --save
配置 @markpieszak/ngx-application-insights 包
@markpieszak/ngx-application-insights 包需要一些配置才能与 Application Insights 进行集成。我们需要在 app.module.ts 模块中引入 NgxApplicationInsightsModule，并配置 instrumentationKey。我们可以参考以下代码来配置：
-- -------------------- ---- -------
---
------ - ---------------------------- - ---- ----------------------------------------
---
-----------
---
-------- -
---
--------------------------------------
------------------- --------------------------
--
--
---
--
------ ----- --------- -
-我们需要将'your-instrumentation-key'替换为您的 Azure 应用程序服务中的正确值。
如何在 Angular 项目中使用 @markpieszak/ngx-application-insights 包？
在我们使用 @markpieszak/ngx-application-insights 包之前，我们需要确保我们的依赖项已经安装完毕。我们可以打开终端，并输入以下命令：
npm install
该命令将会自动安装您项目中所需要的所有依赖项。
我们可以使用以下方法来调用 @markpieszak/ngx-application-insights 包：
-- -------------------- ---- -------
---
------ - --------- - ---- ----------------
------ - -------------------------- - ---- ----------------------------------------
------------
---
--
------ ----- ----------- -
------------------- ------------------- --------------------------- --
------ ---------------- ---- -
----------------------------------------------- - ------------- --------------- ---
-
-@markpieszak/ngx-application-insights 包支持以下方法：
- trackEvent(eventName: string, properties?: any)
- trackPageView(pageView?: IPageViewTelemetry)
- trackException(exception: any, severityLevel?: SeverityLevel, properties?: {[key: string]: any})
- trackMetric(metricName: string, value: number, properties?: {[key: string]: any})
- trackTrace(traceMessage: string, properties?: {[key: string]: any})
- trackDependency(method: string, absoluteUrl: string, pathName: string, totalTime: number, success: boolean, id?: string, properties?: {[key: string]: any})
- flush()
- downloadAndSetup(config?: IConfiguration)
- setAuthenticatedUserContext(authenticatedUserId: string, accountId?: string, storeInCookie?: boolean)
- clearAuthenticatedUserContext()
- addTelemetryInitializer(telemetryInitializer: (item: ITelemetryItem) => boolean | void)
我们可以根据我们的需求来选择使用上述方法中的哪一个方法。
示例代码
以下示例代码展示了如何使用 @markpieszak/ngx-application-insights 包中的 trackEvent 方法：
-- -------------------- ---- -------
---
------ - --------- - ---- ----------------
------ - -------------------------- - ---- ----------------------------------------
------------
---
--
------ ----- ----------- -
------------------- ------------------- --------------------------- --
------ ---------------- ---- -
----------------------------------------------- - ------------- --------------- ---
-
-我们使用 trackEvent 方法来跟踪事件，并将事件名称设置为 testEvent。我们还将'propertyValue'设置为 testProperty 的属性值。你可以根据你的要求更改事件名称和属性值。
结论
在本文中，我们学习了如何使用 @markpieszak/ngx-application-insights npm 包，在 Angular 应用程序中与 Microsoft Application Insights 工具进行集成。我们了解了如何安装 @markpieszak/ngx-application-insights 包、如何配置 @markpieszak/ngx-application-insights 包，以及如何使用该库中的不同方法来跟踪应用程序事件和性能。希望本文能帮助您更好地了解如何在 Angular 应用程序中使用 Application Insights。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f581e8991b448e0b5e