一次前端页面展示问题的排查与解决

2016-03-01 12:02:17   最后更新: 2016-05-18 13:18:09   访问数量:1300




经反馈,本应在点击“下单”按钮后提示错误信息“只限手机端购买”,可是页面只是一刷新,并没有弹出提示信息

用户点击下单按钮发现页面刷新,没有提示,也没有进入下单页面,所以觉得很奇怪,也并不知道要到手机端购买,所以问题还是比较严重的

 

测试环境中测试,问题没有复现,错误信息提示正常,可是到线上环境,提示信息无论如何都显示不出来

这是什么原因呢?

首先需要了解提示信息的展示逻辑

Action 中判断如果是限制手机购买的项目,则会向 cookie 中存入错误提示信息,并主动进行 302 跳转,回到当前页面

当前页面展示时,读取 cookie,取出提示信息,然后将提示信息展示到页面上

 

反复排查,发现 Action 中使用的 302 跳转目标地址是 http://www.xxx.com/xxx/{id},在线上环境中,实际跳转结果是 http://www.xxx.com/xxx/{id}.html,事实上,从 http://www.xxx.com/xxx/{id} 到 http://www.xxx.com/xxx/{id}.html 进行了一次 301 跳转,这次跳转中,没有带上包含有提示信息的 Cookie,导致了提示信息的丢失

进一步定位,发现在 nginx 配置中,配置了 http://www.xxx.com/xxx/{id} 到 http://www.xxx.com/xxx/{id}.html 的 rewrite 规则,测试环境中 rewrite 使用了 last 关键字,而线上环境使用了 permant 关键字,致使线上环境多进行了一次 301 跳转而丢失错误提示信息

 

解决办法

解决办法也很简单,直接在 Action 中将 302 跳转目标地址改为 http://www.xxx.com/xxx/{id}.html,这样便无需进行任何 rewrite 与额外跳转

 

上线后发现,部分页面问题解决,但仍然有部分页面点击刷新,没有展示错误提示信息,由于问题仅仅出现在部分页面,考虑到缓存的存在,最终定位问题:

由于页面使用了 varnish 缓存,因此部分页面通过规则被缓存到 varnish 缓存中,没有动态生成而是静态加载,所以不会读取 cookie 中的提示信息生成前端代码,导致了缓存中的部分页面直接跳转没有展示提示信息

 

解决办法

最终的解决办法是将提示信息直接在 http://www.xxx.com/xxx/{id}.html 页面展示出来,而不是通过读取 cookie 内容动态加载

清空 varnish 缓存,问题解决

 

问题虽然圆满的解决了,但是回想起来,整个追查的过程和问题的定位还是非常值得回味的

包括 nginx 的 rewrite 配置、varnish 缓存引起的问题的定位都需要注意

另外,问题的最终解决方案并不是十分优雅,后续需要进一步考虑更好地解决方案

 

欢迎关注微信公众号,以技术为主,涉及历史、人文等多领域的学习与感悟,每周三到七篇推文,只有全部原创,只有干货没有鸡汤

 






技术帖      html      技术分享      前端      casestudy      301      302      redirect     


京ICP备15018585号