如何正确处理 Next.js 14 中的服务器端错误?

How to properly handle server-side errors in Next.js 14?

提问人:hantoren 提问时间:10/30/2023 更新时间:10/30/2023 访问量:93

问:

我正在处理一个 Next.js 14 项目,我有一个设置,我在这样的文件中使用 fetch 发出 API 请求:handler.tsx

async function getPositions() {
  const response = await fetch(
    process.env.BASE_API_URL + "/positions?enabled=true",
    {
      cache: "no-cache",
    }
  );

  if (!response.ok) {
    throw new Error("Es gab ein Problem mit Ihrer Anfrage");
  }

  const data = await response.json();
  return data.result;
}

export { getPositions };

在我的页面文件中,我只需调用该函数并假设任何服务器端错误都将在全局错误处理程序中捕获:page.tsxgetPositions

import { getPositions } from "./handler";

export default async function Page() {
  const positions = await getPositions();

  console.log(positions);

  return (
    <>
      <h1>Positions</h1>
    </>
  );
}

根据 Next.js 文档,似乎我不必显式捕获错误,并且可以让它传播到单独的错误处理程序中。这种方法是否正确,是否有任何最佳实践来处理 Next.js 14 中的服务器端错误?error.tsx

ReactJS TypeScript next.js13 服务器操作

评论


答:

1赞 Bob 10/30/2023 #1

这是非常好的方法

但是,您可以将 error.jsx 添加到更靠近页面的位置,以防止对用户禁用完整 UI

评论

0赞 hantoren 10/31/2023
谢谢,下一个 js 仍然在控制台中显示错误并在左下角显示红色 toast 是否正常?
1赞 Bob 10/31/2023
是的,这是正常行为,它显示帮助您调试错误,在生产构建中,不会有这样的错误解释
0赞 hantoren 11/1/2023
好的,非常感谢。