前端的水平线，错误处理和调试

本章内容

• 理解浏览器报告的错误
• 处理错误
• 调试JavaScript代码

错误处理

错误处理在程序设计中的重要性是必定的。任何有影响力的Web应用程序都须要一套完善的错误处理机制。

try-catch语句

try {
    // 可能会致使错误的代码
} catch (e) {
    // 在错误发生时怎么处理
}
复制代码

错误类型

执行代码期间可能会发生的错误有多种类型。每种错误都有对应的错误类型，而当错误发生时，就会抛出相应类型的错误对象。
ECMA-262定义了下列7种错误类型：

• Error

• EvalError

• RangeError

• SyntaxError

• ReferenceError

• TypeError

• URIError

• RangeError类型的错误在数值超出相应范围时触发：

try {
    let items1 = new Array(-20);
var items2 = new Array(Number.MAX_VALUE);
} catch (e) {
    console.dir(e)
}
复制代码

• 在找不到对象的状况下，会发生ReferenceError（这种状况下，会直接致使人所共知的“object expected”浏览器错误）。一般，在访问不存在的变量时，就会发生这种错误：

try {
    let obj = x;
} catch (e) {
    console.dir(e)
}
复制代码

• SyntaxError类型， 当咱们把语法错误的JavaScript字符串传入eval()函数时，就会致使此类错误。

eval('a++ b')
复制代码

• TypeError类型在JavaScript中会常常用到，在变量中保存着意外的类型时，或者在访问不存在的方法时，都会致使这种错误。错误的缘由虽然多种多样。**最常发生类型错误的状况，就是传递给函数的参数事先未经检查，结果传入类型与预期类型不相符。

Function.prototype.toString.call('name')   // 抛出typeError
复制代码

• 在使用encodeURI()或decodeURI()，而URI格式不正确时，就会致使URIError错误。这种错误不多见，由于前面说的这两个函数的容错性很是高。

利用不一样错误类型，能够获悉更多有关异常的信息，从而有助于对错误做出恰当的处理。

try {
    // ......
} catch (e) {
    if (e instanceof TypeError) {
        // 处理类型错误
    } else if (e instanceof ReferenceError) {
        // 处理引用错误
    } else {
        // 处理其余类型的错误
    }
}
复制代码

在跨浏览器编程中，检查错误类型是肯定处理方式的最简便途径；包含在message属性中的错误消息会因浏览器而异。

合理使用try-catch

使用try-catch最适合处理那些咱们没法控制的错误。假设你在使用一个大型JavaScript库中的函数，该函数可能会有意无心地抛出一些错误。因为咱们不能修改这个库的源代码，因此大可将对该函数的调用放在try-catch语句当中。

抛出错误

与try-catch语句相配的还有一个throw操做符，用于随时抛出自定义错误。

throw new Error('Something bad happend')
复制代码

上面这行代码抛出一个通用错误，带有一条自定义错误消息。也能够像下面使用其余错误类型，也能够模拟出相似的浏览器错误。

throw new SyntaxError('I dont like your syntax');

throw new TypeError('What type of variable do you take me for?');

throw new RangeError('Sorry, you just dont have the range')

throw new EvalError('That doesnt evaluate.')

throw new URIError('Uri, is that you?');

throw new ReferenceError('You didnt cite your references properly');
复制代码

错误事件

window.onerror = function (message, url, line) {
    // 处理错误
}
复制代码

处理错误的策略

略

常见的错误类型

错误处理的核心，是首先要知道代码里会发生什么错误。因为JavaScript是松散类型的，并且也不验证函数的参数，所以错误只会在代码运行期间出现。通常须要关注三种错误：

• 类型转换错误
• 数据类型错误
• 通讯错误

类型转换错误

全等操做符知道要比较的是两种不一样的数据类型，于是直接返回false。

数据类型错误

Javascript是松散类型的，也就是说，在使用变量和函数参数以前，不会对它们进行比较以确保它们的数据类型正确。

通讯错误

Javascript与服务器之间的任何一次通讯，都有可能会产生错误。

• 第一种通讯错误与格式不正确的URL或发送的数据有关。最多见的问题是在将数据发送给服务器以前，没有使用encodeURIComponent()对数据进行编码。

function addQueryString(url, name, value) {
            if (url.indexOf('?') === -1) {
                url += '?';
            } else {
                url += '&';
            }

            url += `&${encodeURIComponent(name)} = ${encodeURIComponent(value)}`;
            
            return url;
        }
复制代码

使用这个函数而不是手工构建URL，能够确保编码正确并避免相关错误。

区分致命错误和非致命错误

任何错误处理策略中最重要的一部分，就是肯定错误是否致命。对于非致命错误，能够根据下列一或多个条件来肯定：

• 不影响用户的主要任务
• 只影响页面的一部分
• 能够恢复
• 重复相同操做能够消除错误

把错误记录到服务器

开发Web应用程序中的一种常见的作法，就是集中保存错误日志，以便查找重要错误的缘由。

要创建这样一种JavaScript错误记录系统，首先须要在服务器上建立一个页面，用于处理错误数据。这个页面的做用无非就是从查询字符中取得数据，而后再将数据写入错误日志中。这个页面可能会使用以下所示的函数：

function logError (lev, msg) {
    let img = new Image();
    img.src = `log.php?e`
}
复制代码

这个logError()函数接收两个参数：表示严重程度的数值或字符串及错误消息。其中使用了Image对象来发送请求，这样作很是灵活，主要表现以下几方面：

• 全部浏览器都支持Image对象，包括那些不支持XMLHttpRequest对象。
• 能够避免跨域限制。
• 在记录错误的过程当中出问题的几率比较低。大多数Ajax通讯都是由JavaScript库提供的包装函数来处理的，若是库代码自己有问题，而你还在依赖该库记录错误，可想而知，错误消息是不可能获得记录的。

小结

错误处理相当重要。不能提早预测到可能发生的错误，不能提早采起恢复策略，可能致使较差的用户体验。

下面是几种避免浏览器响应JavaScript错误的方法。

• 在可能发生错误的地方使用try-catch语句，这样你还有机会以适当的方式对错误给出响应。
• 使用window.onerror事件处理程序，这种方式能够接受try-catch不能处理的全部错误。

另外，对任何Web应用程序都应该分析可能发生的错误。JavaScript中发生错误的主要缘由以下。

• 类型转换
• 未充分检测数据类型
• 发送给服务器或从服务器接收到的数据有错误