当前位置: 首页 > news >正文

无法用raven-js,如何直接使用TraceKit标准化错误字符串(一次有趣的探索)

引子:网上三年前(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错误对象。

http://www.lryc.cn/news/336921.html

相关文章:

  • Docker学习笔记(二):在Linux中部署Docker(Centos7下安装docker、环境配置,以及镜像简单使用)
  • uniapp 检查更新
  • (Java)数据结构——正则表达式
  • 第6章 6.3.1 正则表达式的语法(MATLAB入门课程)
  • RX8130CE为用户提供带复位延迟和主备电管理的解决方案
  • JS文件导出变量
  • 已知私钥和密文,如何用python进行RSA解密
  • vue2-vue3面试
  • jmeter生成随机数的详细步骤及使用方式
  • 速盾:为什么会出现高防cdn?它适合哪些行业?
  • GB∕T 25058-2019 信息安全技术 网络安全等级保护实施指南
  • 使用Nodejs + express连接数据库mongoose
  • 朗致集团面试-Java架构师
  • Ubuntu 23.10 搜狗拼音输入法闪屏解决
  • 备战蓝桥杯---刷杂题2
  • .[[backup@waifu.club]].svh勒索病毒数据怎么处理|数据解密恢复
  • SpringFramework实战指南(八)
  • Ceph学习 -4.Ceph组件介绍
  • Python100个库分享第13个—awesome-slugify(处理Unicode)
  • 01 SQL基础 -- 初识数据库与安装
  • PyTorch搭建Autoformer实现长序列时间序列预测
  • FFmpeg: 简易ijkplayer播放器实现--06封装打开和关闭stream
  • 使用Android完成案例教学
  • 面向对象设计原则实验“依赖倒置原则”
  • PMP考试到底难在哪里?
  • Linux执行命令监控详细实现原理和使用教程,以及相关工具的使用
  • 算法设计与分析实验报告c++实现(生命游戏、带锁的门、三壶谜题、串匹配问题、交替放置的碟子)
  • 【电子通识】热风枪的结构与使用方法
  • mysql知识点
  • css Animation 动画-右进左出