Next.js 是基于 React 的服务端渲染框架，它可以帮助我们快速构建高性能、可靠的 Web 应用程序。但在实际开发中，错误不可避免地会出现。因此，如何有效地处理和记录错误，成为了我们必须考虑的问题。
本文将介绍 Next.js 服务器端错误处理与日志记录的实践指南，包括如何捕获错误、发送错误信息、存储错误日志等等，并提供相应示例代码。
错误捕获
在 Next.js 中，错误通常分为客户端错误和服务器端错误。客户端错误是指前端页面出现的错误，如代码逻辑错误、网络请求异常等等，我们可以使用 try-catch 来捕获并进行处理。如果是服务器端错误，则需要使用服务器端的错误处理机制。
Next.js 提供了一个特殊的错误处理函数 getInitialProps，它可以捕获服务器端的错误，并带有一个参数 err。通过检查 err 的类型，我们可以确定错误是由客户端还是服务端引起的。在 getInitialProps 函数中，我们可以将错误信息打印到控制台或向服务器发送一条错误报告。
export async function getInitialProps({ err }) {
if (err) {
console.log('Server error:', err)
// 发送错误报告
sendErrorReport(err)
}
return {}
}错误报告
当服务端出现错误时，我们可能需要将错误信息发送到后端进行分析和存储。在实践中，我们可以借助第三方错误收集工具（如 Sentry、LogRocket 等），将错误信息发送到其服务器，以便于监控和调试。
以下是使用 Sentry（一个流行的错误报告工具）捕获并发送错误报告的示例代码。首先需要安装 Sentry：
npm i @sentry/node
-- -------------------- ---- -------
------ - -- ------ ---- --------------
-------------
---- ----------------------- -- ------ ------ ---
--
------ ----- -------- ----------------- --- -- -
-- ----- -
------------------- -------- ----
---------------------------- -- ------- ------
-
------ --
-错误页面
在实际应用中，我们通常会为服务器端错误设计一个友好的错误页面，以提高用户体验。Next.js 中可以通过自定义 _error.js 文件来实现这一目的。
-- -------------------- ---- -------
------ ----- ---- -------
----- --------- ------- --------------- -
------ ----------------- ---- --- -- -
----- ---------- - --- - -------------- - --- - -------------- - ---
------ - ---------- -
-
-------- -
----- - ---------- - - ----------
------ -
-----
--------- -----------------
--------- ----- --- - ------- ------- --- ---------
------
-
-
-
------ ------- ---------在 getInitialProps 函数中，我们可以通过 res 和 err 参数获取错误状态码，进而渲染出相应的错误页面。
错误日志
在处理错误的过程中，我们还需要对错误进行记录和存储，以便于后续排查和分析。在实践中，我们可以使用各种数据存储方案（如 MongoDB、ElasticSearch 等）来存储错误日志。
以下是使用 MongoDB 存储错误日志的示例代码。首先需要安装 mongodb 和 winston：
npm i mongodb winston
-- -------------------- ---- -------
----- - ----------- - - ------------------
----- ------- - ------------------
----- --------- - --------------------- -- ---------------------------
-- -- ------- ---
----- ------ - --- ---------------------- - ---------------- ---- --
-- -------
----- ------ - ----------------------
------ --------
------- ----------------------
------------ - -------- -------------- --
----------- -
--- -----------------------------
--- ------------------------- --------- ----------- ---
--
--
-- -- ----------------
----- -------- ----------- -
--- -
----- ----------------
---------------------- -- ---------
----- -- - -----------------
----- ---------------------------
- ----- ------- -
------------------ ---------- -- ---------- ------
-
-
-- ------- -------
----- -------- ------------------------ -
--- -
----- -- - -----------------
----- ---------------------------------
------ --------
-------- --------------
------ ------------
---------- --- -------
--
- ----- ------- -
------------------ ------- -- ---------- ------
-
-
-- ---------
------ ----- -------- ----------------- ---- --- -- -
-- ----- -- ---- -
-- -----
-----------------
----- ----------------------
-
------ --
-
-- -- -------
-----------在上述示例代码中，我们使用 winston 日志库定义了一个日志记录器，并将错误信息同时记录到控制台和一个 error.log 文件中。同时，我们也实现了一个名为 logErrorToMongoDB 的函数，用于将错误信息记录到 MongoDB 数据库中的 logs 集合。
最后，在 getInitialProps 函数中，我们可以调用 logger.error 将错误信息记录到控制台和文件中，调用 logErrorToMongoDB 将错误信息记录到 MongoDB 中。
总结
通过本文的介绍，我们了解了 Next.js 服务器端错误处理和日志记录的实践指南，并提供了相应的示例代码。在实际开发中，我们需要综合考虑应用的错误处理和日志记录机制，以提高代码的可维护性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649ce93848841e989499b2ac