浅谈前端中的错误捕获

我不是女神ヾ 2022-05-21 04:44 151阅读 0赞

## 浅谈前端中的错误捕获 ##

某一天用户反馈打开的页面白屏幕，怎么定位到产生错误的原因呢？日常某次发布怎么确定发布会没有引入bug呢？此时捕获到代码运行的bug并上报是多么的重要。

既然捕获错误并上报是日常开发中不可缺少的一环，那怎么捕获到错误呢？万能的**try...catch**

try{
      throw new Error()
    } catch(e) {
      // handle error
    }

看上去错误捕获是多么的简单，然而下面的场景下就不能捕获到了

try {
        setTimeout(() => {
            throw new Error('error')
        })
    } catch (e) {
        // handle error
    }

你会发现上面的例子中的错误不能正常捕获，看来错误捕获并不是这样简单**try...catch**就能搞定,当然你也可以为异步函数包裹一层**try...catch**来处理。

浏览器中，**window.onerror**来捕获你的错误

window.onerror = function (msg, url, row, col, error) {
        console.log('error');
        console.log({
            msg,  url,  row, col, error
        })
    };

捕获到错误后就可以将错误上报，上报方式很简单，你可以通过创建简单的**img**,通过**src**指定上报的地址，当然为了避免上报发送过多的请求，可以对上报进行合并，合并上报。

但但你去看错误上报的信息的时候，你会发现一些这样的错误**Script error**

因为浏览器的同源策略，对于不同域名的错误，都抛出了**Script error**，怎么解决这个问题呢？特别是现在基本上js资源都会放在cdn上面。

解决方案

1：所有的资源都放在同一个域名下。但是这样也会存在问题是不能利用cdn的优势。

2：增加跨域资源支持，在cdn 上增加支持主域的跨域请求支持，在script 标签加**crossorigin**属性

发表评论取消回复

表情：

评论列表（有 0 条评论，151人围观）

还没有评论，来说两句吧...

相关阅读

相关浅谈Java中的异常处理：捕获与抛出

Java中的异常处理是程序设计中非常重要的一部分，它允许程序在遇到错误时能够优雅地处理，而不是直接崩溃。Java的异常处理机制主要依赖于`try`、`catch`、`final

我就是我/ 2024年11月09日 15:09/ 0 赞/ 4 阅读

相关浅谈前端框架中的DSL

一、前言一个普通的web网站应用使用 html、xhml 等更具描述能力的 external dsl（domain-specific language）来描述界面，然后

男娘i/ 2023年01月21日 03:27/ 0 赞/ 84 阅读

相关浅谈前端自动化构建

今天给大家介绍一下，如何通过docker，自动化构建vue项目。现在系统大部分都采用k8s进行容器化部署，后端项目docker化很简单，特别是springboot项目，只要

Love The Way You Lie/ 2022年12月19日 13:25/ 0 赞/ 200 阅读

相关浅谈前端自动化构建

今天给大家介绍一下，如何通过docker，自动化构建vue项目。现在系统大部分都采用k8s进行容器化部署，后端项目docker化很简单，特别是springboot项目，只要

电玩女神/ 2022年11月20日 04:55/ 0 赞/ 232 阅读

相关浅谈前端工程化体系

前端架构： 1.前端工程化 web应用复杂度的增加，特别是单页面应用的风靡。组件化，工程化，自动化成了前端发展的趋势。或者说一线的互联网公司就是这么做的。每个前端团队

向右看齐/ 2022年10月11日 14:57/ 0 赞/ 222 阅读

相关浅谈前端性能优化

1、什么是前端性能优化？从用户访问资源到资源完整展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。 2、为什么

╰半夏微凉°/ 2022年06月17日 03:37/ 0 赞/ 282 阅读

相关浅谈前端测试

![1][] 前端测试或许被好多人误解，也许大家更加倾向于编写面向后端的测试，逻辑性强，测试方便等聊到这导致了好多前端从来不写测试（测试全靠手点～～～）

痛定思痛。/ 2022年05月21日 05:35/ 0 赞/ 272 阅读

相关浅谈前端中的错误捕获

浅谈前端中的错误捕获某一天用户反馈打开的页面白屏幕，怎么定位到产生错误的原因呢？日常某次发布怎么确定发布会没有引入bug呢？此时捕获到代码运行的bug并上报是多么的重要

我不是女神ヾ/ 2022年05月21日 04:44/ 0 赞/ 152 阅读

相关浅谈前端mock

引言前端开发经常需要等待后端的接口，严重影响了开发效率，我们一般采用mock方式来避免这个问题。本人参考了大量文章，结合自己的经验，给出自己在mock上的一些理解。

梦里梦外;/ 2022年03月07日 03:30/ 0 赞/ 479 阅读

相关前端｜浅谈fetch

Why Fetch 在开发过程中,我们向服务端发送请求,一般会使用三种方式, XMLHttpRequest(XHR)，Fetch ，jQuery实现的AJAX。其中

Dear 丶/ 2021年09月18日 13:14/ 0 赞/ 382 阅读