特定场景下才能复现的bug案例分享之--前端排序字段的锅

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 在做功能测试的过程中,经常会遇到一些难以重现的bug,或者明明在自己电脑上是好的,但是在别人电脑上操作的时候就是会报错。

bug现象描述



   相信大家在做功能测试的过程中,经常会遇到一些难以重现的bug,或者明明在自己电脑上是好的,但是在别人电脑上操作的时候就是会报错,就是这么的让你难以琢磨。正好小编最近在做测试的时候,也遇到过这么一个问题 ,有用户反馈查看XXX页面的数据,一进去就报错,我这边访问是正常的。经过一系列的操作 ,最终还是让我给找到了重现的步骤 ,下面我分享一下定位这个问题的思路和步骤,希望能对大家有所帮助吧。



bug复现步骤



1、因为是web端的网站,某个模块查看明细数据报错,第一步肯定先是自己访问对应的模块,按照相同的条件访问查询,看下是否也报错--本地电脑暂时无法复现

2、因为是报错,那就登录后台服务器,检查是否有报错日志。果不其然,在服务器上找到了报错的日志,日志的大概内容是打印出了一大段查询sql,其中可以看到有个很明显的sql报错是找不到某个排序字段xxx

3、通过日志查看,基本已确认,报错跟排序字段有关 ,我本地又没有复现 ,那就应该是前端传参的问题了,通过报错日志,对比报错页面,发现页面本来就没有字段xxx,这个时候,我猜测应该是前端页面交互太复杂,然后把上一个访问页面的排序字段给带到当前访问的这个页面来了

4、找一下该模块下哪个明细页面有显示字段xxx,并且可以排序的 ,然后依次进入某个明细页面按照字段xxx排序后,再返回访问报错的页面,查看是否可以复现问题。

最终,经过以上步骤的尝试,发现确实是前端的bug,前端在访问同一模块的不同指标的明细页面,点击过页面的排序字段后,有的页面一进去的时候没有清空之前上一页页面的排序字段 ,导致后端查询sql报错。



下次遇到类似的问题,该如何复现?



1、先考虑是否是不同用户的权限不同,导致的bug

2、考虑是否跟浏览器的版本之类的兼容性有关

3、查看后端日志记录,没报错的话,就查看接口调用的记录,查看是否可以捕捉到接口调用的入参,如果捕捉不到相关信息的话,可以考虑在日志中增加相关信息的打印,发个补丁版本到线上。

4、询问用户在bug出现前的一些大概操作 ,访问过的模块等。






相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
相关文章
|
23天前
|
前端开发 JavaScript 开发者
前端开发的终极技巧:如何让你的代码既简洁又高效,还能减少bug?
【10月更文挑战第30天】前端开发充满挑战与创新,如何编写简洁高效且少bug的代码是开发者关注的重点。本文介绍五大技巧:1. 模块化,提高代码复用性;2. 组件化,降低代码耦合度;3. 使用现代框架,提高开发效率;4. 统一代码规范,降低沟通成本;5. 利用工具,优化代码质量。掌握这些技巧,让前端开发更高效。
46 1
|
2月前
|
自然语言处理 资源调度 前端开发
前端大模型入门(四):不同文本分割器对比和效果展示-教你如何根据场景选择合适的长文本分割方式
本文详细介绍了五种Langchain文本分割器:`CharacterTextSplitter`、`RecursiveCharacterTextSplitter`、`TokenTextSplitter`、`MarkdownTextSplitter` 和 `LatexTextSplitter`,从原理、优缺点及适用场景等方面进行了对比分析,旨在帮助开发者选择最适合当前需求的文本分割工具,提高大模型应用的处理效率和效果。
|
3月前
|
前端开发 JavaScript
前端一键回到顶部案例
本文介绍了如何实现网页中的一键回到顶部功能,包括两种方法:第一种是通过HTML中的锚点跳转实现快速回到顶部;第二种是使用JavaScript的`scrollTo`方法结合`requestAnimationFrame`实现滚动动画效果,让页面滚动更加平滑自然。
50 1
前端一键回到顶部案例
|
2月前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
161 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
|
3月前
|
JavaScript 前端开发
前端基础(十)_Dom自定义属性(带案例)
本文介绍了DOM自定义属性的概念和使用方法,并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。
48 0
前端基础(十)_Dom自定义属性(带案例)
|
3月前
|
JSON 前端开发 JavaScript
socket.io即时通信前端配合Node案例
本文介绍了如何使用socket.io库在Node.js环境下实现一个简单的即时通信前端配合案例,包括了服务端和客户端的代码实现,以及如何通过socket.io进行事件的发送和监听来实现实时通信。
40 2
|
3月前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
63 11
|
3月前
|
前端开发
前端web入门第四天】03 显示模式+综合案例热词与banner效果
本文档介绍了HTML中标签的三种显示模式:块级元素、行内元素与行内块元素,并详细解释了各自的特性和应用场景。块级元素独占一行,宽度默认为父级100%,可设置宽高;行内元素在同一行显示,尺寸由内容决定,设置宽高无效;行内块元素在同一行显示,尺寸由内容决定,可设置宽高。此外,还提供了两个综合案例,包括热词展示和banner效果实现,帮助读者更好地理解和应用这些显示模式。
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
142 2
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
44 0