加载脚本依赖发生错误火狐_前端错误监控

weixin_39843078

1649人浏览 · 2020-11-23 04:44:04

weixin_39843078 · 2020-11-23 04:44:04 发布

1、常见错误

1)脚本错误

- 语法错误
- 运行时错误
  - 同步错误
  - 异步错误
  - Promise 错误

2)网络错误

2、解决方案

1)window.onerror

当JavaScript运行时错误（包括语法错误）发生时，window会触发一个ErrorEvent接口的error事件，并执行window.onerror()。MDN官网

2)window.addEventListener('error',fn)

当一项资源（如<img>或<script>）加载失败，加载资源的元素会触发一个Event接口的error事件，并执行该元素上的onerror()处理函数。这些error事件不会向上冒泡到window，不过（至少在Firefox中）能被单一的window.addEventListener捕获。MDN官网

3)window.addEventListener("unhandledrejection",fn)

当Promise被 reject 且没有 reject 处理器的时候，会触发unhandledrejection事件；这可能发生在window下，但也可能发生在Worker中。这对于调试回退错误处理非常有用。MDN官网

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>错误监听</title>
    </head>
    <script>
        // js错误监听
         window.onerror = function (msg, url, row, col, error) {
            console.warn('js错误监听====>',msg, url, row, col, error);
        };

        // 网络错误监听
        window.addEventListener('error', (error) => {
            console.warn('网络错误监听',error);
        }, true);

        //promise错误监听
        window.addEventListener("unhandledrejection", event => {
            console.warn(`promise错误监听: ${event.reason}`);
        });
    </script>
    <body>
        
        <h1>js错误监听已开启</h1>
        <button type="button" name="button" onclick="throw new Error('error')">bar.html</button>

        <h1>网络错误监听已开启</h1>
        <img src="https://b-gold-cdn.xitu.io/v3/static/img/frontend.1dae74a.jpg">
    
        <script>
            // promise错误监听
            new Promise((resolve, reject) => {
                // b=a+1;
                // throw new Error('promise error')
                reject('promise error');
            });
        
            // 错误上报
            function errorReport(errorInfo){
                //1)使用image
                new Image().src='https://www.baidu.com/'+errorInfo
                //2)使用ajax 略 
            }            
        </script>
    </body>
</html>

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模