@ flareapp/反应
反应集成 火焰 错误跟踪和记录 。 提供错误边界组件和 a 用于捕捉和向Flare报告反应组件错误的19+错误处理器.
安装
npm install @flareapp/react @flareapp/js
快开始
初始化 Flare 客户端, 并用错误边界来包装您的组件树 :
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) (中文(简体) ).
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,随行
与已解析的棋子一起进行反应版本 :
'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 用于显示.
识别用户
import { flare } from '@flareapp/js';
flare.setUser({ id: 123, email: '[email protected]', fullName: 'Jane Doe' });
见 JavaScript 识别用户文件 用于完整字段列表。 过 null 来清理.
文档
关于出错边界的完整文档, React 19+ 出错处理器,使用寿命周期回调器,以及更多可用文件 时间 耀斑/多克/反应/一般/安装。 。 。 .
兼容性
- 反应16、17、18、19
flareReactErrorHandler需要反应 19+withFlareProfiler转发ref仅针对19
许可证
麻省理工学院许可证(MIT). 请看 许可证文件 更多信息.
组件剖析器@flareapp/react/profiler(中文(简体) )
Opt- in mang 剖面: 将组件包成记录 browser_component 间距
它的挂载, 嵌入在活性页面负荷/ 导航跟踪下 。 要求追查
启用( e)enableTracing: true) (中文(简体) ).
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 对它.