# @flareapp/react 中文文档

规范地址：https://npmcn.com/package/%40flareapp/react/

版本：2\.13\.0
npm 元数据更新时间：2026-09-17T12:52:59.748Z
中文译文更新时间：2026-11-14T21:29:02.551Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40flareapp/react
原文对照：https://npmcn.com/package/%40flareapp/react/?lang=original
项目主页：https://flareapp.io/
源码仓库：https://github.com/spatie/flare-client-js

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

- 包体积（解压后）：64.3 kB，27 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react ^16\.0\.0\|\|^17\.0\.0\|\|^18\.0\.0\|\|^19\.0\.0，@flareapp/js ^2\.13\.0，react-router \>=7\.0\.0 \<9，@tanstack/react-router \>=1\.64\.0 \<2
- 首次发布：2024-01-24T16:50:44.924Z
- 最新版本发布：2026-09-17T12:52:59.566Z
- 近 30 天下载量：10020（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：28（近 12 个月 20 个）

## 中文简介

对 shipapp.io 的反应客户端

## 安装

```sh
npm install @flareapp/react
```

也可以使用：`pnpm add @flareapp/react`、`yarn add @flareapp/react`、`bun add @flareapp/react`

## README

# @ flareapp/反应

反应集成 [火焰](https://flareapp.io/) 错误跟踪和记录 。 提供错误边界组件和 a 用于捕捉和向Flare报告反应组件错误的19+错误处理器.

## 安装

```bash
npm install @flareapp/react @flareapp/js
```

## 快开始

初始化 Flare 客户端, 并用错误边界来包装您的组件树 :

```tsx
import { flare } from '@flareapp/js';
import { FlareErrorBoundary } from '@flareapp/react';

flare.light('YOUR_FLARE_API_KEY');

function App() {
    return (
        <FlareErrorBoundary fallback={<p>Something went wrong.</p>}>
            <MyComponent />
        </FlareErrorBoundary>
    );
}
```

## 日志

除了出错,客户端还可以发送结构化日志. 日志是选入的: 启用这些日志 `enableLogs`,然后调用其中的任何 8个 syslog 级别 (`debug`, (中文(简体) ), `info`, (中文(简体) ), `notice`, (中文(简体) ), `warning`, (中文(简体) ), `error`, (中文(简体) ), `critical`, (中文(简体) ), `alert`, (中文(简体) ), `emergency`) (中文(简体) ).

```tsx
import { flare } from '@flareapp/js';

flare.configure({ enableLogs: true });

flare.logger.info('Checkout started', { cartId: cart.id, total: cart.total });
```

## 减少生产出错

在生产中, React 投出像 `Minified React error #418; visit https://react.dev/errors/418?args[]=Foo`。 。 。 . 客户端将这些描述成一个单一的自成一体的领域, `flare.exception.react_minified_error`,随行 与已解析的棋子一起进行反应版本 :

```ts
'flare.exception.react_minified_error': {
    number: 418,
    args: ['Foo', 'Bar'],
    url: 'https://react.dev/errors/418?args[]=Foo&args[]=Bar',
    react_version: '19.0.0',
}
```

Flare 在后端读取此字段以查看 React 错误代码映射( 键于) `react_version`并浮出水面, 人类可读信息. 它是一个Flare-Internal字段,不是显示上下文的一部分,所以只有在一个 错误将实际解析为 minized React 错误, 无法被脱去 `beforeSubmit` 钩. 没有错误代码映射 捆入客户端. 未小错报未变.

`context.custom.react` 继续携带 `componentStack`, (中文(简体) ), `componentStackFrames` 财务报告和审定财务报表 `version` 用于显示.

## 识别用户

```tsx
import { flare } from '@flareapp/js';

flare.setUser({ id: 123, email: 'jane@example.com', fullName: 'Jane Doe' });
```

见 [JavaScript 识别用户文件](https://flareapp.io/docs/javascript/data-collection/identifying-users) 用于完整字段列表。 过 `null` 来清理.

## 文档

关于出错边界的完整文档, React 19+ 出错处理器,使用寿命周期回调器,以及更多可用文件 时间 [耀斑/多克/反应/一般/安装](https://flareapp.io/docs/react/general/installation)。 。 。 .

## 兼容性

-   反应16、17、18、19
-   `flareReactErrorHandler` 需要反应 19+
-   `withFlareProfiler` 转发 `ref` 仅针对19

## 许可证

麻省理工学院许可证(MIT). 请看 [许可证文件](https://npmcn.com/package/LICENSE.md) 更多信息.

## 组件剖析器`@flareapp/react/profiler`(中文(简体) )

Opt- in mang 剖面: 将组件包成记录 `browser_component` 间距 它的挂载, 嵌入在活性页面负荷/ 导航跟踪下 。 要求追查 启用( e)`enableTracing: true`) (中文(简体) ).

```tsx
import { FlareProfiler, withFlareProfiler } from '@flareapp/react/profiler';

// Wrap at the definition:
export default withFlareProfiler(ProductPage);

// Or wrap an inline subtree:
<FlareProfiler name="Gallery">
    <ProductGallery />
</FlareProfiler>;
```

斯潘斯巢入一棵树:被描述为近亲所描述的儿童巢; 两者之间未标注的组件是透明的。 无活性跟踪的组件 (跟踪关闭,或者没有页面负荷/导航根)记录无所记录,并正常进行.

在一个已经挂起的外形祖先的巢穴中挂起的部件 在那个祖先的下方,当它完成起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起 这棵树是 对,但瀑布显示孩子在父母终止后开始。 页面正文 在一个持续布局中互换,是常见的看到这一点的方法.

### 自主时间

每个部件都带 `flare.component.self_time_ns`: 长度减去时间 儿童概况。 时间重叠的孩子被计算一次, 所以价值永远不会去 低于零.

在父母的跨度关闭后挂起的孩子不减少。 它的工作发生在 父窗口,所以母窗口保持全长.

反应在渲染过程中启动每个组件,并在执行过程中结束所有组件,因此兄弟间重叠 时间。 因此一棵树的自我时间加起来超过了根的长度.

**输入主条目的地方.** `@flareapp/react/profiler` 故意无依赖,所以 它不将反应登记为框架。 该身份(`flare.framework.name`告诉弗拉 组件跨度来自 React,并导入 `@flareapp/react` 任何设置在应用程序。 一个应用程序 仅使用 `/profiler` 条目报告 `js` 相反,它的组件跨度被归因于平地 JavaScript 而非反应.

**名称 :** 横跨名称为 `name` (道具或 `withFlareProfiler(Component, { name })`, (中文(简体) ), 接下来 `Component.displayName`,则 `Component.name`. 小型生产建筑 管理器 `Component.name`,所以通过一个明确的 `name` 或设置 `displayName` 用于生产.

**暂停( v1 限制) :** (单位:千美元) `<Suspense>` 配置子树内的边界可以结束 a 父母在被中止的孩子复职之前的间隔,因此孩子可能在其父母之外出现 在瀑布中,其持续时间包括数据等待。 如果等待超过 微量的闲置窗口 儿童跨被丢弃 而不是附着在封闭的微量.

**渲染相启动 :** 间距开始于组件第一次生成时,而不是反应时。 A 类 使反应延迟或抛弃(`useDeferredValue`,一个中断的过渡,一个 `<Activity mode="hidden">` 预先透露的)帐单,该帐单与该部分存在全部缺口.

**参考和静态:** 包装器是一个纯函数组件。 它前进没有 `ref` 结束 `forwardRef` 并保持不静态。 反应19 `ref` 是一种普通道具 直接通过 所以这只会影响 对应对等距离的 16-18 的一半; 在那里, 以 `FlareProfiler` 在组件内而不是 应用 `withFlareProfiler` 对它.

## 常见问题

### @flareapp/react 是什么？

对 shipapp\.io 的反应客户端

### 如何安装 @flareapp/react？

在项目目录运行 npm install @flareapp/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.0\.0\|\|^17\.0\.0\|\|^18\.0\.0\|\|^19\.0\.0）、@flareapp/js（^2\.13\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @flareapp/react 支持 TypeScript 吗？

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

### @flareapp/react 支持 ESM 还是 CommonJS？

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

### @flareapp/react 可以商用吗？

@flareapp/react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @flareapp/react 的下载量有多少？

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

### @flareapp/react 还在维护吗？

最新版本 2\.13\.0 发布于 2026/09/17（1 个月前）；至今共发布 28 个版本，其中过去 12 个月发布了 20 个；首次发布于 2024/01/25。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。