Apify PuppeteerCrawler启动Chromium时Facebook认证按钮加载失败求助

解决方案 #

问题根因

Facebook社交登录SDK加载失败抛出未捕获的JS异常，导致登录弹窗的后续JS逻辑中断，原生登录模块也因此无法正常交互。

修复步骤

1. 新增社交SDK资源拦截规则
   在现有拦截资源配置中加入Facebook、Google相关的社交SDK域名匹配，直接阻止这类资源加载，从根源避免报错。修改preNavigationHooks中的blockedUrlPatterns如下：

const blockedUrlPatterns = [
  '.jpg', '.jpeg', '.png', '.svg', '.gif', '.webp', '.webm', '.ico', '.woff', '.eot',
  '.tff', '.woff2',
  // 新增社交SDK拦截规则
  '*facebook*', '*fbcdn*', '*google*', '*gstatic*', '*googleapis*'
];

2. 增加页面JS异常捕获
   在preNavigationHooks中添加页面未捕获JS错误的监听，吞掉非关键异常避免阻塞正常交互，新增代码如下：

// 放在blockRequests调用前即可
page.on('pageerror', (err) => {
  log.debug('忽略页面非关键JS错误', { msg: err.message });
});

3. 优化登录表单操作逻辑
   你当前用page.evaluate直接给输入框赋值的方式可能触发不了表单的内置校验事件，建议替换为更贴合真实用户操作的page.type方法，修改后代码如下：

// 替换原来的page.evaluate赋值逻辑
await page.type('#input_input_emailInput_SM_ROOT_COMP1', email, { delay: 50 });
await page.type('#input_input_passwordInput_SM_ROOT_COMP1', password, { delay: 50 });

可选兜底方案

如果上述修改后还是无法正常触发生态登录切换，可以跳过点击切换按钮的步骤，直接通过JS手动显示邮箱登录表单：

// 替换原来的点击#switchToEmailLink_SM_ROOT_COMP1的逻辑
await page.evaluate(() => {
  const emailForm = document.querySelector('#emailLoginFormContainer');
  if (emailForm) emailForm.style.display = 'block';
  const socialLoginContainer = document.querySelector('#socialLoginContainer');
  if (socialLoginContainer) socialLoginContainer.style.display = 'none';
});

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