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

Question

I'm working on a Next.js 14 project, and I have a setup where I make API requests using fetch in a handler.tsx file like this:

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 };

In my page file page.tsx I simply call the getPositions function and assume that any server-side errors will be caught in a global error handler:

import { getPositions } from "./handler";

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

  console.log(positions);

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

According to the Next.js documentation, it seems like I don't have to catch the error explicitly and can let it propagate through to be caught in a separate error handler error.tsx. Is this approach correct and are there any best practices for handling server-side errors in Next.js 14?

Bob · Accepted Answer · 2023-10-29 17:14:51Z

1

This is perfectly fine approach

However you can add your error.jsx closer to your page to prevent disabling full ui to your users

answered Oct 29, 2023 at 17:14

Bob

1911 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

hantoren Over a year ago

Thx, is it normal that the next js still shows the error in the console and with its red toast in the bottom left?

Bob Over a year ago

Yes, this is normal behavior, it show to help you debugging errors, in production build, there will no such error explanations

Evgeny Over a year ago

error.js is a client component, it won't render on the server and therefore won't log the server side errors.

Rowin_nb2 Over a year ago

Okay but what if you don't want to have your whole page replaced by the error.tsx? I see that works if you just want to show an error page, but sometimes you have multiple fetches and only want to show an error message on that specific place.

Varun · Accepted Answer · 2024-02-06 08:47:29Z

0

you can also try this in Next 14 , APP router , server side

return NextResponse.json({message:Internal Server error, status:500})

answered Feb 6, 2024 at 8:47

Varun

113 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related