JavaScript 错误处理

184 阅读2分钟

JavaScript 错误处理

错误类型

  • Error :
    • 是最一般的错误类型,在它的基础上,JavaScript 还定义了其他 6 种错误对象。也就是说,存在Error 的 6 个派生对象。
    • JavaScript 解析或运行时,一旦发生错误,引擎就会抛出一个错误对象。JavaScript 原生提供Error构造函数,所有抛出的错误都是这个构造函数的实例。
  • RangeError :
    • 是一个值超出有效范围时发生的错误。主要有几种情况,一是数组长度为负数,二是 Number 对象的方法参数超出范围,以及函数堆栈超过最大值。
  • ReferenceError :
    • 是引用一个不存在的变量时发生的错误。
  • SyntaxError :
    • 是解析代码时发生的语法错误
  • TypeError
    • 是变量或参数不是预期类型时发生的错误。比如,对字符串、布尔值、数值等原始类型的值使用 new 命令,就会抛出这种错误,因为 new 命令的参数应该是一个构造函数。
  • URIError
    • 是 URI 相关函数的参数不正确时抛出的错误,主要涉及encodeURI()decodeURI()encodeURIComponent()decodeURIComponent()escape()unescape()这六个函数。
  • EvalError
    • eval函数没有被正确执行时,会抛出EvalError错误。该错误类型已经不再使用了,只是为了保证与以前代码兼容,才继续保留。

try-catch 语句

try-catch 语句作为JavaScript中处理异常的一种标准方式。

tyr {
 // 可能会导致错误的代码
} catch (error) {
 // 在错误发生时怎么处理
console.log(error.message) // message属性是唯一一个能保证所有浏览都支持的属性
} finally {
console.log(2)
}
# 只要代码中包含 finally 子句,那么无论try 还是 catch 中的return 语句都会被忽略。

function f() {
try {
 console.log(0);
 throw 'bug';
} catch(e) {
 console.log(1);
 return true; // 这句原本会延迟到 finally 代码块结束再执行
 console.log(2); // 不会运行
} finally {
 console.log(3);
 return false; // 这句会覆盖掉前面那句 return
 console.log(4); // 不会运行
}

console.log(5); // 不会运行
}

var result = f();
// 0
// 1
// 3

result
// false

throw 语句

throw 操作符 用于随时抛出自定义错误。抛出错误时,必须给 throw 一个指定的值。

console.log(1) 
throw new Error('x 必须为正数');
console.log(2) 
# 遇到 throw 操作符,代码会立即停止,所以 2 不会被打印出来

# 可以通过原型链来自定义错误

function CustomError(message){
this.name = "CustomError"
this.message = message
}
CustomError.prototype = new Error();

throw new CustomError('my message')

错误事件

没有通过try catch处理的错误都会触发window对象的 error事件。

上报错误记录

一般使用Image对象来发送请求。主要是如下原因:

  • 所有浏览器都支持Image对象。
  • 可以避免跨域限制
  • 记录问题的过程中,出问题的概念低。
function logError(sev,msg){
 var img = new Image();
  img.src = `log.php?sev=${encodeURIComponent(sev)}&msg=${encodeURIComponent(msg)}`
}

本文使用 👉mdnice 排版