Logo

菜单

发布于 2026-01-06 0 阅读
0

你的 React 应用在做什么？我们该如何监控它？🤔 由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

你的 React 应用在做什么？我们该如何监控它？🤔

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

我做咨询的时候发现，很多项目早期都会集成一些监控/日志平台。这样可以帮助我们了解一些常见场景，比如 I/O 操作耗时、追踪应用内的数据流，以及处理预期和非预期错误的情况。所有这些功能都会集成到我们的 API 接口中，通常都能流畅运行。

但总有一个地方它不会被优先考虑，那就是浏览器。有时也会集成 Google Analytics（或者如果你想玩点花样，可以用纯 CSS 实现），但这更多是针对公共网站/营销网站，而且实际上只关注流量来源，而不是真正的流量监控。

今天，我想了解一下如何使用Azure AppInsights设置React监控解决方案。

什么是 AppInsights？

AppInsights（全称为 Application Insights）是Azure Monitor平台的一部分，它是一个性能监视平台，可用于从 Web 到移动的各种应用程序，支持多种语言。

虽然我不会在此赘述其所有功能，但它对于 Web 应用程序（无论是单页应用程序还是其他类型的应用程序）而言最有趣的功能在于能够捕获页面浏览量、错误（已处理和未处理）以及 AJAX 调用（XML HTTP 请求和获取）等信息。将这些信息与客户端和服务端结合起来，可以有效地提供用户在您网站上交互的完整视图。

入门

在这个演示中，我使用了Gatsby 电子商务入门套件，你可以在我的 GitHub 上找到完整的演示。

我已将其扩展到使用AppInsights 的 JavaScript SDK，而该 SDK 恰好有一个React 扩展。

配置 AppInsights

首先，我们需要一个可以使用的 AppInsights 实例，为此，您需要在 Azure 中创建一个资源（如果您还没有 Azure 帐户，可以注册一个免费试用版），然后复制instrumentation key.

获取到检测密钥后，创建一个.env.development文件来设置 Gatsby 将要查找的环境变量：

APPINSIGHTS_KEY=<instrumentation key here>
Enter fullscreen mode Exit fullscreen mode

现在我们准备开始将 AppInsights 集成到我们的应用程序中，首先要创建一个服务来为我们设置检测工具：

// AppInsights.js
import { ApplicationInsights } from '@microsoft/applicationinsights-web'
import { ReactPlugin, withAITracking } from '@microsoft/applicationinsights-react-js'
import { globalHistory } from "@reach/router"

const reactPlugin = new ReactPlugin();
const ai = new ApplicationInsights({
    config: {
        instrumentationKey: process.env.APPINSIGHTS_KEY,
        extensions: [reactPlugin],
        extensionConfig: {
            [reactPlugin.identifier]: { history: globalHistory }
        }
    }
})
ai.loadAppInsights()

export default (Component) => withAITracking(reactPlugin, Component)
export const appInsights = ai.appInsights
Enter fullscreen mode Exit fullscreen mode

此文件负责两件事，第一件事是使用提供的密钥设置 AppInsights 连接（我们使用环境变量来存储此密钥，这样我们就可以在每个环境中使用不同的密钥），第二件事是导出高阶组件 (HOC)，该组件将我们的 AppInsights 实例提供给 React 扩展提供的 HOC（这只是一种方便的方法，如果您不想添加额外的组件，则无需包装 HOC）。

这里与 React 扩展文档的主要区别在于history信息的提供方式。Gatsby@reach/router不使用 `this.htaccess` react-router，所以我们不会创建历史记录对象，而是使用路由为我们定义的那个（由 `Gatsby.htaccess` 包公开globalHistory）@reach/router。

跟踪页面

现在我们的应用程序已支持 AppInsights，首先让我们在所有页面上启用它，以便跟踪页面访问量和任何未处理的错误。最佳位置是我们可以访问的最顶层组件，通常情况下，这指的是添加<App />到 DOM 中的组件。使用 Gatsby 时，我们无法直接访问该组件，而是使用pages目录中的文件。但由于此模板中，我们修改的是 `<head>`components/Layout组件而不是任何页面，因为<Layout />它是每个页面都会用到的最顶层组件。

我们将使用高阶组件（HOC）包裹该组件，如下所示：

import React from 'react'
import Headroom from 'react-headroom'
import { Container } from 'semantic-ui-react'
import Footer from '../Footer'
import Header from '../Header'
import withAppInsights from '../../AppInsights';
import 'semantic-ui-css/semantic.min.css'

const Layout = ({ location, children }) => (
  <>
    <Headroom
      upTolerance={10}
      downTolerance={10}
      style={{ zIndex: '20', height: '6.5em' }}
    >
      <Header location={location} />
    </Headroom>
    <Container text>{children}</Container>
    <Footer />
  </>
)

export default withAppInsights(Layout)
Enter fullscreen mode Exit fullscreen mode

如果你开始浏览并查看开发者工具的“网络”选项卡，你会看到向 AppInsights 发出的请求！

AppInsights 请求

