2.15 错误页面

126 阅读1分钟

代码

错误页面中,网络状态为404的特殊些,我们将单独开发一个页面,其它的错误把错误信息的堆栈打印出来即可。其实,程序如果足够健壮,是不应该让用户看到错误页的。

404.ejs

我们现在访问一个不存在的路由,比如http://localhost:8000/post,目前是有个默认页面的。

image.png

也可以修改成自己的页面。比如,新建views/404.ejs,用腾讯公益的404 页面。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://volunteer.cdn-go.cn/404/latest/404.js" charset="utf-8"></script>
</head>

<body></body>

</html>

error.ejs

新建views/error.ejs,把状态码、错误信息、堆栈展示出来。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>
    <%= title %>
  </title>
  <link rel="stylesheet" href="/static/css/style.css">
</head>

<body>
  <h2>
    <%= (error.status ? (error.status + ' - ') : '') + error.message %>
  </h2>
  <p>
    <%= error.stack %>
  </p>
</body>

</html>

main.ts

修改src/main.ts的anyExceptionFilter,修改默认的404页面和错误信息。

import { render } from "./tools/ejs.ts";

const app = await NestFactory.create(AppModule);

app.use(anyExceptionFilter({
  logger,
  isHeaderResponseTime: true,
  isLogCompleteError: true,
  messageOf404: await render("404"),
  getErrorBody(error, context) {
    if (error.status === 404) {
      return render("404");
    } else {
      return render("error", { error }, context.state.locals);
    }
  },
}));

其中,messageOf404是覆盖默认404页面的字符串,而getErrorBody则是会覆盖我们每个接口抛出的异常信息。如果只是做后端开发,而非服务端渲染,并不需要将它渲染成页面。

验证

404

重新访问http://localhost:8000/post,看到页面效果如下: image.png

error

临时修改src/posts/posts.controller.ts,修改getAll,抛出一个BadRequestException异常:

import { ForbiddenException, NotFoundException } from "oak_exception";

@Get("/")
async getAll(@Query("userId") userId: string, @Render() render: Render) {
    throw new ForbiddenException("Method not implemented.");
}

访问http://localhost:8000/posts,看到页面如下:

image.png

将上面的异常换成普通错误就不显示状态码了。

作业

我们首页目前是http://localhost:8000/posts,但一般人的访问习惯是http://localhost:8000/。思考下怎么做重定向。