记一次博客评论系统 Bug 的排查思路与修复流程 [复制链接]

帖子链接已复制到剪贴板
二花 (UID: 3198) 2022-8-31
帖子已经有人评论啦,不支持删除!

1256 4

问题背景:

我博客的许多文章都是使用的 utterances 评论系统,它要求使用 Github 账号登录后才能评论。

两三周前杜老师给我反馈说这个评论系统有问题,他试了好几次都无法登录成功。我试了下发现自己是可以的,而且前两天还有网友给我评论过,觉得可能不是普遍情况,就给忽略了。

然后今天上午又有朋友反馈给我,说评论系统有问题,并且附了一个 gif 图,图片显示登录完成后直接跳转到了首页,导致登录失败。

于是我今天晚上花了大概 1h 的时间排查并解决了这个 bug,这里分享下我的排查思路与修复流程,供各位博友参考:

1. 通过 firefox devtools 定位到是点击登录后被重定向到了错误的页面
2. 进一步确认是 utterances 的登录按钮上的 redirect url 参数有问题
3. 在 DoIT 主题的 issues、代码中寻找 utterances 相关逻辑,未发现问题
4. 尝试在 utterances issues 中搜索关键字 redirect,找到 https://github.com/utterance/utterances/issues/474
5. 定位到是页面跳转时仅做了局部刷新,未更新 header 中的 canonical link 导致的问题。
6. 进一步排查到 DoIt 主题使用了 PaperStrike/Pjax 做页面局部刷新,目的是提升性能
7. 阅读 Pjax README 发现它的初始化代码格式为 `new Pjax({...})`,尝试在主题中搜索关键字 `new Pjax({` ,找到对应的代码块
8.  找前端的朋友给了个 canonical link 的 CSS 选择语法,使用该语法修改主题,测试发现问题解决
9.  修复博客 bug,并提 PR 给这个 Hugo 主题的 github 仓库: https://github.com/HEIGE-PCloud/DoIt/pull/709

To be better~
已有评论 (4)
提示:您必须 登录 才能查看此内容。
创建新帖
广告推广点击空位自助购买