Blazor WASM Error Logging

Blazor WASM Error Logging

blazor

24 Articles

Improve

In our previous article Blazor WASM Exception Handling and Error Boundary, we learnt how global exception works and how to handle exceptions using built in ErrorBoundary component. In this article, let's learn about Error Logging in Blazor WASM.

Table of Contents

  1. Introduction
  2. Creating Error component to log error
  3. Summary

Introduction

Logging is needed in all applications. This will help to find root cause or track user activity in any environment. This can be done easily in server side applications with logging frameworks but for SPA like Blazor WASM running in browser sandbox, we will not be having direct access to file system or database and logging cannot be done like how we do in server side applications. We can use browser console to log Information, Warning or Error. But this will not help much in production. We can still make logging happen in production by processing Exception and posting the error details to backend API. Let's look on how to achieve this in Blazor WASM.

Creating Error component to log error

Let's start with simple Subscription component. This will throw error on Subscribe Now button click.

Code Sample - Subscribe component to simulate exception

To process the error, let's create an Error component. This component takes Child Content RenderFragment as input. This component also has ProcessError method to process the exception and log it to browser console or backend API. For simplicity I'm logging into browser console.

Code Sample - Error component to log exception

Now lets wrap our Subscription component with Error component.

Code Sample - Blazor Error logging with Error Component

That's it. Now if any exception occurs, Subscription component will make use of CascadingParameter Error component and process the exception which then can be used to log to browser console or posted to backend API.

Demo - Error Logging

Scenario - Let's simulate an error logging when subscribing. Don't forget to check the browser console after clicking the below button

Summary

I'm happy that you have reached to the end of this article. Here we learnt how to log exceptions in blazor wasm applications by wrapping the components in a error component. Once we get the error we can notify users in a beautiful way and log to azure app insights or to any external system.

  • Blazor
  • Exception Logging
  • Error Logging