SDK: Enhance error handling inside UI components in our SDK

[zJaaal]

Parent Issue

TBD

Task

When a content type changes, our apps (Next.js and Angular) just breaks, nasty error no information on how to fix it etc. We can do better than that.

We can make our UI components a bit more resilience that when the data they are expecting changes... instead of crashing the app it just shows an error message, that can lead the developer to find a solution or fix.

• React 18 has Error Boundaries
• Angular has @error and ErrorHandler

Not sure which one of these will fix our problems.

Proposed Objective

User Experience

Proposed Priority

Priority 3 - Average

### Acceptance Criteria
- [ ] Implement Error Handling: Equip all UI components with error boundaries to manage errors gracefully and don't crash the app.
- [ ] Display Error Messages: Show user-friendly error messages in the UI components when exceptions occur due to data type changes.
- [ ] Dev mode: Errors should only show in dev mode in prod, blank.
- [ ] Log Error Details: Add an error message con the `console.log` or the server log

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

To write a good error message:

1. Be Clear and Specific: Clearly state the problem.
2. Provide Guidance: Suggest possible solutions or next steps.
3. Be Concise: Keep the error message brief and to the point.

Assumptions & Initiation Needs

N/A

Quality Assurance Notes & Workarounds

No response

Sub-Tasks & Estimates

No response

History

• Updated by @fmontes on Jun 26th.