@ flareapp/ veue (帮助)
虚拟集成 火焰 错误跟踪和记录 。 安装一个 Vue 错误处理器, 捕获组件错误, 并将其报告给 Flare 并带有 Vue 特定上下文( 组件名称, 生命周期信息) .
安装
npm install @flareapp/vue @flareapp/js
快开始
初始化 Flare 客户端并注册 Vue 错误处理器 :
import { createApp } from 'vue';
import { flare } from '@flareapp/js';
import { flareVue } from '@flareapp/vue';
import App from './App.vue';
flare.light('YOUR_FLARE_API_KEY');
const app = createApp(App);
flareVue(app);
app.mount('#app');
日志
除了出错,客户端还可以发送结构化日志. 日志是选入的: 启用这些日志 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 });
识别用户
import { flare } from '@flareapp/js';
flare.setUser({ id: 123, email: '[email protected]', fullName: 'Jane Doe' });
见 JavaScript 识别用户文件 用于完整字段列表。 过 null 来清理.
文档
有关Vue 错误处理器及其选项的完整文档可在 耀斑/docs/vue/一般/安装。 。 。 .
构成部分概况
记录每个组件挂载的跨度, 嵌入在活性页面负荷或导航跟踪下。 需要追踪
(单位:千美元)enableTracing: true)和一个许可列表:
app.use(flareVue, {
router,
profileComponents: ['ProductPage', 'CartPage', /^Checkout/],
});
app.use(flareVue, …) 财务报告和审定财务报表 flare.configure({ enableTracing: true }) 可以按任一顺序运行。 安装
插件首先是精细的: 路由器守护和剖析器钩子在启动跟踪之前一直闲置.
字符串完全匹配组件名称。 正则表达式匹配 test()。 。 。 . true 配置每个命名
组件,该组件在探索时有用,但将在真实页面上按下每个痕量封顶的1024个跨度并掩埋
横跨你关心.
名称来自错误报告所用的同一分辨率: SFC 编译器的名称来自文件名,
然后是明确的 name 选项,然后 AnonymousComponent重新命名一个部件 静悄悄地停止了它.
只记录了山峰。 更新, <KeepAlive> 重新启动和卸载不是.
在一个已经挂起的外形外形外形外形外形的外形内 挂起的部位 仍然在外形外的外形下 当它完成安装时, 它的长度关闭 。 树是正确的,但瀑布显示孩子从 其父母终止。 一个在持续布局内互换的页面正文,是看到这一点的通常方式.
Async 组件和 <Suspense>数字 : Vue 将组件作为挂载器处理 同步 儿童
已挂载。 带有同步的组件 setup(),或其中的一个 <Suspense> 边界,因此
在它的被描述的祖先的跨度关闭后,它出现在瀑布的后方。 如果
到那时,整个痕量被关闭, 跨度被抛出,而不是附在完成的痕量上.
自主时间
每个部件都带 flare.component.self_time_ns: 长度减去时间
儿童概况。 时间重叠的孩子被计算一次, 所以价值永远不会去
低于零.
在父母的跨度关闭后挂起的孩子不减少。 它的工作发生在 父窗口,所以母窗口保持全长.
一个布局是通常的例子. vue-router 解析布局挂载后的第一个路由, 所以页面
组件的工作位于布局窗口之外.
以 Inertia 命名
Inertia 名称导航从页面对象的页面组件后跨出, 因此根读取 Products/Show。 。 。 .
文件后面的 Vue 名称组件, 所以 ./Pages/Products/Show.vue 实值 Show,以及 ./Pages/Orders/Show.vue 实值
(单位:千美元) Show。如果想要将两者读取相同,则在页面组件中明确设置名称:
<script setup>
defineOptions({ name: 'Products/Show' });
</script>
没有它,跨度使用赤色文件名,通常仍然可以读取,因为根会分解.
兼容性
- 第3组
许可证
麻省理工学院许可证(MIT). 请看 许可证文件 更多信息.