javaScript 错误处理与调试

《JavaScript高级程序设计》读书笔记

错误处理

try {
  // 可能出错的代码
} catch(error) {
  // 出错时要做什么
  console.log(error.meesage)
} finally {
  // 始终执行
}

错误类型

• Error：基类型，其他错误类型继承该类型
• InternalError（非标准）：底层Javascript 引擎抛出异常时
• EvalError：使用eval() 函数发生异常时
• RangeError：数值越界
• ReferenceError：找不到对象
• SyntaxError：给eval() 传入字符串包含JavaScript语法错误时
• TypeError：变量不是预期类型，或者访问不存在的方法
• URIError：使用encodeURI() 或decodeURI() 传入了格式错误的URI

抛出错误

throw 操作符，用于任何时候抛出自定义错误，代码立即停止执行。

throw 1243;
throw "hello"
throw new error("a error");
throw new URIError("Uri, is that you?");
throw new ReferenceError("You didn't cite your references properly.");

创建自定义错误类型：需要提供name属性和message 属性：

class CurstomError extends Error {
  constructor(message){
    super(message);
    this.name = "CurstomError";
    this.message = message;
  }
}
throw new CurstomError("my message")

error 事件

任何没有被 try/catch 语句处理的错误都会在 window 对象上触发 error 事件。传入 3 个参数：错误消息、发生错误的 URL 和行号。

图片也支持 error 事件。如果图片 src 属性中的 URL 没有返回可识别的图片格式，就会触发 error 事件。

window.onerror = (message, url, line) => {
    console.log(message);
    // 返回false 阻止浏览器默认报告错误的行为
    return false;
};
 
const image = new Image();
image.addEventListener("error", (event) => {
    console.log("Image not loaded!");
});
image.src = "doesnotexist.gif"; // 不存在，资源会加载失败

识别错误

• 类型转换错误：使用了会自动改变某个值的数据类型的操作符或语言构造
• 数据类型错误：发生在将意外值传给函数的时候
• 通信错误：把数据发送到服务器之前没有用encodeURIComponent()编码，会导致这种错误

区分重大与非重大错误

非重大错误：

• 不会影响用户的主要任务；
• 只会影响页面中某个部分；
• 可以恢复；
• 重复操作可能成功。

重大错误特性：

• 应用程序绝对无法继续运行；
• 错误严重影响了用户的主要目标；
• 会导致其他错误发生。

for (let mod of mods){
  mod.init(); // 可能的重大错误
}
// 优化后
for (let mod of mods){
  try {
    mod.init();
  } catch (ex){
    // 在这里处理错误
  }
}

把错误记录到服务器中

Web 应用程序开发中的一个常见做法是建立中心化的错误日志存储和跟踪系统。数据库和服务器错误正常写到日志中并按照常用 API 加以分类。

要建立 JavaScript 错误日志系统，首先需要在服务器上有页面或入口可以处理错误数据。该页面只要从查询字符串中取得错误数据，然后把它们保存日志中到错误即可。比如，该页面可以使用如下代码：

function logError(sev, msg) {
  let img = new Image(),
  encodedSev = encodeURIComponent(sev),
  encodedMsg = encodeURIComponent(msg);
  img.src = 'log.php?sev=${encodedSev}&msg=${encodedMsg}';
}

logError()函数接收两个参数：严重程度和错误消息。这里使用 Image 对象发送请求主要是从灵活性方面考虑的。

• 所有浏览器都支持 Image 对象，即使不支持 XMLHttpRequest 对象也一样。
• 不受跨域规则限制。通常，接收错误消息的应该是多个服务器中的一个，而 XMLHttpRequest此时就比较麻烦。
• 记录错误的过程很少出错。大多数 Ajax 通信借助 JavaScript 库的包装来处理。如果这个库本身出错，而你又要利用它记录错误，那么显然错误消息永远不会发给服务器。