Handle 404 errors from API during server render

[jonkafton]

What are the relevant tickets?

Fixes: https://github.com/mitodl/hq/issues/5734

Description (What does it do?)

Renders the not found page and returns a 404 status for requests for resources that are not found during server render.

• Provides a utility function to wrap API calls that may produce 404s so we can navigate to the not found page.
• Also adds a global catch all error page so we are not displaying the default Next.js mostly blank screen:

How can this be tested?

Request a page with a drawer open for a non existing resource. The not found page html should be returned with 404 status, e.g. http://open.odl.local:8062/?resource=noexist

Note that the global error page is not active in dev mode. To test we need to throw and error in any server component and then yarn build; yarn start;. The error message should be displayed (in place of "Something went wrong" in the image above).

Additional Context

Next.js provides a file convention for catching errors from root layout (and generateMetadata()), however they are stripped to just { message, digest }, so we are not able to detect 404s to show the not found page. Instead we need to handle errors in place, in this case by try..catching around our API calls and calling next/navigations notFound() to render the ./app/not-found.tsx page.

[jonkafton]

Fixes the gap at the bottom of the page:

[jonkafton]

These were colliding:

After:

[jonkafton]

@gumaerc you're well versed on this it seems! Let's make sure this change doesn't interfere with your more considered PR.

[gumaerc]

I tried setting NODE_ENV=production to test throwing an error and seeing the global error page, but I kept getting this error on every page with NODE_ENV set to anything but development:

I don't think that error has anything to do with the changes here, but nonetheless I wasn't able to test the error handling component of this. It does seem to be set up correctly in global-error.tsx, but I did see this in the documentation (https://nextjs.org/docs/app/building-your-application/routing/error-handling#handling-errors-in-root-layouts):

Even if a global-error.js is defined, it is still recommended to define a root error.js whose fallback component will be rendered within the root layout, which includes globally shared UI and branding.

I'm not worried about this, since it seems your strategy of creating ErrorPageTemplate includes the header and it looks okay in your screenshots, but I thought it worth mentioning.