低代码前端开发者必备：异常监控日志系统

背景

某客户：“你们的系统怎么又报错了？给你们一天时间修好，等着用！”

沟通中：询问客户具体问题，他表示某某功能用不了，某某功能也用不了，而且无法复现。

– 你会怎么处理？

答案1：先看看说明书？

答案2：好的，我们马上安排研发团队查找问题，顺便也请您帮忙看下这个具体的错误。

答案3：产品团队会先检查客户的配置是否存在问题，如果有问题再通知研发团队处理。

– 那么，你的答案是哪个？

开个玩笑，言归正传，今天的议题是：如何快速定位问题呢？

定位客户报障问题的挑战

客户报障时，往往难以准确定位问题，主要原因如下：

1、客户描述问题不清晰，复现步骤不清晰，导致问题无法重现。

2、客户可能在一两天后才报障，并且无法准确回忆问题发生的具体时间，使得定位问题变得困难。

3、手机客户端用户遇到问题时，无法像PC端那样方便地打开开发者工具，获取相关错误信息。

4、客户无法提供相关账号信息，造成定位问题的困难。

5、问题可能仅出现在特定设备上，使得定位问题变得更具挑战性。「来自程序员的呐喊」

基于上述的背景和挑战，通过对市场的调研，我们选择了Sentry来作为我们平台的异常监控系统

Sentry 关键功能和特点

中文和时区

异常捕捉

Sentry可以自动收集代码编写过程中的错误

函数之间相互调用导致内存溢出

手动上报

如果你觉得你写的某段代码有未知风险，可能会报错，那么你就可以手动对该段代码进行tryCatch来捕获异常，然后用this.$console.error(‘方法名，关键词’, error)上报你想要监听的数据

注：在此之前，如果你想要在报错之后知道你try里面的某些参数信息，这时不能用this.$console.error(‘xxxx’)，因为这是会上报一个错误的日志

正确做法

往这个链路中添加一些我们能直观看到的数据/参数等，帮助我们更好的去定位问题。

this.$ console.error 和 this.$ console.tips的区别：

this.$console.error会上报一个错误日志

this.$console.tips会往错误链路中插入一个面包屑

Sentry收到的日志

Sentry 埋点场景

场景1：上报定位日志

在某段可能报错的逻辑上方，有众多的业务逻辑去计算一个或多个参数，真正报错的时候我们往往难以得知这些参数具体是什么，这个时候我们就需要去把对应的参数上报到Sentry的面包屑中，报错后可以直观的看到当时这个数据的情况，以便更快的定位，避免扯皮。

场景2：针对某个客户来上报日志

在日常使用中，我们是可以拿到用户的租户id的（不变），我们可以根据这个id来进行针对性的上报日志。

例如：客户经常报业务出问题了，但是业务本身没报错，数据就是不准确，这个时候我们就可以在这个业务链路上添加我们的定位面包屑，一般我们需要知道用户发送的参数是什么，得到的结果是什么

第一步：在发送联动请求的时候我们需要先上报请求参数

第二步：在获取结果的时候我们需要知道后端返回的数据是否正确，同样需要上报结果到Sentry中，然后再上报整个链路警告

做好这两步我们就可以在用户每次发送业务请求的时候获取到对应的参数和结果，进而判断是不是业务逻辑出了问题

Sentry 日志搜索

语法介绍

OR 和 AND 搜索条件仅适用于 Discover

默认情况下，搜索词使用 AND 运算符；也就是说，它们返回与所有搜索词匹配的问题/事件(issues/events)的交集。

排除

要改变这一点，您可以使用否定运算符 ! 排除搜索参数。

is:unresolved !user.email:example@customer.com 在示例中，搜索查询返回所有未解决且未影响电子邮件地址为example@customer.com 的用户的Issues。

通配符( * )

搜索支持通配符 * 作为特定字符和字符串的占位符。browser:“Safari 11*”

在上面的示例中，搜索查询将匹配 browser 值，例如 “Safari 11.0.2”、“Safari 11.0.3” 等。

你也可以像这样组合运算符：!message:“*Timeout” 在上面的示例中，搜索查询返回的结果没有的 message 值，如 ConnectionTimeout、ReadTimeout 等。

ISSUE搜索

过滤结果查看

注意：不能直接从下面的过滤结果中点击，下面的过滤结果是所有这类报错的集合

快速找到错误日志

根据时间搜索

快捷搜索入口

点击选项卡之后会将预设置填入搜索框，只需要手动更改参数即可完成搜索，方便！

固定搜索

通过图钉按钮把你想要保存的搜索条件固定起来，在自定义搜索中可以看到你固定的搜索标签（仅对自己可见）

Discover搜索

自定义搜索时间

固定搜索（保存自己常用搜索条件）

输入搜索条件后点击这个即可

查看用户操作步骤：

面包屑中包含了用户操作链路，可以筛选用户行为，网络请求，和网址的变化

作者介绍：
道一云，成立于2004年，是中国低代码领域的领导厂商、腾讯战略投资企业、腾讯生态核心合作伙伴。拥有自主知识产权管理软件产品百余项，涵盖数字化应用构建低代码平台-七巧、全场景智能业务分析BI-七析、千人千面、数智化办公企业级门户-七星以及30多款开箱即用的场景应用。

欢迎关注：
公众号：道一云低代码（do1info）
官网：道一云七巧 – 可视化、智能化、数字化应用构建
免费体验：道一云产品免费试用