search

SSWConsulting / SSW.Website

Generator for ssw.com.au
https://www.ssw.com.au
Apache License 2.0
8 stars 7 forks source link

💸 Client Side Exceptions handling #1770

Open amankumarrr opened 9 months ago

amankumarrr commented 9 months ago

Description

Occasionally, the application experiences client-side errors that result in unusual and unclear UI messages for the following reason.

In your production application a client-side error occurred that was not caught by an error boundary. Additional information should be visible in the console tab of your browser.

Reference: https://nextjs.org/docs/messages/client-side-exception-occurred

Proposed solution
We need to enclose our client component (i.e., _app.tsx) with an error_boundary component to capture errors and display a meaningful message on the UI.

Reference - https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary

image

Figure: Client side exception on UI

### Tasks
- [ ] Ensure that errors are seen in AppInsights
Calinator444 commented 1 month ago

@wicksipedia

I'm seeing an ErrorBoundary inside of our main layout.tsx component. I tried throwing an Exception on our PR slot to check if this is still an issue.