简介
对于一个前端应用来说，很多时候我们需要对其进行监控和统计。在这些需求中，Prometheus 是一个备受推崇的数据收集与监控系统。而 prometheus-plugin-app-info 就是一个用来收集前端应用信息并展示在 Prometheus 监控面板中的 npm 包。
在本文中，我们将详细介绍 prometheus-plugin-app-info 的使用方法，包括如何安装、配置与使用，并提供代码示例来帮助读者更好地了解该 npm 包的功能。
安装
使用 npm 安装 prometheus-plugin-app-info：
npm install prometheus-plugin-app-info
配置
在使用之前，需要进行一些配置。
首先，需要在 webpack 配置中引入 prometheus-plugin-app-info：
const PrometheusPluginAppInfo = require('prometheus-plugin-app-info');然后，在插件列表中添加 PrometheusPluginAppInfo：
plugins: [ new PrometheusPluginAppInfo(options), // ... ]
其中，options 是一个配置对象。下面是一个示例：
-- -------------------- ---- -------
-
------- -
-- ----
-------- ---------
----------- --------
-- ---
--
-------- -
-- -------
------------- -----------------------------
-- ---
--
-------------- -
-- -------
---------------
-- ---
--
--------------- -
-- -------
----------
-- ---
--
-labels: 标签名称，包括appName（应用名称）、appVersion（应用版本）等。这些标签将会被用于区分不同应用和版本的数据。metrics: 自定义指标名称。默认的指标名称为http_requests_total，如需配置可在此处进行设置。excludeRoutes: 排除的路由地址，可以是字符串或正则表达式。匹配的路由不会被记录到 Prometheus 中。excludeMethods: 排除的请求方法，可以是字符串或正则表达式。匹配的请求不会被记录到 Prometheus 中。
使用
在配置完 prometheus-plugin-app-info 后，我们就可以开始使用它来收集前端应用信息并展示在 Prometheus 监控面板中了。
假设我们有一个 Vue.js 应用，在 main.js 中引入 prom-client 并启动 prometheus-plugin-app-info：
-- -------------------- ---- -------
------ - ---------------------- -------- - ---- --------------
------ ----------------------- ---- -----------------------------
----- --- - ---------------
----- ------ - --------------
-- ---
---
------ -- -- -
-- -- -----------------------------------
----- ---------------- - --- ---------------------------------
----- -------------------------
-- ---------
----------------------- -------- ---
-- ---- ---------- -------
--------------------------------
-- - ------ ------------------
--------------------- ----- -- -
----- --------- - ------------
----- ------------- - ------
----- ---------- - ----
-- --------
-------------------------------------- ------ ---------- ------- -------------- ------- ---------- ---------
---
------------------------------
-----在上述代码中，我们使用 collectDefaultMetrics() 启动默认指标收集器，并使用 register.metrics() 打印当前 Prometheus 注册表中的指标。可以通过 Prometheus 查询语句来查看这些指标的值。
在 Vue.js 中，我们可以使用 router.afterEach() 监听路由跳转事件，并在回调函数中使用 prometheusPlugin.requestCount.labels().inc() 来记录页面访问指标。其中，routePath 是当前访问路由的路径，requestMethod 是 HTTP 请求方式，statusCode 是 HTTP 状态码。
指标查询
在 Prometheus 服务器中，我们可以使用查询语句来获取 prometheus-plugin-app-info 收集到的指标值。
例如，使用以下查询语句可以获取 my-app 应用中，各个路由的访问次数：
my_app_http_requests_total{appVersion="1.0.0", route!="/favicon.ico", status="200"}其中，appVersion 为应用版本，route 为路由地址，status 为 HTTP 状态码。
结语
通过上述步骤，我们已经可以使用 prometheus-plugin-app-info 来记录前端应用的基本信息并展示在 Prometheus 监控面板中了。
当然，它的功能不仅如此。除了上述示例中介绍的页面访问信息，它还可以记录更多信息，例如应用启动时间、内存使用情况、CPU 使用情况等等。读者们可以根据自己的需求进行配置和使用，以达到更好的监控效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e181e8991b448d76a4