BUG: Server actions throwing 500 on the FE server

[josh-torre]

Description

Problem: When the API returns a "bad request"(anything other 200) it is received by the Next.js server actions layer. This layer then throws an error that is caught by the server which always sends a 500 to the client, no matter if the API returned a 404, 400, 300, etc.

Solution: As prescribed by the Next.js docs (here)[https://nextjs.org/docs/app/getting-started/error-handling] we must return any errors as values to the client. This proposed solution wraps any calls to the API and gracefully handles any errors that occur on the server. Instead, any errors that occur are sent to the client to be handled. Any and all errors in the server actions layer that are "expected" should now only be handled by the client.

Changes:

• Added query wrappers for all tanstack query functions used
• Gracefully handle all expected errors on the FE server
• Unwrap and handle errors on the FE

Checklist

• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas

[ZainabImadulla]

he he ha ha