抛出异常怎么处理：图形设计中的代码调试实战

抛出异常怎么处理：从一次UI动效崩溃说起

上周做了一个AE转Lottie的动效，导出后在移动端直接白屏。打开控制台，红字一片——Cannot read property 'width' of undefined，典型的运行时异常。这时候光着急没用，得知道抛出异常怎么处理才靠谱。

异常不是 bug，是程序在“喊救命”

很多人一看到异常就慌，其实异常是程序告诉你“我遇到问题了，但还能抢救”。比如你在用Photoshop脚本批量导出图片时，某个图层被误删导致脚本中断，抛出异常反而是好事——它阻止了错误继续扩散。

关键是怎么接住这个“求救信号”。常见的做法是用 try-catch 包裹可能出错的逻辑：

try {
  const layer = app.activeDocument.layers.getByName("背景遮罩");
  layer.exportAs(ExportType.PNG);
} catch (error) {
  console.warn("导出失败：", error.message);
  alert("请检查是否存在【背景遮罩】图层");
}

别让异常毁了用户体验

做过交互原型的人都知道，用户可不管后台出了啥事。你用Figma插件生成一组数据卡片，结果因为网络请求超时直接卡死？这体验太差。正确的做法是预判风险，主动处理异常。

比如调用第三方API获取配色方案时，加上超时和错误兜底：

fetch('/api/colors', { timeout: 5000 })
  .then(res => res.json())
  .catch(err => {
    console.error("配色加载失败", err);
    return defaultColors; // 返回默认方案
  })
  .then(renderPalette);

这样即使服务挂了，设计师也能继续工作，不会被一个异常拦住去路。

日志比弹窗更有价值

有些异常不需要立刻打断流程，但得记下来。比如你写的Blender材质生成脚本偶尔算出非法数值，与其直接报错退出，不如写入日志文件，让问题可追溯。

function calculateRoughness(value) {
  if (value < 0 || value > 1) {
    logError(`无效粗糙度值：${value}, 已自动修正`);
    return Math.max(0, Math.min(1, value));
  }
  return value;
}

这种“软处理”方式既保证了运行流畅，又保留了排查线索，特别适合图形处理这类容错性较高的场景。

未捕获异常的最后防线

就算再小心，也总有漏网之鱼。可以在项目入口加个全局监听，避免程序直接崩掉：

window.addEventListener('unhandledrejection', event => {
  console.error('未处理的异常：', event.reason);
  event.preventDefault();
});

// Node.js 环境
process.on('uncaughtException', err => {
  logCritical(err);
  // 执行清理操作，然后退出
  process.exit(1);
});

这就像给飞机装上降落伞——希望永远用不上，但必须有。