Vite+Vue3项目在Safari中报错堆栈跟踪无效问题求助

问题现象 #

团队近期将项目从 Vue2/Webpack 技术栈升级至 Vue3/Vite，使用 Bugsnag 作为崩溃监控工具实现异常告警。上线后发现异常：Safari 浏览器下触发的崩溃，上报的堆栈跟踪完全无效；同一 Bug 在 Chrome、Firefox 中复现时堆栈信息完全准确，可以直接定位问题，但 Safari 下堆栈信息偏差极大，甚至无法匹配到正确的报错文件。

同一 Bug 在两种浏览器下的堆栈输出对比如下：

Chrome 堆栈 #

TypeError Cannot read properties of undefined (reading 'id') 
    src/components/LayoutInformation.vue:148:46 
    src/components/LayoutInformation.vue:146:21 Proxy.mergedHoleInformation
    node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:167:24 Dh.run
    node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:1101:38 get value [as value]
    node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:2845:29 Object.get [as mergedHoleInformation]
    src/components/LayoutInformation.vue:15:22 
    node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:850:20 r
    node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6579:54 Jr
    node_modules/@pdga-technology/ui/dist/ui.es.js:809:10 

Safari 堆栈 #

TypeError undefined is not an object (evaluating 'n.id') 
    src/components/official/EventHomeTournament.vue:543:48 
    [native code] reduce
    src/components/official/EventHomeTournament.vue:543:48 mergedHoleInformation
    [native code] mergedHoleInformation
    node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:26:22 run
    node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:26:22 value
    node_modules/@vue/compiler-core/dist/compiler-core.esm-bundler.js:2236:21 get
    src/components/official/EventHomeTournament.vue:543:48 
    node_modules/@vue/compiler-core/dist/compiler-core.esm-bundler.js:2236:21 r
    node_modules/@vue/compiler-core/dist/compiler-core.esm-bundler.js:2236:21 Jr
    src/components/elements/OfflineIndicator.vue:4:53 
    node_modules/@vue/compiler-core/dist/compiler-core.esm-bundler.js:2236:21 r
    node_modules/@vue/compiler-core/dist/compiler-core.esm-bundler.js:2236:21 Jr
    src/components/elements/OfflineIndicator.vue:4:53 
    node_modules/@vue/compiler-core/dist/compiler-core.esm-bundler.js:2236:21 r
    node_modules/@vue/compiler-core/dist/compiler-core.esm-bundler.js:2236:21 
    node_modules/@vue/compiler-core/dist/compiler-core.esm-bundler.js:2236:21 bm
    node_modules/@vue/compiler-core/dist/compiler-core.esm-bundler.js:2236:21 De
    node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:26:22 run
    [native code] run
    node_modules/@vue/compiler-core/dist/compiler-core.esm-bundler.js:2236:21 Jo
    node_modules/@vue/compiler-core/dist/compiler-core.esm-bundler.js:2236:21 BC
    [native code] promiseReactionJob

具体异常特征 #

• 堆栈文件映射完全错误：以上述报错为例，崩溃实际发生在 mergedHoleInformation 函数内，该函数归属文件为 LayoutInformation.vue，Safari 堆栈虽然识别到了正确的函数名，却错误将其标注在 EventHomeTournament.vue 文件下。
• 部分场景下 Safari 生成的堆栈体积异常庞大，超过 Bugsnag 设置的 1MB 上报上限，导致对应告警完全丢失；Chrome、Firefox 下同类型错误的堆栈长度均为正常短长度，不存在超限问题。
• Safari 开发者工具内的 source map 解析表现正常，查看项目 JS 文件、Vue 组件源码均无映射错误。
• 尝试基于 Vite/Vue3 搭建最小复现样例，通过多种方式触发错误，生成的堆栈跟踪均正常，暂未复现该问题。

当前项目配置情况 #

项目 Vite 自定义配置极少，仅做了三项配置：引入 @vitejs/plugin-legacy 构建旧浏览器兼容产物、开启 Vue 编译器空白符保留选项、配置少量图片路径别名。项目依赖数量不多，具体依赖清单如下：

"dependencies": {
  "@bugsnag/js": "^7.16.2",
  "@bugsnag/plugin-vue": "^7.16.2",
  "@fortawesome/fontawesome-pro": "^5.15.4",
  "axios": "^0.24.0",
  "laravel-echo": "^1.11.3",
  "moment": "^2.29.1",
  "pusher-js": "^7.0.6",
  "uikit": "^3.12.2",
  "vue": "^3.2.31",
  "vue-i18n": "^9.2.0-beta.29",
  "vue-router": "^4.0.14",
  "vue-template-compiler": "^2.6.14",
  "vuex": "^4.0.2"
}

已做排查 #

目前检索到多个反馈 Safari 堆栈行号显示错误的相关 issue，但均被标记为已解决，未找到适配当前场景的有效方案，现寻求相关排查思路与解决方案。

内容的提问来源于stack exchange，提问作者benbotto