前端中经常出现的错误及捕获

1.例子 1

html 中第一个 script 标签对 报错 第二个 script 标签对能够输出

<script>
    error
    console.log(1)
</script>
<script>
    //能输出，独立的script是一个独立的代码段，不影响
    console.log(2)
</script>

2.例子 2

try catch 可以捕获到错误

try {
        err
        var er = "error"
            // 遇到语法错误影响会退出， 不会执行
    } catch (error) {
        console.log(error)
    }

但是看下面例子 var er = "error 语法错误呢

try {
        var er = "error
            // 遇到语法错误影响会退出， 不会执行
    } catch (error) {
        console.log(error)
    }

输出会直接报错，为什么呢，语法错误了，引擎退出，js 不执行了，所以捕获不到

再看看下面的例子，try 捕获异步的错误

<script>

    try {
        setTimeout(() => {
            err
        }, 1000)
    } catch (error) {
        console.log(error)
    }
    </script>

但是很遗憾捕获不到，所以总结 try catch 处理异常的能力有限，只能捕捉到同步的错误,但是语法错误，异步捕获不到。

##3.例子 3

根据上面异步错误捕获不到，那谁能够捕获到异步的错误呢，接下来看下面的代码

 window.onerror = function(msg, url, row, col, err) {
    console.log('我已经捕获到错误')
    console.log(msg, url, row, col, err)
    return true
}

try {
    setTimeout(() => {
        err
    }, 1000)
} catch (error) {
    console.log(error)
}

err

根据 window.onerror 可以具体捕获到同步与异步的错误信息。

那么我们在看一段代码

 <img src="xxx.png" alt="">
  window.onerror = function(msg, url, row, col, err) {
            console.log('我已经捕获到错误')
            console.log(msg, url, row, col, err)
            return true
        }

资源加载报错，捕获不到

总结 1.try catch 可以捕获到意料之内的错误，

2.window.onerror 可以捕获到意料之外的错误

3.window.onerror 必须返回 true ，异常会向上抛出

4.当遇到 资源加载时报错，也捕获不到

4.例子 4

根据上述例子捕获不到资源加载时错误，可以使用下面的例子

  <img src="xx.png" alt="">
    <script>
        window.addEventListener('error', (msg, url, row, col, err) => {
                console.log(msg, url, row, col, err)
                return false
            }, true)
            //事件捕获
    </script>

5.例子 5

那么遇到 throw 和 reject 呢

window.addEventListener('unhandledrejection', (e) => {
        e.preventDefault()
        console.log(e.reason)
    })
    Promise.reject('xxx')

6.例子 6

NodeJS 里程确实有“脆弱”的一面，单线程的某处产生了“未处理的”异常确实会导致整个 Node.JS 的崩溃退出，来看个例子, 这里有一个 node-error.js 的文件：

var http = require(＇http＇);

var server = http.createServer(function (req, res) {

  //这里有个错误，params 是 undefined
  var ok = req.params.ok;

  res.writeHead(200, {＇Content-Type＇: ＇text/plain＇});
  res.end(＇Hello World
＇);
});

server.listen(8080, ＇127.0.0.1＇);

console.log(＇Server running at http://127.0.0.1:8080/＇

启动服务，并在地址栏测试一下发现 http://127.0.0.1:8080/ 不出所料，node 崩溃了

使用 uncaughtException

process.on(＇uncaughtException＇, function (err) {
  //打印出错误
  console.log(err);
  //打印出错误的调用栈方便调试
  console.log(err.stack)；
});