首页
学习
活动
专区
圈层
工具
发布

JavaScript异常如何处理

异常出现的区域 那么一般情况下什么情况最容易出现异常呢,基本上有如下几点: JS语法错误、代码异常 AJAX异步请求异常 静态资源加载异常 Promise异常 iframe异常 跨域或script异常...try-catch 我们首先来说一下try-catch,这个方法也是我们最常用的方法,但是它只能捕获到同步运行时的异常错误,对于语法和异步错误确实没有办法的。...window.onerror 当js运行时发生错误,window会触发一个ErrorEvent接口的error时间,并执行window.onerror()。...你可以发现,在上图中我执行了两次,但是第二次没有红色的错误异常,是因为window.onerror函数只有在返回true的时候,异常在不会向上抛出,否则即使是知道异常的发生,控制台还是会显示Uncaught...但是通过ajax来请求本身也有可能会发生异常,而且有可能会引发跨域问题,一般情况下更推荐使用动态创建 img 标签的形式进行上报,这就有点类似于埋点。

2.1K30

如何优雅处理前端异常?

Try-Catch 的误区 try-catch 只能捕获到同步的运行时错误,对语法和异步错误却无能为力,捕获不到。...3.怀着忐忑的心,我们最后来试试异步运行时错误: window.onerror = function(message, source, lineno, colno, error) { console.log...补充一点:window.onerror 函数只有在返回 true 的时候,异常才不会向上抛出,否则即使是知道异常的发生控制台还是会显示 Uncaught Error: xxxxx window.onerror...没有写 catch 的 Promise 中抛出的错误无法被 onerror 或 try-catch 捕获到,所以我们务必要在 Promise 中不要忘记写 catch 处理抛出的异常。...错误上报 通过 Ajax 发送数据 因为 Ajax 请求本身也有可能会发生异常,而且有可能会引发跨域问题,一般情况下更推荐使用动态创建 img 标签的形式进行上报。

2.1K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    如何优雅处理前端异常?

    首先试试同步运行时错误 window.onerror = function(message, source, lineno, colno, error) { // message:错误信息(字符串)。...怀着忐忑的心,我们最后来试试异步运行时错误: window.onerror = function(message, source, lineno, colno, error) { console.log...补充一点:window.onerror 函数只有在返回 true 的时候,异常才不会向上抛出,否则即使是知道异常的发生控制台还是会显示 Uncaught Error: xxxxx window.onerror...没有写 catch 的 Promise 中抛出的错误无法被 onerror 或 try-catch 捕获到,所以我们务必要在 Promise 中不要忘记写 catch 处理抛出的异常。...通过 Ajax 发送数据 因为 Ajax 请求本身也有可能会发生异常,而且有可能会引发跨域问题,一般情况下更推荐使用动态创建 img 标签的形式进行上报。 2.

    2.6K30

    前端开发,如何优雅处理前端异常?

    三、Try-Catch 的误区 try-catch 只能捕获到同步的运行时错误,对语法和异步错误却无能为力,捕获不到。...怀着忐忑的心,我们最后来试试异步运行时错误: window.onerror = function(message, source, lineno, colno, error) { console.log...补充一点:window.onerror 函数只有在返回 true 的时候,异常才不会向上抛出,否则即使是知道异常的发生控制台还是会显示 Uncaught Error: xxxxx window.onerror...没有写 catch 的 Promise 中抛出的错误无法被 onerror 或 try-catch 捕获到,所以我们务必要在 Promise 中不要忘记写 catch 处理抛出的异常。...十二、错误上报 1.通过 Ajax 发送数据 因为 Ajax 请求本身也有可能会发生异常,而且有可能会引发跨域问题,一般情况下更推荐使用动态创建 img 标签的形式进行上报。

    1.4K10

    如何优雅处理前端异常?(史上最全前端异常处理方案)

    三、Try-Catch 的误区 try-catch 只能捕获到同步的运行时错误,对语法和异步错误却无能为力,捕获不到。...怀着忐忑的心,我们最后来试试异步运行时错误: window.onerror = function(message, source, lineno, colno, error) { console.log...补充一点:window.onerror 函数只有在返回 true 的时候,异常才不会向上抛出,否则即使是知道异常的发生控制台还是会显示 Uncaught Error: xxxxx window.onerror...没有写 catch 的 Promise 中抛出的错误无法被 onerror 或 try-catch 捕获到,所以我们务必要在 Promise 中不要忘记写 catch 处理抛出的异常。...十二、错误上报 1.通过 Ajax 发送数据 因为 Ajax 请求本身也有可能会发生异常,而且有可能会引发跨域问题,一般情况下更推荐使用动态创建 img 标签的形式进行上报。

    4.9K10

    如何优雅处理前端的异常?

    三、Try-Catch 的误区 try-catch 只能捕获到同步的运行时错误,对语法和异步错误却无能为力,捕获不到。 1. 同步运行时错误: 输出: 2....补充一点:window.onerror 函数只有在返回 true 的时候,异常才不会向上抛出,否则即使是知道异常的发生控制台还是会显示 Uncaught Error: xxxxx 控制台就不会再有这样的错误了...没有写 catch 的 Promise 中抛出的错误无法被 onerror 或 try-catch 捕获到,所以我们务必要在 Promise 中不要忘记写 catch 处理抛出的异常。...解决方案:为了防止有漏掉的 Promise 异常,建议在全局增加一个对 unhandledrejection 的监听,用来全局监听Uncaught Promise Error。...通过 Ajax 发送数据: 因为 Ajax 请求本身也有可能会发生异常,而且有可能会引发跨域问题,一般情况下更推荐使用动态创建 img 标签的形式进行上报。

    2.2K50

    如何用正确的姿势去高效的解决前端异常,用实践造就答案

    三、Try-Catch 的误区 try-catch 只能捕获到同步的运行时错误,对语法和异步错误却无能为力,捕获不到。 1. 同步运行时错误: ? 输出: ? 2....首先试试同步运行时错误 ? 可以看到,我们捕获到了异常: ? 再试试语法错误呢? ? 控制台打印出了这样的异常: ? 竟然没有捕获到语法错误? 怀着忐忑的心,我们最后来试试异步运行时错误: ?...补充一点:window.onerror 函数只有在返回 true 的时候,异常才不会向上抛出,否则即使是知道异常的发生控制台还是会显示 Uncaught Error: xxxxx ?...没有写 catch 的 Promise 中抛出的错误无法被 onerror 或 try-catch 捕获到,所以我们务必要在 Promise 中不要忘记写 catch 处理抛出的异常。...通过 Ajax 发送数据: 因为 Ajax 请求本身也有可能会发生异常,而且有可能会引发跨域问题,一般情况下更推荐使用动态创建 img 标签的形式进行上报。 2.动态创建 img 标签的形式: ?

    1.4K60

    前端魔法堂——异常不仅仅是trycatch

    -message e)))))  很多时我们会以为这样书写就万事大吉了,但其实try/catch能且仅能捕获“同步代码”中的"运行时异常"。 1."...但即使可以抛出任意类型的数据,我们还是要坚持抛出Error或其子类的实例。这是为什么呢?...实例从pending转变为rejected时,和之前谈论到异常一样,要么被捕获处理,要么继续抛出直到成为Uncaught(in promise) Error为止。...处理函数,这时其实已经抛出Uncaught(in promise) Error,但我们依然可以处理 var p = new Promise(function(resolve, reject){ setTimeout...(in promise) Error已经抛出,所以这句毫无意义^_^ e.preventDefault() }) 注意:只有抛出Uncaught(in promise) Error后,异步catch

    1.5K30

    ES6笔记(5)-- Generator生成器函数

    系列文章 -- ES6笔记系列 接触过Ajax请求的会遇到过异步调用的问题,为了保证调用顺序的正确性,一般我们会在回调函数中调用,也有用到一些新的解决方案如Promise相关的技术。...showWords() { yield 'one'; // Uncaught SyntaxError: Unexpected string } 虽然换成yield*不会直接报错,但使用的时候还是会有问题...(); show.next() // Uncaught ReferenceError: yield is not defined 在爬虫开发中,我们常常需要请求多个地址,为了保证顺序,引入Promise...showNumbers(); show.next().value // 1 show.next().value // NaN show.next(2).value // 6 第一次调用next之后返回值one为1,但在第二次调用...请求涉及到网络,不好处理,这里用了setTimeout模拟ajax的请求返回,按顺序进行,并传递每次返回的数据 1 var urls = ['url1', 'url2', 'url3']; 2

    64610

    前端魔法堂——异常不仅仅是trycatch

    -message e)))))  很多时我们会以为这样书写就万事大吉了,但其实try/catch能且仅能捕获“同步代码”中的"运行时异常"。 1."...但即使可以抛出任意类型的数据,我们还是要坚持抛出Error或其子类的实例。这是为什么呢?...实例从pending转变为rejected时,和之前谈论到异常一样,要么被捕获处理,要么继续抛出直到成为Uncaught(in promise) Error为止。...处理函数,这时其实已经抛出Uncaught(in promise) Error,但我们依然可以处理 var p = new Promise(function(resolve, reject){ setTimeout...(in promise) Error已经抛出,所以这句毫无意义^_^ e.preventDefault() }) 注意:只有抛出Uncaught(in promise) Error后,异步catch

    2K70

    Generator 函数的语法

    i第二次抛出错误,由于 Generator 函数内部的catch语句已经执行过了,不会再捕捉到这个错误了,所以这个错误就被抛出了 Generator 函数体,被函数体外的catch语句捕获。...(); g.next(); g.throw(); // hello // Uncaught undefined 上面代码中,g.throw抛出错误以后,没有任何try...catch代码块可以捕获这个错误...g.throw(1); // Uncaught 1 上面代码中,g.throw(1)执行时,next方法一次都没有执行过。...value: 1, done: false } // 第三次运行next方法 { value: undefined, done: true } // caller done 上面代码一共三次运行next方法,第二次运行的时候会抛出错误...Ajax 是典型的异步操作,通过 Generator 函数部署 Ajax 操作,可以用同步的方式表达。

    1K20
    领券