如何捕获Plotly.js深层堆栈异常？区分可容忍与绘图失败错误

一、为什么你的try..catch和Promise.catch()捕获不到这个异常？ #

这个问题的核心原因是：这类渲染相关的异常通常是在Plotly内部的异步任务（比如requestAnimationFrame回调、DOM渲染微任务）中抛出的，它们不在你当前代码的同步执行栈或者Promise链范围内，所以常规的try..catch和Promise捕获逻辑无法覆盖到。

二、如何捕获这类异步深层异常？ #

你可以通过全局错误监听机制来捕获这类“逃逸”的异常，具体有两种可行方式：

1. 监听全局error事件

这个事件能捕获大部分同步和异步的未处理错误，包括Plotly内部渲染抛出的异常：

// 全局错误监听，筛选并捕获Plotly相关异常
window.addEventListener('error', (event) => {
  // 通过堆栈信息判断是否为Plotly内部抛出的错误
  if (event.error.stack?.includes('Plotly')) {
    console.log('捕获到Plotly内部异常:', event.error);
    // 若是可容忍异常，可阻止默认行为避免控制台冗余报错
    event.preventDefault();
  }
});

// 你的原有绘图代码
Plotly.newPlot($chartDiv[0], data, layout, options)
  .then(_.noop)
  .catch(_.noop);

2. 监听全局unhandledrejection事件（针对Promise类型的未处理拒绝）

如果异常是通过未处理的Promise抛出的，用这个事件捕获更精准：

window.addEventListener('unhandledrejection', (event) => {
  if (event.reason?.stack?.includes('Plotly')) {
    console.log('捕获到Plotly未处理Promise异常:', event.reason);
    event.preventDefault();
  }
});

三、如何区分可容忍异常与致命错误？ #

你可以从三个维度来判断：

• 图表实际渲染状态：如果图表能正常展示数据、交互功能（缩放、hover提示等）正常可用，那这个异常就是可容忍的（比如你遇到的标签缩放错误，属于渲染细节问题，不影响核心功能）；如果图表完全不渲染、数据加载失败，那就是致命错误。
• 错误堆栈与消息特征：查看异常的堆栈信息，定位错误发生的模块：
  • 如果堆栈中出现drawLabels、barLabel这类和标签渲染相关的函数，属于非致命的渲染异常；
  • 如果堆栈中出现validateData、layoutValidator、newPlot核心初始化函数，或者错误消息包含“invalid data”“container not found”这类关键词，就是致命错误。
• 自定义过滤规则：在全局错误监听中，针对Plotly的异常做精准匹配，示例如下：

window.addEventListener('error', (event) => {
  const err = event.error;
  if (!err.stack?.includes('Plotly')) return;

  // 判断是否为可容忍的标签缩放异常
  const isTolerableLabelError = err.message.includes('label') && err.message.includes('scale');
  if (isTolerableLabelError) {
    console.log('忽略Plotly标签渲染异常:', err);
    event.preventDefault();
  } else {
    console.error('Plotly致命错误:', err);
    // 这里可以触发告警、重新渲染等应急处理逻辑
  }
});

补充小建议 #

你也可以尝试从根源避免这个异常：比如设置layout.bar.label.font.size的最小值，或者开启label.automargin配置，让标签有足够的渲染空间，减少因尺寸过小触发异常的概率。

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