前端错误的分类

即时运行错误(代码错误)
资源加载错误

错误的调试方式

function fn(param) {
    debugger;   // 在Chorme中运行的时候代码会停在这里

    let result = param +1;
    return result;
}

fn(12);

错误的捕获方式

即时运行错误的捕获方式

try ... catch

function multiple(a, b) {
    if ((typeof a != "number") || (typeof b != "number")) {
        throw new Error("arguments should all be number!");
        // 在这里抛出一个错误，并停止运行
        // 会往上寻找最近的try处理
    }
    return a * b;
}

var c;
// 如果内部的代码抛出错误，则代码直接跳入catch块运行
// 且把错误对象赋值给catch括号内的变量
try {
    c = multiple("a", "b");
    console.log("它们的乘积是",c);
} catch (e) {
    console.log(e);         // Error: arguments should all be number!
} finally {
    //做一些请理性的工作
    //finally块是一定会执行的
    console.log("finally"); // finally
}

window.onerror
用DOM2的addEventListener方式也是可以的

资源加载错误的捕获方式

object.onerror
performance.getEntries

performance.getEntries().forEach(item=>{console.log(item.name)})  // 获得所有资源文件
document.getElementsByTagName('img');  // 获得所有img标签

所有img标签中，没有通过performance.getEntries()找到的资源，就是加载错误的资源。

Error事件捕获

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.addEventListener('error',function(e){
            console.log('捕获',e);
        },true);
    </script>
</head>
<body>
    <script src="//baidu.com/test.js"></script>

    <!-- 输出结果： -->
    <!-- GET file://baidu.com/test.js net::ERR_FILE_NOT_FOUND -->
    <!-- 捕获 Event {isTrusted: true, type: "error", target: script, currentTarget: Window, eventPhase: 1, …} -->
</body>
</html>

只能通过Error事件捕获才行，通过Error事件是不行的。
注意查看以下的输出结果，是没有执行到console.log('捕获',e);的。
因为资源的error事件不会冒泡，这个需要注意。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.addEventListener('error',function(e){
            console.log('捕获',e);
        });
    </script>
</head>
<body>
    <script src="//baidu.com/test.js"></script>

    <!-- 输出结果： -->
    <!-- GET file://baidu.com/test.js net::ERR_FILE_NOT_FOUND -->
</body>
</html>

延伸：跨域的js运行错误可以捕获吗，错误提示是什么，应该怎么处理？
结论：可以捕获，但是显示结果只有Script error提示

微信图片_20181130141515.png

要怎样才能拿到详细的信息呢？需要做以下两个事情。
客户端：在script标签中增加crossorigin属性
服务端：设置js资源响应头Access-Control-Allow-Origin:*

上报错误的基本原理

采用Ajax通信的方式上报
可以，但是所有的错误监控，都不是通过这种方式做的。
利用Image对象上报
所有监控体系都采用这种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.addEventListener('error',function(e){
            console.log('捕获',e);
        },true);
    </script>
</head>
<body>
    <script src="//baidu.com/test.js"></script>
    <script type="text/javascript">
        (new Image()).src = 'http://baidu.com/test?r=123';
    </script>
</body>
</html>

查看Network，可以看到test?r=123这个请求已经发出去了。

微信图片_20181130143614.png

错误监控