那天改登录页的惨状
朋友小刘的电商站炸锅了,用户投诉登录总报错。我过去一看,登录页输错密码就弹个红框写着“登录失败”,连为啥错都不说。老用户气得骂娘,新用户直接流失,老板脸都绿了。
我撸起袖子开搞。先故意输错三次密码测试,好家伙,页面卡了15秒才弹出错误提示。切到F12看Network,发现后端返回400错误时,前端直接吃了屎似的没任何处理。
- 第一步:在登录按钮的click事件里强行加*("点我了"),确认代码没死透
- 第二步:在axios请求的catch块里补alert(*),这下可弹出满屏{error_code:1001,message:"password_mismatch"}
- 第三步:被搞PHP的后端兄弟骂街,说我暴露数据库字段太危险
改造实战记录
连夜改前端代码。先用switch判断错误码:
switch(err_code){case 1001: 提示 = "密码错了大哥";
case 1002: 提示 = "账号被锁10分钟";
default: 提示 = "系统抽风了"
结果测试时傻眼——后台返回的居然是英文message!赶紧找后端兄弟喝酒,软磨硬泡让他改返回结构。
接着处理用户体验:
- 错误提示从顶部弹窗改成输入框底下红色小字
- 密码错误时自动清空密码框
- 连续错5次直接跳转找回密码页
最坑的是验证码错误处理。原逻辑错一次就刷新验证码,用户好不容易看清的字母又变了。我直接改成输错三次才刷新,验证码有效期从60秒提到180秒。
一道坑
以为完事儿时,老板亲自测试:故意在手机号框输邮箱账号。后端返回500错误!原来登录接口做了严格校验却没返回友好提示。补了个兜底判断:
if(!/^1\d{10}$/.test(手机号)){
弹窗("您搁这儿输座机号?")
现在错误提示分三种层级:
- 输入格式不对:实时红字提示
- 账号密码错误:点登录后0.5秒显示
- 系统级错误:弹窗带客服二维码
血泪总结
改完上线两周,客服电话少了70%。最关键是补了埋点监控,发现密码错误占登录失败的83%,于是给登录按钮旁边常驻了“忘记密码”链接。搞技术的容易犯傻,总觉得用户看得懂“error 400”。普通用户看到错误提示时,比解高考数学题还懵——得把话嚼碎了喂到嘴边才行。
记住兄弟们:报错信息不是给程序员看的,是给八十岁老太太看的。就像我姥姥总说的:“电脑说不行的时候,你得告诉它该怎么才行!”
还没有评论,来说两句吧...