Integrating with Blazor Webassembly application

Use Rollbar from within a Blazor Client

Working Sample

For the working sample, please look here.

Recommended Rollbar Modules/Packages

Whenever you are trying to integrate Rollbar.NET SDK into an existing Blazor Webassembly based application, the most optimal way is to do it via our Rollbar.NetPlatformExtensions module. It will also bring in the required dependency that is Rollbar core module/package:

dotnet add package Rollbar.NetPlatformExtensions

Integrating Rollbar Within Blazor's Built-In Logging Infrastructure

Modify Program.cs file like so (all 3 steps):

namespace Sample.Blazor.WebAssembly
{
    using System;
    using System.Collections.Generic;
    using System.Net.Http;
    using System.Text;
    using System.Threading.Tasks;

    using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
    using Microsoft.Extensions.Configuration;
    using Microsoft.Extensions.DependencyInjection;
    using Microsoft.Extensions.Logging;

    using Rollbar;
    using Rollbar.NetPlatformExtensions;

    using Samples;

    public class Program
    {
        public static async Task Main(string[] args)
        {
            // STEP.1 - Create a valid Rollbar logger configuration:
            RollbarLoggerConfig rollbarConfig = new RollbarLoggerConfig(
                RollbarSamplesSettings.AccessToken, 
                RollbarSamplesSettings.Environment
                );

            var builder = WebAssemblyHostBuilder.CreateDefault(args);

            builder.RootComponents.Add<App>("#app");

            builder.Services.AddScoped(sp => 
                    new HttpClient { 
                  BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) 
                });

            builder.Services.AddLogging(configure =>
                configure
                // STEP.2 - Add desired logging filter:
                .AddFilter(levelFilter => levelFilter >= LogLevel.Information)
                // STEP.3 - Add properly configured Rollbar logger provider:
                .AddProvider(new RollbarLoggerProvider(rollbarConfig))
            );

            await builder.Build().RunAsync();
        }

    }
}

At this point, assuming the provider was properly configured and a Rollbar Project with the specified Access Token was established on Rollbar.com, you should start seeing log items appearing on your Rollbar project's Items page after you rebuild and deploy your application with the changes above. Because any use of the built-in Blazor logging API will also take advantage of the newly added Rollbar logger provider.

If by any chance you still do not see the items coming to the Rollbar project, make sure the specified Access Token is correct and the Items page has proper view filters configured, like projects, environments, frameworks, date range, show-only, levels, status, owners, etc.

If that did not help, try changing the logging filter to:

// STEP.2 - Add desired logging filter:
                .AddFilter(levelFilter => levelFilter >= LogLevel.Trace)

Using Rollbar Directly Anywhere Within the Application Code

As always you still have an option of calling Rollbar loggers directly/manually anywhere in your code, for example:

RollbarLoggerConfig config =
  new RollbarLoggerConfig(
    RollbarSamplesSettings.AccessToken,
    RollbarSamplesSettings.Environment
);

using(IRollbar logger = RollbarFactory.CreateNew(config))
{
  logger.Info("Direct use of Rollbar: Hello from Blazor WASM!!!");

  var criticalObj = new InstanceType();
    criticalObj.AutoProperty = -100;
  
  try
  {
    CallSomeTrouble();
  }
  catch(Exception ex)
  {
    string error = ex.Message;
    var customData = new Dictionary<string, object>();
    customData.Add("RollbarUsage", "Direct use of Rollbar");
    customData.Add("Error", error);
    customData.Add("CurrentCount", currentCount);
    
    // capture state of some other critical object:
    var state = RollbarAssistant.CaptureState(criticalObj, nameof(criticalObj));
    customData.Add("capturedState", state);

    logger.Error(ex, customData);
  }
}

Enjoy rolling your code quality bar up even higher!


Did this page help you?