排查了整整半天！一行 console.log 让 iOS 页签消失，可选链没救下我的血泪教训

跟这个 Bug 拉扯了几个小时，最后我把罪魁祸首锁定在了一行看起来人畜无害的代码上。

事情发生在 onMounted 里的埋点追踪。顺着调用栈一层层往里剥：

罪魁祸首就是这个 console.log。写这行代码的兄弟（甚至可能就是几周前的我自己）为了拿客户端信息，在日志参数里顺手写了这么一句：

window?.NativeBridge?.getVendorId()

当时估计心里还想得很美：“看，我用了 JS 的可选链 ?.，空指针保护做得死死的，绝对不可能报错！”

但现实打实地给我上了一课：可选链根本不是这么用的。

这里面藏了三个极易踩坑的技术细节，整理出来大家共勉。

很多同学以为写了 ?. 就万事大吉，其实是混淆了可选属性访问与可选函数调用的区别。

在表达式 window?.NativeBridge?.getVendorId() 中：

• 前两个 ?. 确实成功保护了 window 和 NativeBridge 不会因为是 null/undefined 而报空指针；
• 但是！ 我们的 iOS 原生层根本没注入 getVendorId 这个方法（该 API 当时仅 Android 端提供）。

这就尴尬了：NativeBridge 这个对象是真实存在的，所以表达式一路顺利求值，到了最右侧，得到了一个 undefined。紧接着，代码解析到下一个 Token ()，试图去执行 undefined()。JS 引擎立刻当场抛出运行时异常：

TypeError: window.NativeBridge.getVendorId is not a function

平台桥接能力的不一致，加上缺失了函数调用的可选链语法，直接引爆了运行时崩溃。

我们总习惯觉得 console.log 很安全，大不了就是打不出来嘛。

但别忘了，在 JavaScript 中，函数入参是 Apply-by-Value（传值调用）。这意味着传递给 log 的参数必须先在当前作用域内实时求值解析，才能把结果传入 console.log。求值过程抛了错，而且这行 log 刚好飘在 try/catch 块外面，未捕获异常直接炸开了栈。

在 Vue 3 中，如果我们给 onMounted 传入一个 async 函数，它的底层运行逻辑是这样的：

onMounted(async () => {
  // 1. 触发埋点 -> 内部求值抛出 TypeError
  TrackerSDK.track('page_view', { ... })

  // 2. JS 引擎捕获到未处理异常，立刻 reject 当前 async 函数返回的 Promise
  // 3. 执行栈中断，后续代码（业务渲染、控制台 log）彻底失去了入栈执行的机会
  await loadData()
  tabVisible.value = checkFeatureSupport()
  console.log('1')
})

需要澄清的是：中断代码执行的是 JavaScript 原生的 Promise 异常传播机制，而不是 Vue。Vue 的全局错误处理器（app.config.errorHandler）只是在最外层接住了这个 unhandled rejection 并打印警告，但它无法拯救已经中断的 async 上下文。

这就是为什么我打在后面的 console.log('1') 和页签展示逻辑彻底消失——它们压根就没机会被执行。

说来惭愧，在找到真相前，我凭着经验瞎蒙，绕了一大圈：

• 第一轮脑补：“肯定是 iOS Bridge 注入太慢了，onMounted 跑完了原生方法还没挂载上来！”——结果被网络请求模块啪啪打脸，人家明明能正常拿到版本号。
• 第二轮脑补：“是不是 typeof null === 'object' 导致内部状态判断混淆了？”——抓着类型转换咬文嚼字半天，完全偏离了主线。
• 第三轮脑补：“难道是 <keep-alive> 路由缓存让生命周期失效了？”——甚至跑去加了一堆 onActivated 日志。

真正的破局点极其朴素：我放弃了所有高大上的理论推演，直接采用最原始的二分代码隔离法——把埋点 SDK 那行代码直接注释掉，打包，刷页面。

5 秒钟，iOS 上的页签和 console.log('1') 瞬间全出来了！

当时我的内心真是一万匹马奔腾而过。此前花在一堆伪假设上的分析，纯粹是在自我感动。

这件事解决完，我默默在团队的 Code Review 规范里加了这么几条：

最快定位问题的手段永远是找变量。直接跑一条命令：

git log --since="last Friday" --oneline -- <相关文件>

看看这两天谁动过相关代码，比盯屏幕做脑力体操管用一百倍。

在现代 JS 开发中，调用不确定的原生能力，请务必加上针对函数执行的可选链语法 ?.()：

// ❌ 极度危险：如果 getVendorId 不是函数，直接抛 TypeError
window?.NativeBridge?.getVendorId()

// ✅ 现代 JS 推荐：只有当它真正是函数时才执行，优雅兜底
const vendorId = window?.NativeBridge?.getVendorId?.() ?? ''

面对诡异的跨平台崩溃，实验结果永远比逻辑推理更可靠。注释掉一半代码，看看坏没坏；再注释一半，范围立刻缩到最小。

吃一堑长一智吧，上线前的坑踩得越多，生产环境的系统才能越稳。今晚终于能按时下班了！