Web Share API含try/catch仍在关闭时抛出未处理错误排查

问题判断：大概率是iOS模拟器的模拟Bug #

iOS模拟器的Safari对Web Share API的实现存在瑕疵，真机Safari中用户取消分享会抛出标准的AbortError，且能被正常捕获，但模拟器会抛出非预期的未处理错误，这属于模拟器的特定问题，而非Web Share API或你的代码逻辑错误。

解决办法 #

1. 确保错误捕获覆盖完整Promise链 #

即使使用了try/catch，也要确保navigator.share()的Promise链式调用被完整包裹，避免错误冒泡到全局。示例优化代码：

const handleShare = async () => {
  try {
    const sharePromise = navigator.share({
      title: '分享标题',
      text: '分享内容',
      url: window.location.href
    });

    // 显式添加catch过滤模拟器错误
    await sharePromise.catch(err => {
      // 过滤取消操作或模拟器特定错误
      const isCancelOrSimulatorError = err.name === 'AbortError' 
        || err.message.includes('Canceled') 
        || err.message.includes('simulator');
      if (!isCancelOrSimulatorError) {
        throw err;
      }
    });

    console.log('分享成功');
  } catch (error) {
    // 仅处理真正的失败错误，忽略取消/模拟器问题
    if (!(error.name === 'AbortError' || error.message.includes('Canceled'))) {
      console.error('分享失败:', error);
    }
  }
};

2. 优先用真机验证功能 #

iOS模拟器的Web Share行为和真机存在差异，真机上用户取消分享的流程会触发标准的AbortError，可以被try/catch正常捕获，不会出现未处理错误。

3. 全局错误捕获兜底（可选） #

如果仍有遗漏的错误，可以在React应用中添加全局错误边界，捕获组件树中的未处理错误：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 过滤模拟器Web Share的取消错误
    if (!(error.name === 'AbortError' || error.message.includes('Canceled'))) {
      console.error('全局错误:', error, errorInfo);
    }
  }

  render() {
    if (this.state.hasError) {
      return <h1>出现错误，请重试</h1>;
    }
    return this.props.children;
  }
}

// 使用方式
<ErrorBoundary>
  <button onClick={handleShare}>分享</button>
</ErrorBoundary>

总结 #

• 你遇到的问题是iOS模拟器的特定实现Bug，真机上不会复现；
• 通过加强错误过滤、覆盖完整Promise链的捕获逻辑，可以避免模拟器中的未处理错误提示；
• 开发验证时优先使用真机测试Web Share API的真实行为。

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