特定场景下才能复现的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日志并进行多维度分析。
相关文章
|
1月前
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
|
9天前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`<select>` 和 `<option>`)、文本域(`<textarea>`)、标签解释(`<label>`)、各类按钮(`<button>`)及表单重置功能、无语义布局标签(`<div>` 和 `<span>`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
8天前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
22 11
|
8天前
|
前端开发
前端web入门第四天】03 显示模式+综合案例热词与banner效果
本文档介绍了HTML中标签的三种显示模式:块级元素、行内元素与行内块元素,并详细解释了各自的特性和应用场景。块级元素独占一行,宽度默认为父级100%,可设置宽高;行内元素在同一行显示,尺寸由内容决定,设置宽高无效;行内块元素在同一行显示,尺寸由内容决定,可设置宽高。此外,还提供了两个综合案例,包括热词展示和banner效果实现,帮助读者更好地理解和应用这些显示模式。
|
11天前
|
JavaScript 前端开发
【前端web入门第一天】03 综合案例 个人简介与vue简介
该网页采用“从上到下,先整体再局部”的制作思路,逐步分析并编写代码实现个人简介页面。内容涵盖尤雨溪的背景、学习经历及主要成就,同时介绍其开发的Vue.js框架特点。代码结构清晰,注重细节处理,如使用快捷键提高效率,预留超链接位置等,确保最终效果符合预期。
|
20天前
|
前端开发 大数据 数据库
🔥大数据洪流下的决战:JSF 表格组件如何做到毫秒级响应?揭秘背后的性能魔法!💪
【8月更文挑战第31天】在 Web 应用中,表格组件常用于展示和操作数据,但在大数据量下性能会成瓶颈。本文介绍在 JavaServer Faces(JSF)中优化表格组件的方法,包括数据处理、分页及懒加载等技术。通过后端分页或懒加载按需加载数据,减少不必要的数据加载和优化数据库查询,并利用缓存机制减少数据库访问次数,从而提高表格组件的响应速度和整体性能。掌握这些最佳实践对开发高性能 JSF 应用至关重要。
36 0
|
1月前
|
前端开发 JavaScript 开发者
fuse.js前端搜索简单使用的三个案例
通过这三个例子可以看出,Fuse.js 是一个功能丰富、易于实现的前端搜索库。它使开发者能够便捷地实现从基础到高级的搜索功能,无论是简单的列表搜索还是实时的搜索建议,都能够高效、精确地提供给用户所需的信息。
68 0
|
6天前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
1月前
|
存储 前端开发 JavaScript
前端语言串讲 | 青训营笔记
前端语言串讲 | 青训营笔记
22 0
|
3月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
67 2