js使用onerror自动捕获异常

捕获异常

1. 使用try catch

2. 使用window.onerror自动捕获异常。

   //不需要每一行都使用try catch 自动捕获报错信息
   // （报错信息，源码，在哪行报错，哪一列，抛出的错误）
   window.onerror = function (message, source, lineNom, colNom, error) {
        //第一，对跨域的js ，如CDN 的，不会有详细的报错信息
        //第二，对于压缩的 js ，还要配合sourceMap反查到未压缩代码的行、列
   }
   

   比如下面的例子

   <script>
       window.onerror = function (message, source, lineNom, colNom, error) {
           console.log('出错了')
           console.log(message)
           console.log(source)
           console.log(lineNom)
           console.log(colNom)
           console.log(error)
           return true //这里返回true，，报错的红色信息就不会被显示在控制台上
       }
       function aa() {
           console.log('aa')
           console.log(aa.nme.dsa)
           console.log('aa')
       }
       aa()
   </script>
   // 输出
   aa
   出错了
   Uncaught TypeError: Cannot read property 'dsa' of undefined
   http://127.0.0.1:5500/test.html
   25
   32
   TypeError: Cannot read property 'dsa' of undefined
       at aa (test.html:25)
       at test.html:28
   

   1. 第一，对跨域的js ，如CDN 的，不会有详细的报错信息

      • 对于引入的js文件发生错误，onerror只会知道有异常发生，不知道哪里发生错误

      • 想要定位到错误，首先将服务器设置成支持跨域，Access-Control-Allow-Origin:*

      • 然后，在引入的js的srcipt标签中，设置crossorigin属性。

    ```
   
    简单来讲，在html的标签中，有些标签时**自带跨域功能**的，比如audio img link script video 标签，他们的src属性可以是任意源的链接，并且均可以进行加载。添加了corssorigin属性后，资源就不会走默认跨域的方式，而是用**CORS**的方式加载，这样onerror就可以监听到了。
   

   2. 第二，对于压缩的 js ，还要配合sourceMap反查到未压缩代码的行、列

   3. 只能捕获到js运行时的错误，语法错误捕获不到

3. 方式二: window.addEventListener监听

           window.addEventListener('error', function(e) {
               console.log('chucuole')
               e.preventDefault() //出错信息不显示在控制台上
           }, false)//默认为false，冒泡状态，设置true时为捕获状态
   

   1. 为捕获状态时（第三个参数为true）能捕获到js执行错误，也能捕获带有src的标签元素的加载错误。

   2. 为冒泡状态时（第三个参数为false）能捕获到js执行错误，不能捕获带有src的标签元素的加载错误。

   3. 参数对应1个值，异常事件，错误信息都在里面

   4. 函数体内用preventDefault可以不让异常信息输出到控制台