如何使用 next-connect 处理 Next.js 中 getServerSideProps 内的错误

Question

我使用 Next.js 和next-connect来处理中间件。

但是当我在内部使用多个中间件时，我在尝试处理错误时遇到了问题getServerSideProps。

这是我在 getServerSideProps 中的代码，我刚刚使用几个中间件创建了一个处理程序，然后所有中间件都运行，身份验证成功，用户数据应该传递到响应，但如果有任何失败，应该捕获错误并返回页面的重定向'/login'。

import nextConnect from 'next-connect';
import { openDBConnection, retrieveUserInfo } from '@/middlewares/database';
import { verifySessionCookie } from '@/middlewares/firebaseSession';
...
    export const getServerSideProps = async ({ req, res }) => {
        const handler = nextConnect()
            .use(verifySessionCookie)
            .use(openDBConnection)
            .use(retrieveUserInfo);
        try {
            await handler.run(req, res);
            return {
                props: {
                    user: req.user,
                },
            };
        } catch (e) {
            console.log(e);
            return {
                redirect: {
                    destination: '/login',
                    permanent: false,
                }
            };
        }
    }

我没有在任何中间件中定义任何 try/catch 块，因此如果发生错误，可以在任何 api 页面或 getServerSideProps 块中进行处理。

当只有一个中间件时，每个中间件似乎都没有问题，调用该verifySessionCookie中间件时会返回错误await handler.run(req, res)，然后在 catch 块中进行处理。

但是，当使用代码段中所示的 3 个中间件时，如果第一个中间件失败 ( verifySessionCookie)，则 catch 块中不会处理错误。

我尝试next()在每个中间件中使用子句进行调用finally），这样错误就会在 getServerSideProps 中捕获，但是：

• verifySessionCookie 执行，失败。
• openDBConnection 执行，它不会失败。
• 执行retrieveUserInfo，失败。

也许我在这里做错了什么，或者 next-connect 不打算以这种方式使用。我不知道如果一个中间件和其余所有中间件都没有执行，我该如何处理错误。也许我应该在 getServerSideProps 内使用 (req, res) 参数调用独立的异步函数，并停止使用这个 next-connect 插件。

Answer 1

下一个连接的文档说你可以onError添加nextConnect

function onError(err, req, res, next) {
  logger.log(err);

  res.status(500).end(err.toString());
  // OR: you may want to continue
  next();
}

const handler = nextConnect({ onError });

或者在您的中间件中，您可以传递一些值req以使其更加可定制。

在中间件中，您可以添加一个 try/catch 块来传递不同的值req

就像是：

export const middlewareExample = (req, res, next) => {
  try {
    // ...
    req.condition = {
      status: 'succuss, ...',
      message: '...',
      data: {
        // ...
      }
    }
    next();
  } catch(error) {
    res.status(...).end(...);
    // OR: you may want to continue
    req.condition = {
      status: 'error, ...',
      message: '...',
      data: {
        // ...
      }
    }
    next();
  }
}

export const getServerSideProps = async ({ req, res }) => {
  const handler = nextConnect()
  .use(verifySessionCookie)
  .use(openDBConnection)
  .use(retrieveUserInfo);

  await handler.run(req, res);

  if (req.condation.status === 'succuss') {
    return {
      props: {
        user: req.user,
      },
    };
  } else {
    console.log(req.condation.message);
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      }
    };
  }
})

我希望这有帮助。