引子:网上三年前(2020)的文章介绍了一个raven-js 简单说就是把堆栈信息格式化兼容各浏览器,便于查看错误来源。
**but:**到处找了一下raven-js,已经没有官方出处了,只在Sentry的源码仓库里发现它已经被Sentry集成到@sentry/browser里面了:https://github.com/getsentry/sentry-javascript.git
sentry-javascript/docs/migration/v4-to-v5_v6.md
更重要的是:它的用法要在初始化时注入dsn,我们要的并不想跟着sentry服务器走呀,只想拿到堆栈信息格式化而已。
import Vue from 'vue'
import VueRaven from 'vue-raven'
Vue.use(VueRaven, {
dsn: 'https://<key>@sentry.io/<project>'
})
所以我们应该直接看raven-js的底层:raven-js使用TraceKit标准化错误字符串。
找这个TraceKit: https://www.npmjs.com/package/tracekit
安装方式还比较奇葩,不能和项目的pnpm兼容,所以新建个npm init -y项目去搞:
npm install bower -g
bower install tracekit
搞下来还以为是个很大的库,没想到核心就一个js文件,1000多行而已,不多。
比较麻烦的是它是umd写的:tracekit.js,省去中间:
(function(window, undefined) {
if (!window) {
return;
}
var TraceKit = {};
。。。
// UMD export
if (typeof define === 'function' && define.amd) {
define('TraceKit', [], TraceKit);
} else if (typeof module !== 'undefined' && module.exports && window.module !== module) {
module.exports = TraceKit;
} else {
window.TraceKit = TraceKit;
}
}(typeof window !== 'undefined' ? window : global));
这个要直接在esm里面import进来源码中一起编译还是比较麻烦的(我写的是库,不能简单的把它丢html模板里直接引入,那样很简单我知道,但我要引入它和其他埋点库融合在一起) 从这篇文章得到一个线索: vite import umd,试了它说的两个插件,用@rollup/plugin-commonjs这个构建成功了:
1、新建项目,导入rollup、@rollup/plugin-node-resolve
2、rollup.config.mjs配置如下:
import cjs from "rollup-plugin-cjs-es";
export default {
input: ['src/tracekit.js'], // 你的主入口文件
output: {
dir: 'dist', // 输出目录
format: 'esm', // 输出格式,可以是 'amd', 'cjs', 'esm', 'iife', 'umd' 或 'system'
},
plugins: [
cjs({
nested: true
})
],
};
3、构建 npx rollup -c
4、dist下面的tracekit.js就是支持esm的了
5、把dist/tracekit.js拷贝到你项目的任何地方,导入
import { default as TraceKit } from '../libs/tracekit.js'
6、官方的例子不能用了,因为那个是劫持window.onerror等方法,并且得写个异步监听,我们要的是直接的把错误转成 标准化错误字符串 的。 这个只能拔代码了。幸运的是,我帮你拔完了,找到了这个方法可以转换:
TraceKit.computeStackTrace(error as Error)
error就是你捕获到的原生的js错误对象。