iOS14.7.1下Facebook内置浏览器打开Next.js网站广告报错求助

排查与修复方案 #

• 优先获取具体报错信息
  iOS系统的所有App内置WebView都支持Safari远程调试，无需在移动端打开控制台：
  1. 打开iOS设备的「设置 - Safari浏览器 - 高级」，开启「Web检查器」
  2. 在Mac端打开Safari，点击顶部菜单栏「开发」，找到对应的iOS设备，选择Facebook内置浏览器对应的WebView进程，即可直接查看控制台报错、网络请求、资源加载情况
     也可以在pages/_app.js的组件挂载生命周期中添加全局错误监听，将报错信息、userAgent上报到自有服务端落盘：

  useEffect(() => {
    // 捕获JS语法/运行时错误
    window.onerror = function(message, source, lineno, colno, error) {
      // 这里调用自己的上报接口传参
      fetch('/api/report-error', {
        method: 'POST',
        body: JSON.stringify({
          message, source, lineno, colno, error: error?.stack, ua: navigator.userAgent
        })
      })
      return false
    }
    // 捕获未处理的Promise异常
    window.addEventListener('unhandledrejection', (event) => {
      fetch('/api/report-error', {
        method: 'POST',
        body: JSON.stringify({
          type: 'unhandledrejection',
          reason: event.reason?.stack || event.reason,
          ua: navigator.userAgent
        })
      })
    })
  }, [])
  

• 常见兼容问题修复
  该问题为iOS 14.7.1对应的WebKit内核（Safari 14.1版本）不兼容高版本ES语法导致，可按以下步骤修复：
  1. 项目根目录新建.browserslistrc文件，指定编译兼容范围，Next.js会自动根据该配置转译JS语法：

  last 2 versions
  iOS >= 14
  Safari >= 14
  not dead
  

  2. 在next.config.js中用next-transpile-modules配置转译所有可疑第三方依赖，避免依赖包自带的未转译高版本语法报错：

  const withTM = require('next-transpile-modules')(['detect-browser', 'react-slick', 'react-lazy-load-image-component', 'rifm', 'uniqid']);
  
  module.exports = withTM({
    // 你原有next.config.js的其他配置
    productionBrowserSourceMaps: true, // 开启生产环境源码映射，方便报错定位
  })
  

  3. 手动排查业务代码中是否使用了Safari 14.1不支持的语法，包括但不限于：可选链?.、空值合并运算符??、逻辑赋值运算符||= &&= ??=、BigInt、顶层await等，将这类语法替换为ES5兼容写法。
• 临时验证方案
  可以先在Next.js配置中关闭SWC压缩、改用Terser压缩，部分老版本SWC转译的代码在低版本Safari上存在兼容性问题。

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