SFR-2136: Implement error boundary

[jackiequach]

Jira Ticket

This PR does the following:

• Implements error boundary for uncaught exceptions

Testing requirements & instructions:

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sfr-bookfinder-front-end	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 27, 2024 7:38pm

[kylevillegas93]

The change looks good. Should the error boundary work for all uncaught exceptions? When running locally and navigating to http://localhost:3000/edition/1 I see the following:

Server Error
Error: cannot find work with identifier 1

This error happened while generating the page. Any console logs will be displayed in the terminal window.

[kylevillegas93]

After running npm i; npm run build; and npm run start everything looks good!

[Toxiapo]

The change looks good. Should the error boundary work for all uncaught exceptions? When running locally and navigating to http://localhost:3000/edition/1 I see the following:

Server Error
Error: cannot find work with identifier 1

This error happened while generating the page. Any console logs will be displayed in the terminal window.

@kylevillegas93 React's error boundary only catches errors during component renders, things like a failed fetch request or syntax errors within the component itself, and doesn't catch routing level errors so this should be fine.

However, I believe this could still be a bug where an invalid URL should show the 404 page in the pages/404.tsx instead of a generic 404 page from the browser, what do you think? @jackiequach

[jackiequach]

@Toxiapo Kyle and I spoke offline about this. The API files need to be updated to properly throw the correct status code and will be addressed in the future.

[Toxiapo]

LGTM!

[Toxiapo]

@jackiequach, this isn't directly related to this PR, but I noticed a small UI bug. When searching for a book, the skeleton loader seems to cover the whole screen, which makes it look like the page is broken. Thought I'd mention it!