Express.js 是一个使用 Node.js 构建 Web 应用程序的流行框架。在开发 Web 应用程序时，处理错误页显示及错误处理是非常重要的一环。本文将会介绍如何在 Express.js 中实现自定义错误页面，使得我们可以为每个错误应用我们自己的个性化 UI。
错误处理
在开发 Web 应用程序时，错误是不可避免的。有很多因素可能导致错误，如网络错误、数据库连接丢失、身份验证失败等。单纯地处理这些错误是非常昂贵和耗时的，因此，我们需要确保能够及时捕获和处理这些错误。
在 Express.js 中，我们可以使用错误处理中间件来处理所有错误。当错误发生时，错误处理中间件将会被调用，显示适当的错误信息。
app.use(function (err, req, res, next) {
console.error(err.stack)
res.status(500).send('Something broke!')
})上述代码中，我们使用 app.use() 函数来加载中间件，并指定一个错误函数。当发生错误时，错误函数将会被调用并显示适当的错误信息。
自定义错误页面
默认情况下，错误页面的显示非常基础。为了提高用户体验，我们可以创造我们自己的错误页面并为其分配一个错误模板。
Express.js 提供了错误模板来实现这一点。我们可以使用 app.set() 函数来设置模板。我们可以定义一个名为 "views" 的文件夹来存放所有模板文件。我们可以定义一个模板文件，如“error.ejs"，并在模板中使用 HTML 和 CSS 来定义我们自己的 UI。
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- ---------------- ---------- ------------- -------- ------ ------------ -------- ----- ---- - ------------------- -- ---------------- ----- ---- ---- ----- - ------------------------ ------------------------------- - ------ --- -- --
在上述代码中，我们设置了视图文件夹的路径（'views'）和引擎类型（'ejs'）。在适当的路由上，我们在 res.render() 函数中指定我们的视图名称。在错误函数中使用 render() 函数指定错误视图的名称。
错误处理中间件会将错误信息存储在 err 变量中，并传递给错误视图。这意味着我们可以使用 error 变量来显示错误信息。
结论
在 Express.js 中，处理错误是非常重要的。通过创建自己的错误页面和模板，我们可以提高用户体验。我们可以使用错误处理中间件来捕获和处理所有错误，并显示适当的错误信息。
在 Express.js 中实现自定义错误页面是非常容易的，并且可以高度个性化。我们可以使用HTML，CSS，和其他 UI 存放在一个文件中。这种方法可以使错误页更有价值，增加它们的用途。
示范代码
app.js
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
---------------- -----------
------------- -------- -------
----- ---- - -----
------------ ----- ---- -- --------------- ----------
----------------- ----- ---- -- -
-- --- -----
----------------
------------------- -
------ ---- --- -------
-------- ----- --- ------
---
---
------------- ---- ---- ----- -- -
-- --- -----
-------------------------
------------------------------- -
------ ---- -------- ------ -------
-------- --------- ------ ------
---
---
---------------- -- -- ------------------- ------- -- ----------------------------error.ejs
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------- ----- ---------- ------- ------ ------- ------- ------- ------- -------
在“views”文件夹中，请创建一个“error.ejs”文件，如上述示例代码所说明的那样。运行示例代码中的 app.js 并访问 localhost:3000 和 localhost:3000/error 观察页面效果。
祝愉快前端编程！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6748494493696b0268eed1e4