返回介绍

3.3 定制应用程序错误页面

发布于 2025-04-21 21:10:08 字数 3155 浏览 0 评论 0 收藏 0

错误总是会发生的,那些在生产环境里最健壮的应用程序偶尔也会遇到麻烦。虽然减小用户遇到错误的概率很重要,但让应用程序展现一个好的错误页面也同样重要。

近年来,富有创意的错误页已经成为了一种艺术。如果你曾见到过 GitHub.com 的星球大战错误页,或者是 DropBox.com 的 Escher 立方体错误页的话,你就能明白我在说什么了。

我不知道你在使用阅读列表应用程序时有没有碰到错误,如果有的话,你看到的页面应该和图 3-1 里的很像。

Spring Boot 默认提供这个“白标”(whitelabel)错误页,这是自动配置的一部分。虽然这比 Stacktrace 页面要好一点,但和网上那些伟大的错误页艺术品却不可同日而语。为了让你的应用程序故障页变成大师级作品,你需要为应用程序创建一个自定义的错误页。

Spring Boot 自动配置的默认错误处理器会查找名为 error 的视图,如果找不到就用默认的白标错误视图,如图 3-1 所示。因此,最简单的方法就是创建一个自定义视图,让解析出的视图名为 error。

{%}

图 3-1 Spring Boot 的默认白标错误页面

这一点归根到底取决于错误视图解析时的视图解析器。

  • 实现了 Spring 的 View 接口的 Bean,其 ID 为 error (由 Spring 的 BeanNameViewResolver 所解析)。

  • 如果配置了 Thymeleaf,则有名为 error.html 的 Thymeleaf 模板。

  • 如果配置了 FreeMarker,则有名为 error.ftl 的 FreeMarker 模板。

  • 如果配置了 Velocity,则有名为 error.vm 的 Velocity 模板。

  • 如果是用 JSP 视图,则有名为 error.jsp 的 JSP 模板。

因为我们的阅读列表应用程序使用了 Thymeleaf,所以我们要做的就是创建一个名为 error.html 的文件,把它和其他的应用程序模板一起放在模板文件夹里。代码清单 3-7 是一个简单有效的错误页,可以用来代替默认的白标错误页。

代码清单 3-7 阅读列表应用程序的自定义错误页

<html>
  <head>
    <title>Oops!</title>
    <link rel="stylesheet" th:href="@{/style.css}"></link>
  </head>

  <html>
    <div class="errorPage">
      <span class="oops">Oops!</span><br/>
      <img th:src="@{/MissingPage.png}"></img>
      <p>There seems to be a problem with the page you requested
         (<span th:text="${path}"></span>).</p>     ←---显示请求路径

      <p th:text="${'Details: ' + message}"></p>    ←---显示错误明细
    </div>
  </html>

</html>

这个自定义的错误模板应该命名为 error.html,放在模板目录里,这样 Thymeleaf 模板解析器才能找到它。在典型的 Maven 或 Gradle 项目里,这就意味着要把该文件放在 src/main/resources/ templates 中,运行时它就在 Classpath 的根目录里。

基本上,这个简单的 Thymeleaf 模板就是显示一张图片和一些提示错误的文字。其中有两处特别的信息需要呈现:错误的请求路径和异常消息。但这还不是错误页上的全部细节。默认情况下,Spring Boot 会为错误视图提供如下错误属性。

  • timestamp :错误发生的时间。

  • status :HTTP 状态码。

  • error :错误原因。

  • exception :异常的类名。

  • message :异常消息(如果这个错误是由异常引起的)。

  • errorsBindingResult 异常里的各种错误(如果这个错误是由异常引起的)。

  • trace :异常跟踪信息(如果这个错误是由异常引起的)。

  • path :错误发生时请求的 URL 路径。

其中某些属性,比如 path ,在向用户交待问题时还是很有用的。其他的,比如 trace ,用起来要保守一点,将其隐藏,或者用得聪明点,让错误页尽可能对用户友好。

请注意,模板里还引用了一张名为 MissingPage.png 的图片。图片的实际内容并不重要,所以尽情挑选适合你的图片就好了,但请一定将它放在 src/main/resources/static 或 src/main/resources/public 里,这样应用程序运行时才能找到它。

图 3-2 是发生错误时用户会看到的页面。虽然它算不上一件艺术品,但还是把应用程序错误页的艺术水准稍微提高了那么一点。

图 3-2 遇到错误时展现的自定义错误页

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。