In this article, we will know about .NET6 feature that is in Blazor application handling error using the Error Boundaries.
ErrorBoundary Component:
ErrorBoundary component is an in-built blazor component, that will handle the unhandled error at the UI level. So with the ErrorBoundary component, we can handle the errors at a particular section or area of the page so that the remaining page of the application runs smoothly without any issue.
ErrorBoundary is a wrapper component so we can use like:
- ErrorBoundary can be wrapped around any Blazor component, so it will display content if no error, but if any child component throws an error then it will show the error message.
- ErrorBoundary can be wrapped around '@Body' element in 'shared/MainLaout.razor', so it means its scope is global(means page-level error handling), so any error occurs inside of any component of the page then the entire page will show an error message.
Use ErrorBoundary At Components Level:
Let's understand the behavior of the ErrorBoundary by wrapping it around any Blazor Component.
Let's first update the 'Counter' component to throw an error like below.
Pages/Counter.razor:(C# Part)
private void IncrementCount() { throw new Exception("test"); }In the 'Index.razor' component, configure the 'Counter' component by wrapping the 'ErrorBoundary'.
Pages/Index.razor:(HTML Part)
<ErrorBoundary> <Counter /> </ErrorBoundary>
- Wrapped 'ErrorBoundary' around the 'Counter' component, so any unhandled exception from the 'Counter' component will be handled by the 'ErrorBoundary'.
Use ErrorBoundary At Page Level:
Let's understand the behavior of the ErrorBoundary at the page level by wrapping around the '@Body' tag.
Now remove the 'ErrorBoundary' in the 'Index.razor' component which we added in the above step. Add the 'ErrorBoundary' in the 'Shared/MainLayout.razor' around the '@Body'.
Shared/MainLaout.razor:
<ErrorBoundary> @Body </ErrorBoundary>
ErrorBoundary Recover Method:
Applying the 'ErrorBoundary' component around '@Body' results in another issue like if we navigate to other pages still it will show an error message on all pages because page level is like global scope.
So to fix the above issue we have to call the 'Recover' method from the 'ErrorBoundary' instance. So the 'Recover' method clears the error message.
Shared/MainLayout.razor:(HTML Part)
<ErrorBoundary @ref="@errorBoundary"> @Body </ErrorBoundary>
- The '@ref' gives the controller over the 'ErrorBoundry' component into our c# logic.
@code { private ErrorBoundary errorBoundary; protected override void OnParametersSet() { errorBoundary?.Recover(); } }
- (Line: 2) Declared the 'ErrorBoundary' variable which will be used by the HTML component to get control over the 'ErrorBounary' component.
- (Line: 3-6) The 'OnParameterSet' gets invoked for every route change so inside of it if we call the 'Recorver' method then the error message will be vanished on navigating to other pages.
Custom Error Message:
We can customize the error message of an 'ErrorBoundary' component. So to customize the error message we need to render 2 child components inside of the 'ErrorBoundary' like 'ChildContent', 'ErrorContent'. Inside of the 'ErrorContent' component, we can specify our custom messages.
Shared/MainLayout.razor:(HTML Part)
<ErrorBoundary @ref="@errorBoundary"> <ChildContent> @Body </ChildContent> <ErrorContent> <h1 style="color: red;">Oops... error occured</h1> </ErrorContent> </ErrorBoundary>
Support Me!
Buy Me A Coffee
PayPal Me
Video Session:
Wrapping Up:
Hopefully, I think this article delivered some useful information on ErrorBoundary Component in Blazor Application. I love to have your feedback, suggestions, and better techniques in the comment section below.
ErrorBoundary can go into an infinite loop when using Recover. The reason is if the page/component, where the error occured, fails in its initialize/render state. Then the recover process will try to reload the same page after Recover, and since it fails initializing, it will fail again and again and again...
ReplyDelete