js-错误处理相关技巧

发表于 | 分类于

前言

js是一种弱类型语言，也就是没有明确规定变量是何种类型的语言。不像java，c++等，在定义的时候，就会明确指定变量的类型。不过听说java10中也将支持var关键词，也有想“弱类型”发展的趋势。
弱类型，就会出现很多意外情况。比如参数的判断，类型的转换等等。
在js中，常见的错误类型一般分为下面三种：
1、类型转换错误
2、数据类型错误
3、通信错误

类型转换错误

这种错误一般和运算符一起讨论。比如我们再判断相等性的时候，建议使用全等于 === 和 非全等于 ！== ，这样可以判断类型，不然各种“隐式转换”，而“隐式转换”的规则特别多，只要一不小心，就可能转换错误。
隐式转换 一般会在流程控制语句（比如if switch ），运算符（+ 、-、* 、\ 、%、！）等等。例如下面的例子：

1
2
3
4
5
6
console.log('3' - 1) // 2
console.log('3' + 1) // 31
console.log(true == 'true') //false
console.log(false == 'false') // false
console.log(true == !'true') //false
console.log(false == !'false') //true

上面这些语句的结果，要知道！是Boolean()转换，==是要Number转换，然后undefined和null在进行==判断的时候，又不进行转换。所以很烦。

数据类型错误

在函数传参的时候，一般要进行参数判断。我一般分为以下三种情况：

1
2
3
4
5
6
1、判断基本类型
typeof （除了null）
2、判断引用类型
instance *instanceof* Object
3、数组
Arrary.isArrary() //用第二种方式也可以判断，但是有多个document的时候就不方便了。

通信错误

一般就是在通信的时候，在域名后面加URI的时候，要将字符串，用encodeURIComponent()进行编码。

有关错误对象：

将错误日志上传到服务器

这个代码是在网上搜到的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
var logger = (function(){
    var loghost = 'http://127.0.0.1/log.gif?';
    var log = function(err){
        var img = new Image(0,0);
        var _url =[];
        _url.push('name'+'='+encodeURIComponent(err.name));
        _url.push('message'+'='+encodeURIComponent(err.message));
        _url.push('location'+'='+encodeURIComponent(err.location));
        if(err.line)
            _url.push('line'+'='+encodeURIComponent(err.line));
        if(err.func)
            _url.push('func'+'='+encodeURIComponent(err.func));

        var url = _url.join('&');
        img.src = loghost+url;
        console.log(img.src);
    }
    return {log:log};
})();

function trapError(msg, URI, ln) {
    // wrap our unknown error condition in an object
    var error = new Error(msg);
    error.location = URI; // add custom property
    error.line = ln;
    logger.log(error);
    warnUser();
    return true; // stop the yellow triangle
}

window.onerror = trapError;

function foo() {
    try {
        riskyOperation();
    } catch (err) {
        // add custom property
        err.location = location.href;
        err.func = 'foo';
        logger.log(err);
        warnUser();
    }
}
function warnUser() {
    alert("An error has occurred while processing this page.\
        Our engineers have been alerted!");
    // do something
}
foo();

参考

发送JS错误日志到服务器