# @cabify/prom-react 中文文档

规范地址：https://npmcn.com/package/%40cabify/prom-react/

版本：0\.3\.0
npm 元数据更新时间：2022-09-07T08:26:34.099Z
中文译文更新时间：2026-11-08T23:22:02.675Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cabify/prom-react
原文对照：https://npmcn.com/package/%40cabify/prom-react/?lang=original
项目主页：https://github.com/cabify/prom-react#readme
源码仓库：https://github.com/cabify/prom-react

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：304 kB，19 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：5 个
- peer 依赖：react \>=16\.8\.0 \< 19\.0\.0，react-dom \>=16\.8\.0 \< 19\.0\.0
- 首次发布：2021-11-05T13:41:59.848Z
- 最新版本发布：2022-09-07T08:26:33.999Z
- 近 30 天下载量：2227（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：21（近 12 个月 0 个）

## 中文简介

在您的 React App 中添加 Prometheus 度量衡

## 安装

```sh
npm install @cabify/prom-react
```

也可以使用：`pnpm add @cabify/prom-react`、`yarn add @cabify/prom-react`、`bun add @cabify/prom-react`

## README

## 舞会反应

[![All Contributors](https://img.shields.io/badge/all_contributors-11-orange.svg?style=flat-square)](https://npmcn.com/package/%40cabify/prom-react/#readme-contributors-)

在您的 React App 中添加 Prometheus 度量衡。 建在 proxy 上方和反应性能库

### 范围和宗旨

本套件的主要目标是为React前端提供生产运行时间可观察性, 允许对操作度量表进行监测和警示,例如但不仅限于区段装载时间、加载应用错误等等.

为此,该图书馆提供 `MetricsProvider` 顶部是 [舞会](https://www.npmjs.com/package/promjs) 财务报告和审定财务报表 [@ shopify/ react- prove](https://www.npmjs.com/package/@shopify/react-performance)最小 你代码的仪表,可以创建出出类拔萃的Grafana仪表板,或者提高前端应用程序的相模警报.

为了更好地理解这个图书馆的目的和建筑决定 请仔细研究一下 [本条/陈述](https://www.weave.works/blog/browser-metrics-into-prometheus/)

需要注意的是,考虑到普罗米修斯拉力模型,这个库需要推出度量衡 进入一些普罗米修斯聚合网关,以提供它们。 建议用针对 [舞会-会场-大门](https://github.com/weaveworks/prom-aggregation-gateway) 实例,但 其他替代办法也可能奏效.

### 安装

```sh
$ yarn add @cabify/prom-react
```

### 使用量

#### 基本用途

首先,你需要增加一个 `MetricsProvider` 进入你的应用程序。 最好把它加进根部 您的应用程序, 使其广泛提供.

```tsx
// src/index.tsx
import { MetricsProvider } from '@cabify/prom-react';

const normalizePath = (path: string) => {
  const match = path.match(/\/products\/(\d+)/);
  if (match) {
    return `/products/:id`;
  }
  return path;
};

const AppRoot = () => (
  <MetricsProvider
    appName="my-app-name"
    owner="my-team"
    getNormalizedPath={normalizePath}
    metricsAggregatorUrl="https://some-metrics-aggregator.com/push-metrics"
  >
    <OtherProviders>
      <App />
    </OtherProviders>
  </MetricsProvider>
);

render(<AppRoot />, document.getElementById('app'));
```

之后,在您所有的应用页面或节根组件中,需要添加一个导航标记. 请注意,您的页面组件应该添加 `usePerformanceMark`如果有一个单页没有 明确调用 `usePerformanceMark(Stage.Complete, 'page-id')`,您的度量值将显示错误的结果. 你会发现它的异常高值 `prom_react_navigation_seconds` (这会影响你的p99度量). 见 [@ shopify/ react- prove](https://www.npmjs.com/package/@shopify/react-performance#track-some-stats) 需要更多信息.

```tsx
// src/pages/Products.tsx
import { usePerformanceMark, Stage } from '@cabify/prom-react'; // handy re-export of @shopify/react-performance utils

export const Products = () => {
  // whatever way to load the page data
  const [products, isLoading] = useFetchProducts();

  usePerformanceMark(isLoading ? Stage.Usable : Stage.Complete, 'products');

  return '...';
};
```

如果您还想要监视您的应用程序加载失败( 丢失捆绑文件, js 错误等) , 您将会 您需要添加以下小片段 `index.html` 文件( 文件必须放在那里才能执行) 即使你的捆绑无法到达/ 无法工作 :

```js
window.__PROM_REACT_LOAD_FAILURE_TIMEOUT__ = setTimeout(function () {
  var xhr = new XMLHttpRequest();
  var str = '# HELP prom_react_app_loaded Application loaded counter\n';
  str += '# TYPE prom_react_app_loaded counter\n';
  str += 'prom_react_app_loaded{app_name="<<APP_NAME>>",status="failure"} 1\n';

  xhr.open('POST', '<<METRICS_AGGREGATOR_URL>>');
  xhr.setRequestHeader('Content-Type', 'text/plain');
  xhr.send(str);
}, 3000);
```

(请记住替换) `<<METRICS_AGGREGATOR_URL>>` 财务报告和审定财务报表 `<<APP_NAME>>` 占位符以匹配您的配置)

增加这种仪器可以提供框外的这些金指标:

-   `prom_react_app_loaded`: 应用程序已载入计数器。 它会观察两个活塞/故障负载.
-   `prom_react_app_unloaded`:应用程序已卸载。 用途 `navigator.sendBeacon` API幕后新闻.
-   `prom_react_performance_seconds`: 直方图,用于存储加载性能事件计时(`dcl`, (中文(简体) ), `ttfb`, (中文(简体) ), `ttfp`(见a/c.5/49/70,附件).
-   `prom_react_navigation_duration_seconds`:直方图来存储各段之间的导航时间. 包括两个全页负荷(`navigation_type="full_page`)和通过 历史 `pushState` 或反应 -- 路由器`navigation_type="in_app`) (中文(简体) ). 上面还有标签 与 `path` (你需要照顾) [主要爆炸](https://blog.freshtracks.io/bomb-squad-automatic-detection-and-suppression-of-prometheus-cardinality-explosions-62ca8e02fa32) 通过使用 [获得正态Path](https://npmcn.com/package/%40cabify/prom-react/#readme-metricsprovider) 创建时的道具 `MetricsProvider`(中文(简体) )
-   `prom_react_ttc_seconds`: 直方图存储页面 Time Tocomplete 导航时间. 包含与 `navigation_duration_seconds` 标准.
-   `prom_react_ttu_seconds`: 直方图来存储页面 TimeToUsable 导航时间. 包含与 `navigation_duration_seconds` 标准.

#### 添加自定义度量衡

您可以添加您的自定义应用度量表, 以便在需要时使用 。 要做到这一点,只是附在 `MetricsProvider`。 。 。 . 以后,你可以利用这个机会 `useMetrics` 勾勾以添加关于这些衡量标准的意见:

```tsx
// src/index.tsx

import { MetricsProvider } from '@cabify/prom-react';

// please remember to define them outside the component to avoid unneeded re-renders
const customMetrics: MetricDefinition[] = [
  {
    type: 'counter',
    name: 'my_app_report_download_count',
    description: 'Number of reports downloaded',
  },
];

const MyApp = () => {
  return (
    <MetricsProvider appName="MyApp" customMetrics={customMetrics}>
      ...
    </MetricsProvider>
  );
};

// Any inner component
import { useMetrics } from '@cabify/prom-react';

const ReportsDownloadButton = () => {
  const { observe } = useMetrics();

  const downloadReport = () => {
    observe('my_app_report_download_count', { custom_tag: 'custom value' }, 1);

    // your app code
  };

  return <div onClick={downloadReport}>Download report</div>;
};
```

### API 密码

#### 测量器

反应组件,配置所有监测基础设施并添加上述内容 黄金度量衡. 它必须放置在您组件树的根.

道具 :

-   `appName: string;`:应用程序名称. 所有衡量标准都将包括“ app name” 标签 以这个值.
-   `owner?: string;`:应用程序的拥有者. 所有衡量标准都将包含一个带有此值的标签"所有人".
-   `metricsAggregatorUrl?: string;`:推出网关集合器的Url. 如果不设定,将收集但不予发送.
-   `customMetrics?: MetricDefinition[];`:自定义应用度量衡. 请在曲线中定义 在组件外避免试图创建无限循环.
-   `fetchOptions?: Partial<RequestInit>`: 额外获取选项(标题、证书等),用于向聚合器发送指标.
-   `getNormalizedPath?: (path: string) => string;`: 鉴于所有路由变化度量包括 a “ path” 标签, 如果您有的话, 您应该添加此功能以避免基本问题 参数化路线( ex: `/products/:id`) (中文(简体) ). 见 [食谱](https://npmcn.com/package/%40cabify/prom-react/#readme-recipes) 例.
-   `histogramBuckets?: number[]`: Bucket 列表用于直方图测量. 默认 `[0.01, 0.1, 1, 2, 3, 4, 5, 7, 10, 15]`。 。 。 .

#### 使用PerformanceMark,Stage等软件.

此库将全部再导出 `@shopify/react-performance` 避免明确添加 您的软件包依赖性。 你可以看一看这个 [API 文档](https://www.npmjs.com/package/@shopify/react-performance#api) 详细情况.

#### 计量

反应组件将登录到控制台所有度量观测。 它不会在屏幕上做任何事情. 你不应该在生产中加上这个.

道具 :

-   `logger?: ObserveCallback`: 如果设置, 它将替换原始日志 。 确保这个值的引用不会通过记忆日志函数或从组件外定义来避免性能问题而改变.

#### 量子调试覆盖

反应组件以显示调试信息 。 必须放在下面 `MetricsProvider`。它显示一个不是那么迷人 以导航信息覆盖。 检查您的所有区域是否有适当的工具 `usePerformanceMark`。 。 。 . 它也可以将您的所有观察记录到控制台( uss) `MetricsLogger` 盖下. 你不应该在制作中显示这一点.

道具 :

-   `onClose?: () => void`: 如果设置了, 它将显示一个关闭按钮, 当按下时会调用此调用
-   `withLogger?: boolean`:如果设置为真,则包括 `MetricsLogger`这边,你可以 所有在手的调试设施只添加此组件.

![MetricsDebugOverlay component](https://npmcn.com/package/%40cabify/prom-react/images/MetricsDebugOverlay.png?raw=true "MetricsDebugOverlay")

注意这些调试组件非常基本,可能不符合您的需要. 然而,作为所有衡量数据 可通过 `useMetrics` 钩子, 您可以在内部构建自己的日志、 调试面板等 您的应用程序或外部库.

#### 使用量表( )

进入测量仪登记簿和其他一些随时可以使用的帮助者。 它返回对象 具有下列属性:

-   `observe(metricName, tags?, value?, skipSending?)`数字 : 帮助在现有衡量标准中添加一个观察。 请注意,衡量标准应在提供者中建立。 它支持直方图和反度量衡.
    -   `metricName: string`: 添加观测值的度量衡名称.
    -   `tags?: Record<string, string>`:可选标签来加入观察. 用这种方法添加的所有观测结果 将会有 `app_name` 财务报告和审定财务报表 `owner` 标签设置得当.
    -   `value?: number`:增加观察值. 直方图测量和可选 用于反度量衡。 如果不设定, 这种方法将增加计数器 `1`。 。 。 .
    -   `skipSending?: boolean`: 如果设置为真, 观察将不会被发送到后端 (你可以打电话) `sendMetrics()` 手动发送观察).
-   `isReady: boolean`: 标出标记,以表示何时可以使用度量衡。 你只能依赖 如果您在首次渲染应用程序时计划将观测结果添加到自定义的度量标准中, 请使用此标记 . 这里的拇指规则是:只有在你的度量观察提出"这个度量不存在"的警告时才使用.
-   `sendMetrics: () => void`: 向服务器发送参数。 注:默认情况下,这种方法称为 自动通过 `observe`,但是如果跳过自动参数发送,可以手动调用.
-   `histogramBuckets: number[];`: 用于配置在提供者中的直方图。 包含在这里 通常不需要这个.
-   `navigationData: NavigationData | null`: 最后的导航数据.
-   `addObserveListener: (callback: ObserveCallback) => void;`: 每当在登记册中添加一个观察时,都添加一个被调用的听众.
-   `removeObserveListener: (callback: ObserveCallback) => void;`: 删除观察者
-   `registry: Registry`: Bourjs regisry 实例。 你不应该直接使用这个, 但使用时 `observe` 换句话说 在一些极罕见的病例和测试中,它暴露在外.

### 食谱

#### 调试

如果您想要检查您的度量衡是否被正确生成, 您可以添加 `MetricsLogger` 进入您的 组件树和所有度量观测将在控制台中显示.

```tsx
const AppRoot = () => (
  <MetricsProvider
    appName="my-app-name"
    owner="my-team"
    getNormalizedPath={normalizePath}
    metricsAggregatorUrl="https://some-metrics-aggregator.com/push-metrics"
  >
    <MetricsLogger />
    <MyApp />
  </MetricsProvider>
);
```

这将生成这样的日志条目 :

`[prom_react] prom_react_navigation_duration_seconds 1.2456 {app_name: 'my_app', path: '/app', navigation_type: 'full_page' }`

您可以自定义输出 `MetricsLogger` 替换原装入器:

```tsx
const metricsLogger = ({ metricName, value, tags }) => {
  console.debug('Custom log for prom-react!', metricName, value, tags);
};
const AppRoot = () => (
  <MetricsProvider
    appName="my-app-name"
    owner="my-team"
    getNormalizedPath={normalizePath}
    metricsAggregatorUrl="https://some-metrics-aggregator.com/push-metrics"
  >
    <MetricsLogger logger={metricsLogger} />
    <MyApp />
  </MetricsProvider>
);
```

此外,您还可以添加一个将显示上次被触发的导航事件的部件 。 这是特别有用的检查 如果您的所有页面都有适当的仪器( 您应该浏览您的应用程序, 部件应该显示正确的路径 ) )),每节变换.

```tsx
const AppRoot = () => (
  <MetricsProvider
    appName="my-app-name"
    owner="my-team"
    getNormalizedPath={normalizePath}
    metricsAggregatorUrl="https://some-metrics-aggregator.com/push-metrics"
  >
    {process.env.NODE_ENV !== 'production' && (
      <MetricsDebugOverlay withLogger onClose={closeOverlay} />
    )}
    <MyApp />
  </MetricsProvider>
);
```

#### 配置您的 Grafana 仪表板和 propetheus 提示

-   在特定时间范围内的平均活动会话:

```
increase(prom_react_app_loaded{app_name="$job", status="success"}[$__range]) -
on() increase(prom_react_app_unloaded{app_name="$job"}[$__range])
```

-   装入应用程序出错率 :

```
rate(prom_react_app_loaded{app_name="$job",status="failure"}[$__rate_interval]) /
rate(prom_react_app_loaded{app_name="$job"}[$__rate_interval])
```

-   以秒计的全页负荷长度的 Nth 个数 :

```
histogram_quantile($quantile,
sum(sum(rate(prom_react_navigation_duration_seconds_bucket{app_name="$job",navigation_type="full_page"}[$__rate_interval])
)
by (le, path)) without(path))
```

-   按路径排列的 RPS 页面 :

```
sum by (path)(rate(prom_react_navigation_duration_seconds_count{app_name="$job"}[$__rate_interval]) != 0)
```

-   (普罗米修斯警报). 应用程序负载失败 :

```
ALERT AppLoadFailed
  IF     rate(prom_react_app_loaded{app_name="my-app",status="failure"}[5m]) /
         rate(prom_react_app_loaded{app_name="my-app"}[5m]) > 0.1
  FOR    15m
  LABELS {...}
  ANNOTATIONS {...}
```

#### 获得正态 路径对象

如果您的路由被定义在一个类似全球对象中( 您以后使用) 例如,在反应路由器配置中:

```ts
const Urls = {
  INDEX: '/app',
  PRODUCTS: '/app/products',
  PRODUCT_DETAIL: 'app/product/:id',
  ...
}
```

很容易创建 `getNormalizedPath` 函数来源:

```ts
import { pathToRegexp } from 'path-to-regexp';

const urlRegExps = Object.values(Urls).map((url) => ({
  regExp: pathToRegexp(url),
  url,
}));

export const getNormalizedPath = (url: string) => {
  return urlRegExps.find(({ regExp }) => regExp.test(url))?.url || url;
};
```

#### 在网关请求中添加授权页眉

```tsx
// src/index.tsx
import { MetricsProvider } from '@cabify/prom-react';

const gatewayFetchOptions = {
  headers: {
    Authorization: `Basic ${btoa('login:password')}`,
  },
};

const AppRoot = () => (
  <MetricsProvider
    appName="my-app-name"
    owner="my-team"
    fetchOptions={gatewayFetchOptions}
    metricsAggregatorUrl="https://some-metrics-aggregator.com/push-metrics"
  >
    <App />
  </MetricsProvider>
);
```

#### 自动检查您的所有页面是否包含导航标记

如果您可以轻松地用文件名识别您的页面根组件( 例如如果它们) 总是被命名 `<SectionName>Page.tsx`),很容易自动添加一个简单的 shell 脚本 请检查所有设备是否齐全。 这样可以避免错误的导航度量值 (您也可以在您的 CI 管道或预承诺的脚本中添加这样的脚本, 只是为了保证一个乐器 代码不能达到生产). 作为额外的提示, 如果有匹配您的页面名称结构的文件 而非页面(或页面被另置),您可以添加被忽略的coment _爱斯林特_ (预算外). `// prom-react-ignore`) (中文(简体) ).

```sh
echo "Checking if all pages are using 'usePerformanceMark'"

OUTPUT=$(grep --include='*Page.tsx' -Lr 'usePerformanceMark\|prom-react-ignore' .)

if [ -z "$OUTPUT" ]; then
    echo "Everything ok"
else
    echo "There are pages that are not using 'usePerformanceMark'"
    echo "$OUTPUT"
    echo "Please start using 'usePerformanceMark' on them or add // prom-react-ignore to ignore that file"
    exit 1
fi
```

### 捐款

-   运行测试和起伏: `yarn test`
-   构建工程 : `yarn build`

#### 发布新版本

-   更新 [变化](https://npmcn.com/package/%40cabify/prom-react/CHANGELOG.md) 具有新特性, 断开更改等
-   检查你英寸 `main` 分支和一切是最新的.
-   运行 `yarn publish:<major|minor|patch>` 或者说 `yarn publish:canary` 为金丝雀版本.
-   运行 `git push && git push --tags`
-   请检查access-date=中的日期值 (帮助) 上次推后触发的所有测试动作均为QQ.
-   转到 [创建新发行](https://github.com/cabify/prom-react/releases/new),选择先前所推动的标签并写入标题.
-   请检查date=中的日期值 (帮助) Npm 发布动作已成功完成 .
-   [检查 npm 包网页](https://www.npmjs.com/package/@cabify/prom-react),该版本已在 `latest` 标签.

## 贡献者

感谢这些伟大的人[emoji 密钥](https://allcontributors.org/docs/en/emoji-key):

<table><tbody><tr><td align="center"><a href="https://github.com/jalopez" rel="nofollow noopener noreferrer"><img alt="" src="https://avatars.githubusercontent.com/u/259623?v=4?s=100" width="100px;" loading="lazy" decoding="async" referrerpolicy="no-referrer"><br><sub><b>哈维尔·洛佩斯</b></sub></a><br><a href="https://github.com/cabify/prom-react/commits?author=jalopez" title="Code" rel="nofollow noopener noreferrer">💻</a></td><td align="center"><a href="https://github.com/alejandrofdiaz" rel="nofollow noopener noreferrer"><img alt="" src="https://avatars.githubusercontent.com/u/9197247?v=4?s=100" width="100px;" loading="lazy" decoding="async" referrerpolicy="no-referrer"><br><sub><b>亚历杭德罗</b></sub></a><br><a href="https://github.com/cabify/prom-react/commits?author=alejandrofdiaz" title="Code" rel="nofollow noopener noreferrer">💻</a></td><td align="center"><a href="https://valya.codes/" rel="nofollow noopener noreferrer"><img alt="" src="https://avatars.githubusercontent.com/u/7880641?v=4?s=100" width="100px;" loading="lazy" decoding="async" referrerpolicy="no-referrer"><br><sub><b>瓦伦丁·柏林</b></sub></a><br><a href="https://github.com/cabify/prom-react/commits?author=valenber" title="Code" rel="nofollow noopener noreferrer">💻</a></td><td align="center"><a href="https://github.com/alexgallardo" rel="nofollow noopener noreferrer"><img alt="" src="https://avatars.githubusercontent.com/u/7766614?v=4?s=100" width="100px;" loading="lazy" decoding="async" referrerpolicy="no-referrer"><br><sub><b>亚历杭德罗·加利亚多·埃斯科瓦尔</b></sub></a><br><a href="https://github.com/cabify/prom-react/commits?author=alexgallardo" title="Code" rel="nofollow noopener noreferrer">💻</a></td><td align="center"><a href="https://github.com/christiandebarrio" rel="nofollow noopener noreferrer"><img alt="" src="https://avatars.githubusercontent.com/u/13832650?v=4?s=100" width="100px;" loading="lazy" decoding="async" referrerpolicy="no-referrer"><br><sub><b>基督教徒</b></sub></a><br><a href="https://github.com/cabify/prom-react/commits?author=christiandebarrio" title="Code" rel="nofollow noopener noreferrer">💻</a></td><td align="center"><a href="https://github.com/riboher" rel="nofollow noopener noreferrer"><img alt="" src="https://avatars.githubusercontent.com/u/11684090?v=4?s=100" width="100px;" loading="lazy" decoding="async" referrerpolicy="no-referrer"><br><sub><b>里卡多·博卢达</b></sub></a><br><a href="https://github.com/cabify/prom-react/commits?author=riboher" title="Code" rel="nofollow noopener noreferrer">💻</a></td><td align="center"><a href="https://github.com/pablomarquezcabify" rel="nofollow noopener noreferrer"><img alt="" src="https://avatars.githubusercontent.com/u/99354964?v=4?s=100" width="100px;" loading="lazy" decoding="async" referrerpolicy="no-referrer"><br><sub><b>巴勃罗·马尔克斯</b></sub></a><br><a href="https://github.com/cabify/prom-react/commits?author=pablomarquezcabify" title="Code" rel="nofollow noopener noreferrer">💻</a></td></tr><tr><td align="center"><a href="https://leireriel.github.io/leire-rico-portfolio/#/" rel="nofollow noopener noreferrer"><img alt="" src="https://avatars.githubusercontent.com/u/48056077?v=4?s=100" width="100px;" loading="lazy" decoding="async" referrerpolicy="no-referrer"><br><sub><b>莱尔·里科</b></sub></a><br><a href="https://github.com/cabify/prom-react/commits?author=leireriel" title="Code" rel="nofollow noopener noreferrer">💻</a></td><td align="center"><a href="http://www.siete3.com/" rel="nofollow noopener noreferrer"><img alt="" src="https://avatars.githubusercontent.com/u/2030605?v=4?s=100" width="100px;" loading="lazy" decoding="async" referrerpolicy="no-referrer"><br><sub><b>罗德里戈</b></sub></a><br><a href="https://github.com/cabify/prom-react/commits?author=area73" title="Code" rel="nofollow noopener noreferrer">💻</a></td><td align="center"><a href="https://github.com/AlexTemina" rel="nofollow noopener noreferrer"><img alt="" src="https://avatars.githubusercontent.com/u/14157093?v=4?s=100" width="100px;" loading="lazy" decoding="async" referrerpolicy="no-referrer"><br><sub><b>亚历克斯·特米纳</b></sub></a><br><a href="https://github.com/cabify/prom-react/commits?author=AlexTemina" title="Code" rel="nofollow noopener noreferrer">💻</a></td><td align="center"><a href="https://github.com/fernandezAmor" rel="nofollow noopener noreferrer"><img alt="" src="https://avatars.githubusercontent.com/u/6586552?v=4?s=100" width="100px;" loading="lazy" decoding="async" referrerpolicy="no-referrer"><br><sub><b>费尔南德斯·阿莫尔</b></sub></a><br><a href="https://github.com/cabify/prom-react/commits?author=fernandezAmor" title="Code" rel="nofollow noopener noreferrer">💻</a></td></tr></tbody></table>

本项目遵循 [全部贡献者](https://github.com/all-contributors/all-contributors) 规格。 任何捐款都欢迎!

## 常见问题

### @cabify/prom-react 是什么？

在您的 React App 中添加 Prometheus 度量衡

### 如何安装 @cabify/prom-react？

在项目目录运行 npm install @cabify/prom-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.8\.0 \< 19\.0\.0）、react-dom（\>=16\.8\.0 \< 19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @cabify/prom-react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cabify/prom-react 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @cabify/prom-react 可以商用吗？

@cabify/prom-react 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @cabify/prom-react 的下载量有多少？

根据 npm 官方下载统计，@cabify/prom-react 在 2026/10/09 – 2026/11/07 这 30 天内被下载 2,227 次，日均约 74 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cabify/prom-react 还在维护吗？

最新版本 0\.3\.0 发布于 2022/09/07（4 年前）；至今共发布 21 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/11/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。