简约而不简单的通用错误页面

背景

线上某个项目因为后端 controller 层代码异常, 没有执行到渲染页面模版, 形成前端 Web 页面展现出来是一个空白的页面，俗称白屏。

思考

页面出现白屏, 势必须要从头至尾逐步去排查问题, 找到源头和缘由

1. 确认页面的 HTTP 请求有没有问题

   • 若是是 404 了(咱们此次的现象就是 404 白屏), 那须要再日后端方向排查问题

   • 若是页面内容返回正常, 那颇有多是前端渲染方面的问题, 那就须要往前端方向去排查

2. 分析 HTTP 服务器日志, 例如找运维查看 nginx 的访问日志有没有出现异常状况

3. 分析 Application 服务器日志, 例如查看 tomcat 的应用日志有没有出现异常状况。 例如此次问题肯定是应用层出现异常产生的 404

4. 最后找到关键代码, 肯定问题, 修复上线

想一想排查问题的流程仍是比较长, 比较费时的。若是出现错误时, 不是给一个白屏, 让人去猜哪里出现了问题, 排查一圈才能定位问题, 而是给出明确的错误信息, 有一个明确的错误页面就好多了。

设计

错误页面是一个通用的需求, 那么咱们在设计的时候就应该考虑设计为一个通用的页面, 可以展现任意的错误信息. 便可以经过参数的形式控制页面的展示。

那么通用错误页面应当具有哪些关键的要素呢? 咱们参考各类 404 页面, 抽象以后, 认为关键的三要素以下:

1. 错误信息: 面向用户的错误提示
2. 错误码: 面向开发者的错误提示
3. 引导用户: 出错以后引导用户去"解决"这个问题, 避免走入死胡同, 卡死在这里了, 例如显示回退按钮, 引导用户重试

实现

经过 URL 参数来控制页面的展现和行为：

• message 错误提示, 默认为: 抱歉，出错了

• errorCode 错误码, 默认为: 500

• showPrimaryBtn 是否显示引导按钮, 默认为: true

• primaryBtnText 引导按钮的文案, 默认为: 返回

• primaryBtnAction 引导按钮的动做模式: 回退(history-back), 返回到页面(goto)

• gotoUrl 指定 goto 模式时要返回的页面, 默认为: //daojia.com

效果展现

在线demo

• 适配PC/M

• 支持自定义错误信息和错误码

• 支持控制引导按钮是否显示

• 支持控制引导按钮的文案

• 支持控制引导按钮的行为

避免安全风险

• 用于控制页面展现的输入参数(例如 message 参数), 由于是能够任意构造的, 要避免出现 XSS 漏洞就必须转义

https://jz-common-cdn.daojia.com/fe-common-page/error-page/index.html?message=%3Ch1%3E%E9%94%99%E8%AF%AF%3C%2Fh1%3E
复制代码

• 同理 gotoUrl 也是一个能够任意构造的输入参数, 涉及到引导用户跳转, 要避免出现钓鱼风险, 就必须作跳转域名的白名单限制，如

https://jz-common-cdn.daojia.com/fe-common-page/error-page/index.html?primaryBtnAction=goto&gotoUrl=%2F%2F58.com
复制代码

关注咱们