学习
实践
活动
专区
工具
TVP
写文章

利用Decorator和SourceMap优化JavaScript错误堆栈

在SDK初始化的链路内,Decorator的第一步逻辑的前序环节是初始化被装饰的API,所以在这里可以拿到原API的源码行,可以借助Error.stack取到,如下: /** * decorate在stack 这里需要说明的一点,获取原API代码行是通过匹配Error.stack信息。 调用throw Error或console.error后在浏览器的控制台打印的堆栈是完整的,但是浏览器在返回Error.stack信息时并不是将全部的堆栈返回,而是只返回最前列的几条,一般是5-10条。 { err: new Error(), className, methodName: fnName, sourceLink }) 其中工具函数getRewritedError的作用是在Error.stack 接下来的工作就简单了,从Error.stack中过滤无用的信息,然后把descriptor.value条目的链接替换为先前拿到的原API代码行,最后new一个Error对象将其stack替换为处理之后的在抛出即可

31220
  • 广告
    关闭

    热门业务场景教学

    个人网站、项目部署、开发环境、游戏服务器、图床、渲染训练等免费搭建教程,多款云服务器20元起。

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

    你知道自己的代码在线上有多少问题吗?

    error.stack 内没有这个前缀词: ? Uncaught 跨域场景: 以上说到的是理想场景,真实环境可能会涉及跨域,这个背景下往往只能收集到一些不太有意义的信息。 ? 内容类似 error.stack ? msg 小程序的场景比较集中,复杂的环境很少,没有跨域脚本的问题,比 H5 简单很多。后面介绍的内容基本通用,对于小程序部分不再赘述。 content 信息: content 信息即 message 和 error.stack,里面是错误的描述和堆栈信息。 message 是对 error.stack 的补充,而一段完整的 error.stack 信息,包含了错误代码堆栈,文件和行列号。通过这些信息我们基本可以断定错误的位置和触发原因。 额外提一句,这里是 error.stack 里面的信息,事实上 message 里面是有包含 'global code' 里面的详细信息。

    49230

    关注

    腾讯云开发者公众号
    10元无门槛代金券
    洞察腾讯核心技术
    剖析业界实践案例
    腾讯云开发者公众号二维码

    相关产品

    • 物联网通信

      物联网通信

      腾讯云物联网通信( IoT Hub)旨在提供一个安全、稳定、高效的连接平台,帮助开发者低成本、快速地实现“设备-设备”、“设备-用户应用”、“设备-云服务”之间可靠、高并发的数据通信……

    相关资讯

    热门标签

    活动推荐

    扫码关注腾讯云开发者

    领取腾讯云代金券