如何捕获“TypeError: Cannot read properties of undefined (reading '0')”并抛出自定义错误消息

你可以通过catch块识别原生抛出的 TypeError，再拼接自定义提示实现需求，以下是两种常用实现：

方案1：不使用可选链，直接捕获原生错误 #

这种写法会保留JS原生的属性读取报错逻辑，在catch中统一处理：

const arr = [
  {
    neighbours: ['AFG', 'CNG'],
  },
];

try {
  const nearBorder = arr[0].borders[0];
  if (!nearBorder) {
    throw new Error('No neighbour found!');
  }
  console.log(`Your border is ${nearBorder}`);
} catch (err) {
  // 匹配读取undefined属性的原生TypeError
  if (err instanceof TypeError && err.message.includes('Cannot read properties of undefined')) {
    // 拼接原生错误信息与自定义提示
    const outputErr = new Error(`${err.message}，自定义错误：No neighbour found!`);
    // 挂载原始错误到cause属性，保留完整错误栈方便排查（ES2022+支持）
    outputErr.cause = err;
    console.log(outputErr);
    // 如需向外抛出错误可取消下方注释
    // throw outputErr;
  } else {
    // 其他类型错误直接输出
    console.log(err);
  }
}

运行上述代码输出会同时包含原生错误信息和自定义提示。

方案2：搭配可选链，主动校验抛出错误 #

如果你需要保留可选链的安全特性，同时要感知属性不存在的场景，可以手动做层级校验主动抛出错误：

try {
  // 手动校验属性是否存在，不存在则抛出和原生逻辑一致的TypeError
  if (!arr[0]?.hasOwnProperty('borders')) {
    throw new TypeError("Cannot read properties of undefined (reading 'borders')");
  }
  const nearBorder = arr[0].borders[0];
  if (!nearBorder) {
    throw new Error('No neighbour found!');
  }
  console.log(`Your border is ${nearBorder}`);
} catch (err) {
  const outputErr = new Error(`${err.message}，自定义错误：No neighbour found!`);
  outputErr.cause = err;
  console.log(outputErr);
}

两种方案都可以实现同时保留原生错误信息和输出自定义提示的需求，你可以根据自己的业务场景选择。

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