简单的在 sentry.io注册了一个账户
开始由向导进入并且添加监控
发现它针对大量的平台,搞了很多的sdk啥的
我按照监控我线上的博客站 icebreaker.top 的思路
选择了4项贴合的
如图所示:
yarn add @sentry/vue @sentry/tracing
import Vue from "vue";
import * as Sentry from "@sentry/browser";
import { Integrations } from "@sentry/tracing";
Sentry.init({
Vue,
dsn: "https://xxx.ingest.sentry.io",
autoSessionTracking: true,
integrations: [
new Integrations.BrowserTracing(),
],
// We recommend adjusting this value in production, or using tracesSampler
// for finer control
tracesSampleRate: 1.0,
});
类似这样,他就做到了前端的简单的监控
当然我们肯定要深入其中,查看@sentry/vue
源码中,到底在哪些地方埋了点的
从 npm 上查看依赖,看到在运行时是依赖的 @sentry/browser
我们先按照Readme的方式
import Vue from 'vue'
import App from './App'
import router from './router'
import * as Sentry from '@sentry/vue'
Sentry.init({
Vue: Vue,
dsn: '__PUBLIC_DSN__',
})
看了一下,所有js的都在里面,也用了 lerna
,有点意思
到 @sentry/vue
看了一下 rollup
,ts 打了2个iife(立即执行函数)包,都是 ES5 Browser Tracing Bundle
只是一个用 terser
压缩了一个没有
tsconfig.esm.json
里面是 ts 打包到 esm/
下的
显然一个是给es6编程用的,一个cdn或者下载下来直接使用的
我们主要看esm
从 代码看,从@sentry/browser
导出了大量的func,index.ts
里也没有默认导出
所以要 import * as Sentry from '@sentry/vue'
来用
我们主要看针对Vue的自定义部分
这部分就包含了,最重要的 init
方法,看看做了哪些事情
下面主要就是2个了
browserInit
VueHelper
browserInit
是 @sentry/browser
的配置,我们主要就看 VueHelper
默认开启错误追踪_attachErrorHandler
,按选项开启_startTracing
错误追踪很简单,拿到Vue根实例,劫持一下Vue.config.errorHandler
还用了setTimeout 0
这种,让它本身的发送请求,进入下一个宏事件循环,Get!
原话是
// Capture exception in the next event loop, to make sure that all breadcrumbs are recorded in time.
主要看发送到sentry服务器的有哪些东西 metadata:
info
是 Vue 特定的错误信息,比如错误所在的生命周期钩子然后就去走 getCurrentHub withScope captureException 这些应该就是发送方法
居然还有事务 getTransaction
_startTracing
_applyTracingHooks
// Don't attach twice, just in case
if (vm.$options.$_sentryPerfHook) {
return;
}
vm.$options.$_sentryPerfHook = true;
rootHandler
处理根节点的
childHandler
处理子节点的
主要都用的 vm.$once(
hook:${hook})
span transaction 这种目前看不懂,要后续看其他包的时候才可以知道
now拿的是'@sentry/utils'
,难道是Date.now() or performance里的?
hooks
// Each component has it's own scope, so all activities are only related to one of them
appliedTracingHooks
一个500ms的宏事件,打出一个warn?
接下来用一个全局的mixin,附加自个的 beforeCreate hook
在里面清除 appliedTracingHooks 事件和 applyTracingHooks(this)
applyTracingHooks里面也是根据 internalHooks
去劫持原先的钩子
// Mappings from operation to corresponding lifecycle hook.
const HOOKS: { [key in Operation]: Hook[] } = {
activate: ['activated', 'deactivated'],
create: ['beforeCreate', 'created'],
destroy: ['beforeDestroy', 'destroyed'],
mount: ['beforeMount', 'mounted'],
update: ['beforeUpdate', 'updated'],
};
然而想要理解这套,还是必须从 '@sentry/types'
去找到 Span, Transaction
究竟是个啥
vueRouterInstrumentation
检测 vue-router
的 onError
hooks 和 添加一个全局的导航守卫
有意思的是,他通过闭包,在闭包外声明了一个 firstLoad
的 flag:boolean
用来判断,页面是直接进入的,还是通过导航进入的。学习到了
Vue检测
Vue-Router