淘宝商家网站建设,搜索引擎推广价格,wordpress 分页插件,seo排名优化怎样引子#xff1a;网上三年前#xff08;2020#xff09;的文章介绍了一个raven-js 简单说就是把堆栈信息格式化兼容各浏览器#xff0c;便于查看错误来源。
**but#xff1a;**到处找了一下raven-js#xff0c;已经没有官方出处了#xff0c;只在Sentry的源码仓库里发现…引子网上三年前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-ravenVue.use(VueRaven, {dsn: https://keysentry.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.js6、官方的例子不能用了因为那个是劫持window.onerror等方法并且得写个异步监听我们要的是直接的把错误转成 标准化错误字符串 的。 这个只能拔代码了。幸运的是我帮你拔完了找到了这个方法可以转换
TraceKit.computeStackTrace(error as Error)error就是你捕获到的原生的js错误对象。
