SourceMap 与前端异常监控

2024-06-25 04:04:55

背景

我们从事 Web 开发工作中，异常监控系统已经是我们朝夕相处的好助手，但是这些异常处理工具通常都是建立在 Web 生态，或者是假定运行在浏览器环境下的，但是当我们需要给一套跨端系统搭建一套类似的异常监控系统，并且期望该系统兼容 Web 生态，现有的工具很可能就不满足我们的需求了，因此我们需要考虑一套完整的异常监控系统整个链路将会涉及到哪些工具链，以及如何修改这些工具链来适配我们的跨端系统。

精彩的一天从查 Bug 开始

我们先从和我们程序员最息息相关的线上查 Bug 开始。

下面这种图，相信大家很多人都很熟悉，当我们收到线上 Bug 反馈或者收到报警电话时，第一时间基本就是去自己的监控平台去查看线上日志，大家很可能看到类似下面这张截图

有经验的老司机，立马就可以定位到自己代码里哪里出了问题，但是有没有仔细思考过整套监控系统是如何打通的呢？或者说如果有一天你的监控系统出了问题，你知道如何追查是哪个环节出了问题吗？

代码反解

有经验的老司机立马就反应过来了，不就是代码里集成下 Sentry 的 Client，然后每次把 SourceMap 也上传一份给 Sentry，线上遇到错误将错误上传给 Sentry Server，Sentry Server基于错误堆栈和 SourceMap 反解出原始的堆栈就可以了。是的，监控系统要解决的一个核心问题就是代码反解。

出于一些性能和安全等的考虑，通常我们发布到线上的代码，通常并非原始的代码，而是经过混淆压缩后的代码

SourceMap 与前端异常监控相关推荐

构建可靠的前端异常监控服务-采集篇
http://jdc.jd.com/archives/2175 在 Web 应用异常复杂的今天,一个页面不单单只包含文字.图片和超链接,还可能包含复杂表单.大量动画.海量交互.很多 Web 应用完全单 ...
直播回顾丨神策数据王朋：如何搭建一套高可用的前端异常监控系统？
本文根据神策数据资深前端研发工程师王朋在神策「大数据技术系列直播课」第二季"前端专题"第四讲的直播整理. 本次分享主要分为三大部分:前端异常监控概述,异常监控的背景意义,以及做一个 ...
[转] 前端异常监控解决方案研究
前端监控包括行为监控.异常监控.性能监控等,本文主要讨论异常监控.对于前端而言,和后端处于同一个监控系统中,前端有自己的监控方案,后端也有自己等监控方案,但两者并不分离,因为一个用户在操作应用过程中如 ...
调用后台接口返回报错前端隐藏提示_前端异常监控解决方案研究（转）
前端监控包括行为监控.异常监控.性能监控等,本文主要讨论异常监控.对于前端而言,和后端处于同一个监控系统中,前端有自己的监控方案,后端也有自己等监控方案,但两者并不分离,因为一个用户在操作应用过程中如 ...
腾讯CDC团队：前端异常监控解决方案
前端监控包括行为监控.异常监控.性能监控等,本文主要讨论异常监控.对于前端而言,和后端处于同一个监控系统中,前端有自己的监控方案,后端也有自己等监控方案,但两者并不分离,因为一个用户在操作应用过程中如 ...
uni-app + sentry 前端异常监控
最近在研究sentry,发现他提供了vue的初始化步骤,根据他提供的步骤完全可以实现vue的异常监控,所以就不对vue多做解释,本文主要针对uni-app+sentry的前端异常监控. sentry可 ...
【大厂】544- 腾讯CDC团队的前端异常监控解决方案～
作者:Tencent CDC https://cdc.tencent.com/2018/09/13/frontend-exception-monitor-research/ 前端监控包括行为监控.异常 ...
前端异常监控解决方案研究
摘要: 异常监控不复杂也不简单啊... 原文:前端异常监控解决方案研究作者:frustigor 前端监控包括行为监控.异常监控.性能监控等,本文主要讨论异常监控.对于前端而言,和后端处于同一个监控系 ...
从无到有＜前端异常监控系统＞落地
从无到有<前端异常监控系统>落地参考文章: (1)从无到有<前端异常监控系统>落地 (2)https://www.cnblogs.com/1wen/p/7942608.htm ...

最新文章

热门文章