MSAL.js库自定义错误日志不生效，如何捕获错误存入数据库

核心原因说明 #

window.onerror 仅能捕获全局同步执行的代码错误、以及 setTimeout/setInterval 等宏任务中的抛出错误，Promise 实例未被 catch 捕获的 rejection 事件默认不会触发 window.onerror，这是你之前配置不生效的核心原因，且Bluebird默认会拦截未处理的Promise rejection仅输出到控制台。

解决方案 #

方案1：配置Bluebird全局未处理rejection监听

该方案可以直接捕获所有Bluebird实例未处理的rejection，代码需要放在Bluebird引入之后、MSAL.js引入之前执行：

Promise.onPossiblyUnhandledRejection(function(error, promise) {
  // 此处可以直接执行你的错误上报逻辑，也可以手动触发window.onerror复用现有逻辑
  if (window.onerror) {
    window.onerror(
      error.message || 'Uncaught (in promise)',
      error.fileName || '',
      error.lineNumber || 0,
      error.columnNumber || 0,
      error
    );
  }
  // 保留默认控制台报错行为，不需要可删除
  console.error('Unhandled promise rejection:', error);
});

方案2：监听全局unhandledrejection事件

如果使用的浏览器环境支持全局Promise rejection事件监听，可以直接添加该监听，兼容原生Promise和Bluebird实例的未捕获rejection：

window.addEventListener('unhandledrejection', function(event) {
  // 阻止浏览器默认的控制台输出行为，不需要可删除
  event.preventDefault();
  const error = event.reason;
  // 执行上报逻辑，或触发window.onerror
  if (window.onerror) {
    window.onerror(
      error.message || 'Uncaught (in promise)',
      error.fileName || '',
      error.lineNumber || 0,
      error.columnNumber || 0,
      error
    );
  }
});

方案3：封装MSAL调用统一捕获错误

如果希望更精准的捕获MSAL抛出的错误，可以统一封装所有MSAL方法的调用，在封装层统一加错误捕获逻辑：

// MSAL调用封装示例
async function wrapMsalMethod(method, ...params) {
  try {
    return await method(...params);
  } catch (err) {
    // 此处直接执行MSAL专属错误上报逻辑
    reportMsalErrorToDB(err);
    // 按需抛出错误，不影响原有业务的错误处理逻辑
    throw err;
  }
}

// 调用示例
// const result = await wrapMsalMethod(msalInstance.loginPopup, { scopes: ['user.read'] });

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