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

一文详聊前端异常原理

TypeError TypeError 在对值进行不合理操作时会发生,比如试图对一个非函数类型的值进行函数调用,或者引用 null 或 undefined 类型的值中的属性,那么引擎会抛出这种类型的异常...当编译器检测到一个函数调用是尾递归的时候,它就覆盖当前的活动记录而不是在栈中去创建一个新的。 5. Error 与自定义异常 Error 是所有错误的基类,其他错误类型继承该类型。...React 在 ErrorDecoder 模块中对自定义错误做了介绍。...比如上文提到的 React 自定义异常; 一个健壮的函数,会对参数进行类型有效性判断;通常在实参不合理时,为了避免报错阻断程序运行,开发者会通过默认值,return 空等方式处理。...主要注意的是,Promise 的 catch 方法用于处理 rejected 状态,而非处理异常。Rejected 状态未处理的话会触发 Uncaught Rejection.

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

    关于 JavaScript 错误处理的最完整指南(下半部)

    , error, 和 throw 使用 Promise.reject 可以很方便的抛出错误: Promise.reject(TypeError("Wrong type given, expected a...使用 async generators 来处理错误 JavaScript中的async generators是能够生成 Promises 而不是简单值的生成器函数。...从异步生成器函数返回的迭代器对象也具有throw()方法,非常类似于其同步副本。...Node.js 中的异步错误处理:回调模式 对于异步代码,Node.js 主要使用这两种方式: 回调模式 event emitters 在回调模式中,异步 Node.js API 接受一个函数,该函数通过事件循环处理...大多数情况下,emitter object 和一些观察者进行交互以侦听消息。 Node.js中的任何事件驱动模块(例如net)都扩展了一个名为EventEmitter的根类。

    2.3K20

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

    一般对页面的监控包含页面性能、页面错误以及用户行为路径获取上报等。 而本文将重点关注其中的错误部分,主要介绍一下常见的错误类型以及如何对它们进行捕获并上报。...e.g: 下图是图片资源不存在时的上报数据: ? 3、未处理的promise错误 未使用catch捕获的promise错误,往往都会存在比较大的风险。...而编码时有可能覆盖的不够全面,因此有必要监控未处理的promise错误并进行上报。 e.g: 下图是promise请求接口发生错误后,未进行catch时的上报数据: ?...对于有使用框架的项目:一是需要有额外的处理流程,比如示例中就需要单独为vue项目进行初始化;二是对于其他框架,都需要单独处理,例如react项目的话,则需要使用官方提供的componentDidCatch...虽然存在这两点不足,但前端错误捕获这部分还是和项目的使用场景密切相关的。我们可以在了解这些方式以后,选择最适合自己项目的方案,为自己的监控工具服务。

    3.8K40

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

    e.g: 下图是图片资源不存在时的上报数据: 3、未处理的promise错误 未使用catch捕获的promise错误,往往都会存在比较大的风险。...而编码时有可能覆盖的不够全面,因此有必要监控未处理的promise错误并进行上报。...Event接口的error事件,并执行该元素上的onerror()处理函数。...对于有使用框架的项目:一是需要有额外的处理流程,比如示例中就需要单独为vue项目进行初始化;二是对于其他框架,都需要单独处理,例如react项目的话,则需要使用官方提供的componentDidCatch...虽然存在这两点不足,但前端错误捕获这部分还是和项目的使用场景密切相关的。我们可以在了解这些方式以后,选择最适合自己项目的方案,为自己的监控工具服务。

    3.3K90

    字节前端面试题

    是什么webpack proxy,即webpack提供的代理服务基本行为就是接收客户端发送的请求后转发给其他服务器其目的是为了便于开发者在开发模式下解决跨域问题(浏览器安全策略限制)想要实现代理首先需要一个中间服务器...,该浏览器发送一个前缀带有/api标识的请求到服务端获取数据,但响应这个请求的服务器只是将请求转发到另一台服务器中const express = require('express');const proxy...不过catch方法还有一个作用,就是在执行resolve回调函数时,如果出现错误,抛出异常,不会停止运行,而是进入catch方法中。...实例函数的情况有些特别,主要是在父组件中通过 React 的 ref API 获取子组件的实例,然后是通过实例调用子组件的实例函数。...== "object") { return type; } return Object.prototype.toString.call(obj).replace(/^$/, '$1');}类数组借用方法类数组因为不是真正的数组

    1.8K20

    前端必会面试题总结

    PNG是一种比较新的图片格式,PNG-8是非常好的GIF格式替代者,在可能的情况下,应该尽可能的使用PNG-8而不是GIF,因为在相同的图片效果下,PNG-8具有更小的文件体积。...网络层会将本机地址作为源地址,获取的 IP 地址作为目的地址。...然后将下发给数据链路层,数据链路层的发送需要加入通信双方的 MAC 地址,本机的 MAC 地址作为源 MAC 地址,目的 MAC 地址需要分情况处理。...通过将 IP 地址与本机的子网掩码相与,可以判断是否与请求主机在同一个子网里,如果在同一个子网里,可以使用 APR 协议获取到目的主机的 MAC 地址,如果不在一个子网里,那么请求应该转发给网关,由它代为转发...,此时同样可以通过 ARP 协议来获取网关的 MAC 地址,此时目的主机的 MAC 地址应该为网关的地址。

    54930

    前端 JS 异常那些事

    (Object.getPrototypeOf(TypeError) === Error); // true console.log(Object.getPrototypeOf(ReferenceError...rejected 的时候,返回数组第一项为错误信息,第二项为 undefined。...window.onerror则无法捕获静态资源的加载错误 React 中的异常 白屏异常 React 处理阶段的同步代码报错,整个组件树挂了导致卸载掉,页面展示白屏 生命周期函数报错 render...同理,因为事件回调函数的处理不是在 React 处理阶段(初始化或者事件处理setState驱动 react 进行下次渲染的),所以事件处理函数中的报错同样不会触发白屏 Error Boundary 既然白屏问题如此严重...,info 参数会接收到报错函数类型(render/mounted/…);如果这些函数返回 promise ,则 promise 异常也会被捕获; errorCaptured errorCaptured

    19110

    Promise机制

    这种 thenable 的特性使得 Promise 的实现更具有通用性:只要其暴露出一个遵循 Promise/A+ 协议的 then 方法即可;这同时也使遵循 Promise/A+ 规范的实现可以与那些不太规范但可用的实现能良好共存...promise 如果 x 处于拒绝态,用相同的据因拒绝 promise x 为对象或函数 如果 x 为对象或者函数: 把 x.then 赋值给 then 如果取 x.then 的值时抛出错误 e ,...e 为据因拒绝 promise 如果 then 不是函数,以 x 为参数执行 promise 如果 x 不为对象或者函数,以 x 为参数执行 promise 如果一个 promise 被一个循环的 thenable...makePromise(descriptor Object, fallback Function) 返回一个 promise 对象,该对象必须是一个可调用的函数,也可能是可被实例化的构造函数。...在 JQuery 的 Promise 对象的回调中抛出错误是个糟糕的主意,因为错误不会被捕获。

    1.4K100

    Promises机制

    这种 thenable 的特性使得 Promise 的实现更具有通用性:只要其暴露出一个遵循 Promise/A+ 协议的 then 方法即可;这同时也使遵循 Promise/A+ 规范的实现可以与那些不太规范但可用的实现能良好共存...promise 如果 x 处于拒绝态,用相同的据因拒绝 promise x 为对象或函数 如果 x 为对象或者函数: 把 x.then 赋值给 then 如果取 x.then 的值时抛出错误 e ,则以...e 为据因拒绝 promise 如果 then 不是函数,以 x 为参数执行 promise 如果 x 不为对象或者函数,以 x 为参数执行 promise 如果一个 promise 被一个循环的 thenable...makePromise(descriptor Object, fallback Function) 返回一个 promise 对象,该对象必须是一个可调用的函数,也可能是可被实例化的构造函数。...在 JQuery 的 Promise 对象的回调中抛出错误是个糟糕的主意,因为错误不会被捕获。

    72940

    Promise机制详解

    这种 thenable 的特性使得 Promise 的实现更具有通用性:只要其暴露出一个遵循 Promise/A+ 协议的 then 方法即可;这同时也使遵循 Promise/A+ 规范的实现可以与那些不太规范但可用的实现能良好共存...如果 x 处于拒绝态,用相同的据因拒绝 promise x 为对象或函数 如果 x 为对象或者函数: 把 x.then 赋值给 then 如果取 x.then 的值时抛出错误 e ,则以 e 为据因拒绝...如果 then 不是函数,以 x 为参数执行 promise 如果 x 不为对象或者函数,以 x 为参数执行 promise 如果一个 promise 被一个循环的 thenable 链中的对象解决,...makePromise(descriptor Object, fallback Function) 返回一个 promise 对象,该对象必须是一个可调用的函数,也可能是可被实例化的构造函数。...在 JQuery 的 Promise 对象的回调中抛出错误是个糟糕的主意,因为错误不会被捕获。 最后一个例子揭示了,实现 Promise 的关键是实现好 doResolve 方法,在完事以后触发回调。

    1.5K70

    有了承诺之后,没完成,需要处理

    例如,下面的代码中获取的URL是错误的(没有这样的站点),.catch处理错误: fetch('https://no-such-server.blabla') // rejects .then(response...或者,可能站点一切正常,但响应不是有效的JSON。...“看不见的try..catch,执行程序会自动捕获错误并将其转换为被拒绝的Promise。 这不仅发生在executor函数中,也发生在其处理程序中。...在出现错误的情况下,承诺被拒绝,执行应该跳转到最近的拒绝处理程序。但是没有。所以错误被“卡住”了。没有代码来处理它。 在实践中,就像代码中的常规未处理错误一样,这意味着某些东西出现了严重的错误。...通常这种错误是不可恢复的,所以我们最好的解决方法是通知用户这个问题,并可能向服务器报告这个事件。 在非浏览器环境中,如Node。还有其他方法可以跟踪未处理的错误。

    1.3K20

    【Hybrid开发高级系列】AngularJS(二)——常用$服务

    $http服务是一个接受一个参数的函数,参数的类型是对象,用来配置生成的http的请求,该函数返回一个promise对象(关于promise规范,可以看看这篇文章) var promise = $http...作为消息体发送到服务器     headers: 一个列表,每个元素都是一个函数,返回http头     xsrfHeaderName(字符串):保存XSFR令牌的http头的名称     xsrfCookieName...该方法接收请求配置对象(request configuration object)作为参数,然后必须返回配置对象或者 promise 。...该方法接收响应对象(response object)作为参数,然后必须返回响应对象或者 promise。...这个函数返回一个promise对象,具有success和error两个方法。

    45440

    JavaScript错误处理完全指南

    ; 创建后,错误对象将显示三个属性: message:包含错误消息的字符串 name:错误的类型 stack:函数执行的堆栈跟踪 例如,如果我们创建一个新的 TypeError 对象,带有适当的消息,该...SyntaxError TypeError URIError 请记住,所有这些错误类型都是 实际的构造函数,旨在返回一个新的错误对象。...; throw null; 但最好避免这些事情,始终抛出正确的错误对象,而不是基元。这样,你就可以在代码库中保持错误处理的一致性。...例如,将来的 Node.js 将使任何未处理 Promise 拒绝的程序崩溃: DeprecationWarning: Unhandled promise rejections are deprecated...如果拒绝的 Promise 不是第一个出现在输入数组中的对象,则 Promise.race 解析: const promise1 = Promise.resolve("The first!")

    5K20

    JavaScript Promise

    该函数有一个参数,即接受的最终结果(the fulfillment value)。 如果该参数不是函数,则会在内部被替换为 (x) => x,即原样返回 promise 最终结果的函数。...onRejected 可选 当 Promise 变成拒绝状态(rejected)时调用的函数。该函数有一个参数,即拒绝的原因(rejection reason)。...如果该参数不是函数,则会在内部被替换为一个 “Thrower” 函数 (it throws an error it received as argument)。...该函数拥有一个参数:reason/rejection 的原因。...所以使用 Promise.any 来获取多台服务器数据时会更合理。 优雅的进行异常处理 详解 之前刷视频有看到一些小问题: 使用多个 await 时,前一个出现异常,如何不影响后续执行?

    25310

    前端异常的捕获与处理

    ,我们需要思考当错误发生时: 错误是否是致命的,会不会导致其它连带错误 后续的代码逻辑还能不能继续执行,用户还能不能继续操作 是不是需要将错误信息反馈给用户,提示用户如何处理该错误 是不是需要将错误上报服务端...new Promise((resolve) => { resolve(); }).then(() => { throw "promise error"; }); 5.4 React 异常 React...因为 React 组件是声明性的,所以 try-catch 不是一个可靠的选项。为了弥补这一点,React 实现了所谓的错误边界。...错误边界是 React 组件,它“捕获子组件树中的任何地方的 JavaScript 错误”,同时还记录错误并显示回退用户界面。...页面等不同粒度配置告警事件的过滤规则 对接钉钉消息系统,将告警消息推送到订阅群 过滤接口错误和优化 Promise 错误上报信息 后续也可以单开一篇介绍介绍,如何结合开源的错误监控系统,搭建具有公司特色的监控体系

    3.5K30
    领券