无法用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错误对象。