代码
错误页面中,网络状态为404的特殊些,我们将单独开发一个页面,其它的错误把错误信息的堆栈打印出来即可。其实,程序如果足够健壮,是不应该让用户看到错误页的。
404.ejs
我们现在访问一个不存在的路由,比如http://localhost:8000/post,目前是有个默认页面的。
也可以修改成自己的页面。比如,新建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,看到页面效果如下:
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,看到页面如下:
将上面的异常换成普通错误就不显示状态码了。
作业
我们首页目前是http://localhost:8000/posts,但一般人的访问习惯是http://localhost:8000/。思考下怎么做重定向。