首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

一篇文章教你如何捕获前端错误

像axios和jQuery等库就是在xhr上的封装,而有些情况也可能会使用原生的fetch,因此这两种情况都要进行捕获。 e.g: 下图是xhr请求接口返回400时捕获后的上报数据: ?...('error')都能捕获,但是window.onerror含有详细的error堆栈信息,存在error.stack中,所以我们选择使用onerror的方式js运行时错误进行捕获。...TypeError: Uncaught ReferenceError: a is not defined error.statck: TypeError: ReferenceError: a is not...window.fetch) return; let _oldFetch = window.fetch; window.fetch = function () { return.../ 取消 return _oldSend.apply(this, arguments); } } (滑动查看) 关于responseURL 的说明 需要特别注意的是,当请求完全无法执行的时候

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

    一文详聊前端异常原理

    如果 RHS 查询找到了一个变量,但是你尝试这个变量的进行不合理的操作,会抛出另外一种类型的异常,叫作 TypeError。 3....TypeError TypeError 在对进行不合理操作时会发生,比如试图一个非函数类型的进行函数调用,或者引用 null 或 undefined 类型的中的属性,那么引擎会抛出这种类型的异常...这种方式虽然没有报错,但是程序的结果未必符合预期,默认设计不合理会造成语义化误解;另外,也可能无法避免后续的代码报错; 3....异步中的异常 非同步的代码,在事件循环中执行的,就无法通过 try catch 到。 主要注意的是,Promise 的 catch 方法用于处理 rejected 状态,而非处理异常。...(‘unhandledrejection’,・・・); 捕获未处理的异步 reject window.addEventListener (‘error’, …) 捕获资源异常 重写 fetch, XMLHttpRequest

    1.4K40

    跟我一起探索 HTTP-Fetch API

    备注: 此特性在 Web Worker中可用 概念和用法 Fetch 提供了 Request 和 Response(以及其他与网络请求有关的)对象的通用定义。...发送请求或者获取资源,请使用 fetch() 方法。它在很多接口中都被实现了,更具体地说,是在 Window 和 WorkerGlobalScope 接口上。...当遇到网络错误时,fetch() 返回的 promise 会被 reject,并传回 TypeError,虽然这也可能因为权限或其他问题导致。...TypeError 从Firefox 43开始,如果fetch()接收到含有用户名和密码的 URL(例如http://user:password@example.com),它将会抛出一个TypeError...因为我们是在请求一个图片,为了解析正常,我们响应执行 [Body.blob] 来设置相应的 MIME 类型。然后创建一个 Object URL,并元素中把它显示出来。

    22030

    Js捕获异常的方法

    try catch finally try catch finally只能捕获运行时的错误,无法捕获语法错误,可以拿到出错的信息,堆栈,出错的文件、行号、列号。...ReferenceError: 创建一个error实例,表示错误的原因:无效引用。 SyntaxError: 创建一个error实例,表示错误的原因:eval()在解析代码的过程中发生的语法错误。...TypeError: 创建一个error实例,表示错误的原因:变量或参数不属于有效类型。...URIError: 创建一个error实例,表示错误的原因:给encodeURI()或decodeURl()传递的参数无效。...window.onerror window.onerror可以捕捉语法错误,也可以捕捉运行时错误,可以拿到出错的信息,堆栈,出错的文件、行号、列号,只要在当前window执行的Js脚本出错都会捕捉到,通过

    4.8K20

    ES6--函数的扩展

    最近因为参与小程序的开发,本身就支持ES6的语法,所以也是ES6一次不错的实践机会,接下去会逐一的将学习过程中涉及的常用语法和注意事项罗列出来,加深印象。...'); // Uncaught TypeError: Cannot match against 'undefined' or 'null' 上面代码中,fetch的第二个参数是个对象的话,那么就可以个这个对象赋值默认...普通函数的this是可变的,我们通常把函数归为两种状态: 定义时/执行时。函数中的this始终指向执行时所在的对象。比如全局函数执行时,this指向的是window。...> this.id).bind({ id: 'inner' })() ]; }).call({ id: 'outer' }) // outer 上面代码中箭头函数没有自己的this,所以bind无效...在对象中使用箭头函数,this执行的是window

    44030

    前端 JS 异常那些事

    运行时异常对比编译时异常的特点是代码执行到异常代码前都是会正常执行执行到a.b.c前的打印能成功,异常抛出后后面的语句就不能执行了。...error', this.onError, true) window.onerror和window.addEventListener error的区别 window.onerror 函数返回 true...可以阻止执行默认事件处理函数(即控制台没有 error 打印出来) window.addEventListener error若为捕获阶段,则可额外捕获静态资源的加载错误。...window.onerror则无法捕获静态资源的加载错误 React 中的异常 白屏异常 React 处理阶段的同步代码报错,整个组件树挂了导致卸载掉,页面展示白屏 生命周期函数报错 render...Error Boundary只可用于捕获子组件中发生的异常(自身出现渲染错误也是无法捕获的) 无法捕获的异常 事件处理 异步代码(例如 setTimeout 或 requestAnimationFrame

    14910

    如何及时发现网页的隐形错误

    JavaScript的错误类型,ECMA-262 定义了 7 种错误类型,说明如下: EvalError :eval() 函数的相关的错误 RangeError :使用了超出了 JavaScript 的限制或范围的。...ReferenceError: 引用了未定义的变量或对象 TypeError: 类型错误 URIError: URI操作错误 SyntaxError: 语法错误 (这个错误WebIDL中故意省略,保留给...} window.onerror 优点: 可以捕获同步和异步的异常 可以获取到错误的详细信息 缺点: 受到同源策略的限制,只能捕获当前域名下的错误 无法捕获语法错误和网络异常的错误 无法阻止异常继续传播...因为无法保证我们编写的代码是否会出错,如果将其放置在后面,一旦发生错误,onerror 将无法捕获到异常。 window.onerror 只能同时订阅一个错误处理函数。...缺点: 无法图片加载错误、资源加载错误 无法阻止错误冒泡 无法提供错误堆栈 //监听错误 window.addEventListener('error', function(event) { //

    21400

    【JavaScript】解决 JavaScript 语言报错:Uncaught TypeError: Cannot read property ‘X‘ of null

    类型错误通常意味着代码试图执行一个不合法的操作,比如对 null 进行对象属性的访问。 Cannot read property ‘X’: 这里的 ‘X’ 是具体的属性名称。...错误信息指示无法读取该属性。 of null: 这是关键部分,表明代码试图访问的对象是 null。 三、常见原因分析 1....初始化对象 确保在使用对象前,其进行正确的初始化。...(data.user.name); // Uncaught TypeError: Cannot read property 'name' of null }); // 修正代码 fetch('some...对象初始化:确保在使用对象前,其进行正确的初始化。 通过这些措施,可以显著提高代码的健壮性和可靠性,减少运行时错误的发生。

    14710

    全面分析前端的网络请求方式

    九、fetch polyfill源码分析 由于 fetch是一个非常底层的 API,所以我们无法进一步的探究它的底层,但是我们可以借助它的 polyfill探究它的基本原理,并找出其中的坑点。...Response对象 Response对象是 fetch调用成功后的返回: 回顾下 fetchResponse`的操作: xhr.onload = function () {...这也说明了,在 fetch执行完毕后,不能直接在 response中获取到返回而必须调用 text()、json()等函数才能获取到返回。...由于 fetch是一个非常底层的 API,它并没有被进行很多封装,还有许多问题需要处理: 不能直接传递 JavaScript对象作为参数 需要自己判断返回类型,并执行响应获取返回的方法 获取返回方法只能调用一次...,不能多次调用 无法正常的捕获异常 老版浏览器不会默认携带 cookie 不支持 jsonp 十一、fetch的封装 请求参数处理 支持传入不同的参数类型: function stringify(url

    1.7K40

    【JS 口袋书】第 8 章:以更细的角度来看 JS 中的 this

    this 实际上是一个移动的目标,在代码执行过程中可能会发生变化,而没有任何明显的原因。首先,看一下this关键字在其他编程语言中是什么样子的。...{postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …} 如上所示,咱们当 this 没有在任何类中的时候,this 仍然有。...小结一下,默认绑定是JS中的第一条规则:当引擎无法找出this是什么时,它会返回到全局对象。接下看看另外三条规则。...尝试在浏览器中运行该代码,会报错:"TypeError: Cannot set property 'data' of undefined at :11:17"。 这报错做是的。...原因很简单:由Fetch触发的回调在浏览器中运行,因此它指向 window。为了解决这个问题,早期有个老做法,就是使用临时亦是:“that”。

    2.7K20

    前端面试必须掌握的手写题

    this.handlers[type]) { return new Error('事件无效') } if (!...this.handlers[type].length === 0) { delete this.handlers[type] } } }}复制代码实现浅拷贝浅拷贝是指,一个新的对象原始对象的属性进行精确地拷贝...,如果拷贝的是基本数据类型,拷贝的就是基本数据类型的,如果是引用数据类型,拷贝的就是内存地址。...&删除这个函数指定this到函数并传入给定参数执行函数如果不传入参数,默认指向为 window// 模拟 call bar.mycall(null);//实现一个call方法:Function.prototype.myCall...(3)让函数的 this 指向这个对象,执行构造函数的代码(为这个新对象添加属性)(4)判断函数的返回类型,如果是类型,返回创建的对象。如果是引用类型,就返回这个引用类型的对象。

    60220
    领券