在上面的截图中，我的输出有效负载中有几个对象（AppInsights 每 15000 毫秒批量上传指标请求，这是可配置的），其中一个是我们之前所在页面的指标信息（组件挂载了多长时间），另一个是导航事件。

值得注意的是，您无需包裹整个页面，只需包裹您想要跟踪的特定组件即可。React 扩展提供的 HOC 会将您的组件包裹在一个 `<div>` 元素中，<div>并将事件句柄附加到用户交互事件（例如点击、鼠标移动和触摸），以便跟踪“组件何时被交互”的事件。当 HOC 卸载时，它会将组件的交互时长指标发送到 AppInsights。这里我们将页面浏览量和组件交互合并到一个示例中。

现在我们开始跟踪用户在页面上停留的时间以及他们访问过的页面，让我们来看看一些专门的监控。

监控特定用户交互

假设您想了解用户在网站上的行为，并且想了解特定操作，例如点击“添加到购物车”按钮。为此，我们可以使用trackEvent自定义指标跟踪：

const handleSubmit = async () => {
    appInsights.trackEvent({ name: 'Add To Cart', properties: { productId } })
    // snip
  }
Enter fullscreen mode Exit fullscreen mode

这里我们使用appInsights从 AppInsights 实例设置中导出的对象，并将一些数据传递给 `<event_name>` trackEvent，包括我们要跟踪的事件名称（可以在 Azure 门户中进行筛选），以及我们希望包含在事件中的任何自定义属性。这里我们传递的是 `<value>` productId，因此您可以确定特定产品添加到购物车的频率，但您也可以添加任何有助于理解事件并提供上下文的信息。

监控故障

应用程序确实存在 bug，这是不可避免的，但我们希望知道这些故障何时发生。当这些故障发生在 JavaScript 中时，通常不会被捕获，它们可能对用户完全无声，导致交互失败，直到用户重新加载页面。AppInsights JavaScript SDK 可以捕获触发的未处理异常window.onerror（如果此 PR 合并，还可以捕获未处理的 Promise 拒绝），但对于我们可以处理的错误呢？例如，网络请求失败并向用户显示了一条消息，我们可能需要跟踪该事件，以便关联客户端和服务器指标。

为此，我们可以使用以下trackException方法：

const handleSubmit = async () => {
    appInsights.trackEvent({ name: 'Add To Cart', properties: { productId } })

    const cartId = await localStorage.getItem('mcart')

    const error = validate(quantity)
    setError(error)
    if (!error) {
      setLoading(true)
      Moltin.addToCart(cartId, productId, quantity)
        .then(() => {
          addToCart(quantity, cartId)
          setLoading(false)
          setQuantity(quantity)
          setVisible(true)
          toggleMessage()
        })
        .catch(err => {
          setError(`Error: ${err.errors[0].detail}` || 'Something went wrong')
          setLoading(false)
          appInsights.trackException({ error: new Error(err), severityLevel: SeverityLevel.Error })
        })
    }
  }
Enter fullscreen mode Exit fullscreen mode

在 Promise 的末尾，catch我们调用trackException并传入一个包含错误信息的对象以及一个severityLevel事件Error。severityLevel在这里控制这个事件很重要，因为 Azure 可以使用它来触发 AppInsights 中定义的警报规则，如果错误源自服务器端，您可能不希望重复触发警报。

在 Azure 中查看指标

现在我们已经开始在浏览网站时生成指标，让我们转到 Azure 门户，导航到我们的 AppInsights 资源，然后在“监视”部分下选择“日志（分析）”。

在这里，您可以针对从应用程序捕获的 AppInsights 数据创建查询，而且它的查询语言相当容易上手。我们先从一个简单的查询开始，显示一些页面浏览量：

pageViews
| limit 50
Enter fullscreen mode Exit fullscreen mode

这将打开pageViews表格，我们使用管道符（|）字符来表示命令，在本例中，我们正在执行的命令limit是 command，其值为50，这将查询返回的结果数限制为 50。

页面浏览查询结果

屏幕截图显示了返回的结果，其中可以看到我浏览过的一系列页面。

我们来看一下自定义事件，即跟踪“添加到购物车”按钮的点击次数：

customEvents
| where name == "Add To Cart" 
| limit 50
Enter fullscreen mode Exit fullscreen mode

对于此查询，我们打开customEvents表，因为它不是预定义的指标类型，并添加一个where过滤器来name限制它Add To Cart。

加入购物车查询结果

这里我们可以看到三个“添加到购物车”操作，以及添加到购物车的商品。通过查询，您可以扩展条件子句，查找特定商品或您在事件中捕获的任何其他信息。

结论

本文介绍了Azure App Insights，特别是其React 扩展。我们了解了如何集成页面浏览量跟踪、针对特定交互的自定义​​指标跟踪以及错误跟踪，最后还探讨了如何在 Azure 门户中查看这些数据。

文章来源：https://dev.to/azure/what-is-your-react-app-doing-and-how-do-we-monitor-it-3ble
pnpm 与 Lerna：多包仓库...
顶级开源提示工程指南和工具🔧🏗️🚀