如何阻止Safari在报错时抢占焦点？

方法1：禁用Next.js开发环境的错误覆盖层 #

在项目根目录的next.config.js中添加配置，关闭默认的错误弹窗覆盖层，从根源避免Safari因弹窗触发焦点抢占：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  // 可选：禁用构建活动提示
  devIndicators: {
    buildActivity: false,
  },
  webpack: (config, { dev }) => {
    if (dev) {
      config.devServer.client.overlay = false;
    }
    return config;
  },
};

module.exports = nextConfig;

修改后重启开发服务器，错误将仅在控制台输出，不会弹出抢占焦点的弹窗。

方法2：调整Safari开发者工具设置 #

通过Safari自身的开发者工具配置，让错误仅在控制台静默记录，不触发系统级的焦点提示：

• 打开Safari开发者工具（快捷键Cmd + Opt + I）
• 点击右上角的设置图标（⚙️）
• 切换到「控制台」标签页，勾选「静默记录错误」，同时取消勾选「显示错误弹窗」类选项（不同Safari版本选项名称略有差异）

方法3：添加React全局错误边界 #

通过自定义错误边界组件捕获应用内的组件级错误，避免错误冒泡触发默认的系统提示：

1. 创建错误边界组件：

// components/ErrorBoundary.js
import React from 'react';

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

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

  componentDidCatch(error, errorInfo) {
    console.error('应用错误:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <div>页面出现错误，请查看开发者控制台详情</div>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

2. 在_app.js中全局应用：

// pages/_app.js
import ErrorBoundary from '../components/ErrorBoundary';

export default function MyApp({ Component, pageProps }) {
  return (
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  );
}

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