Facebook JavaScript SDK在Brave浏览器中登录失效问题排查

我用create-react-app搭建的React项目集成Facebook JavaScript SDK时，遇到一个奇怪的问题：仅在Brave浏览器中登录功能失效——登录窗口能正常打开，但应用会抛出「Failed to fetch」错误，在Safari、Microsoft Edge等其他浏览器中运行完全正常。

排查后发现Brave拦截了Facebook的一个特定脚本，之前参考过相似问题但没解决，现在想搞清楚三个问题：

1. 为何仅Brave浏览器出现该错误？
2. 是否有Brave设置可避免此错误？
3. 将登录调用放入try/catch块吞掉错误是否可行？

相关代码 #

Facebook SDK初始化代码 #

window.FB.init({
  appId: process.env.REACT_APP_FACEBOOK_APP_ID,
  cookie: true,
  xfbml: true,
  version: 'v17.0',
});

登录方法调用代码 #

export async function login() {
  return new Promise((resolve) => {
    window.FB.login(
      function (response: any) {
        if (response.authResponse) {
          console.info(response.authResponse);
        } else {
          console.error('User canceled login or did not authorize');
        }
      },
      {
        // scope: '',
        return_scopes: true,
        enable_profile_selector: true,
        config_id: process.env.REACT_APP_FACEBOOK_CONFIG_ID,
      },
    );
  });
}

错误栈信息 #

Failed to fetch
TypeError: Failed to fetch
    at https://localhost:3000/static/js/bundle.js:29875:111
    at i (https://connect.facebook.net/en_US/sdk.js?hash=9ce9d98548b3f81266135fe023af13ec:111:957)
    at h (https://connect.facebook.net/en_US/sdk.js?hash=9ce9d98548b3f81266135fe023af13ec:111:795)
    at Object.a [as log] (https://connect.facebook.net/en_US/sdk.js?hash=9ce9d98548b3f81266135fe023af13ec:111:1675)
    at Object.i [as logEvent] (https://connect.facebook.net/en_US/sdk.js?hash=9ce9d98548b3f81266135fe023af13ec:126:739)
    at k (https://connect.facebook.net/en_US/sdk.js?hash=9ce9d98548b3f81266135fe023af13ec:155:2817)
    at transform (https://connect.facebook.net/en_US/sdk.js?hash=9ce9d98548b3f81266135fe023af13ec:155:4056)
    at Object.prepareCall (https://connect.facebook.net/en_US/sdk.js?hash=9ce9d98548b3f81266135fe023af13ec:155:7687)
    at a (https://connect.facebook.net/en_US/sdk.js?hash=9ce9d98548b3f81266135fe023af13ec:156:1075)
    at Object.a [as login] (https://connect.facebook.net/en_US/sdk.js?hash=9ce9d98548b3f81266135fe023af13ec:127:618)

被拦截的脚本链接 #

https://www.facebook.com/platform/impression.php/xxxxxxxxxxxxxxx/?api_key=xxxxxxxxxxxxxxxx&lid=117&payload=%7B%22payload%22%3A%7B%22cbt_delta%22%3A0%2C%22logger_id%22%3A%22xxxxxxxxxxxxxxxx%22%2C%22action%22%3A%22client_login_start%22%2C%22client_funnel_version%22%3A1%7D%2C%22source%22%3A%22jssdk%22%7D

问题解答 #

1. 为何仅Brave浏览器出现该错误？ #

Brave默认启用Shields安全防护，核心目标是阻止跟踪器、广告和第三方统计脚本。你被拦截的impression.php是Facebook用来记录登录启动事件的跟踪脚本，正好在Brave的默认拦截名单内。其他浏览器要么默认防护等级低，要么没有针对这类跟踪脚本做强制拦截，所以不会触发错误。

2. 是否有Brave设置可避免此错误？ #

有两种用户侧的解决方式：

• 临时关闭当前网站Shields：点击地址栏右侧的狮子图标，切换Shields为「关闭」状态，刷新页面后重试登录。
• 添加网站例外：进入Brave设置的「Shields and privacy」页面，找到「Trackers & ads blocking」，将你的网站域名加入「允许列表」，或直接允许Facebook相关域名的跟踪脚本。

注意：这些设置需要用户手动操作，开发者无法通过代码强制修改。

3. 将登录调用放入try/catch块吞掉错误是否可行？ #

可以但不推荐，具体分析：

• 从错误栈看，错误是在Facebook SDK内部的logEvent方法中抛出的，你当前的Promise封装并没有捕获SDK内部的错误。如果要捕获，需要调整封装逻辑，但这类拦截错误不影响登录核心流程——用户完成授权后，response.authResponse仍会正常返回。
• 吞掉错误能避免控制台报错影响用户体验，但会丢失后续排查其他潜在问题的日志。更稳妥的方式是：捕获特定的「Failed to fetch」错误并忽略，同时保留其他错误的日志输出。

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