Setup Guide

1. Where to add the NuGet Package

The easiest way to install Blazrlytics is via the NuGet Package Manager. You can search for Blazrlytics in Visual Studio or run the following command in your terminal:

dotnet add package Blazrlytics

If you have an existing Blazor application, you can also add the package manually by editing your project file.

<PackageReference Include="Blazrlytics" Version="1.0.0" />

If you are running standard Blazor Web App with both a "Server" and a "Client" project, you only need to add the package to the "Client" project, as the "Server" project will have a reference to the "Client" project.

2. How to Register the Services

Open your application's Program.cs file and add the Blazrlytics services to your DI container. This single line enables real-time diagnostics for your application.

builder.Services.AddBlazrlytics();

If you are running standard Blazor Web App with both a "Server" and a "Client" project, and you wish to see event traces from both Server & WebAssmbly code, you will need to initialise Blazrlytics in BOTH of your Program.cs files.

Normally you should place the initialization code immediately after the WebApplicationBuilder has been created.

For a "Server" application:

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddBlazrlytics();

For a "WebAssembly" application:

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddBlazrlytics();

The only exception to this rule is if you are registering your own IComponentActivator. In this case, initialize Blazrlytics AFTER you register your IComponentActivator implementation.

var builder = WebApplication.CreateBuilder(args);

// Register a custom activator BEFORE Blazrlytics
builder.Services.AddScoped<IComponentActivator, MyTestComponentActivator>();
builder.Services.AddBlazrlytics(builder.Configuration);

3. Placement of the Dashboard

Browser DevTools Extension

We recommend that you install our dedicated browser extension. This integrates seamlessly into the Chrome/Edge DevTools panel for zero-footprint diagnostics.

Download Browser Extension

In-Page Overlay

Alternatively you can add the diagnostics panel directly into your application's layout. Open your MainLayout.razor (or similar shared layout) and add the following component:

<DiagnosticsPanel />

It can be positioned anywhere within your layout, as it is positioned absolutely on the page, and should sit on top of your own layout.

In-Page Overlay - with "Dock" mode

Because the diagnostics panel overlays your own layout it can sometimes obscure your own important UI elements.

It is possible to reposition, and resize the panel to suit your own layout, alternatively you can use the "Dock" mode to pin the panel to the edge of the screen.

In order to work correctly "Dock" mode relies on a specific layout:

@inherits LayoutComponentBase

<div id="blazrlytics" class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
    <DiagnosticsPanel />
</div>

<div id="blazor-error-ui" data-nosnippet>
    An unhandled error has occurred.
    <a href="." class="reload">Reload</a>
    <span class="dismiss">🗙</span>
</div>

The code above is a minimal example of how to structure your layout to support the "Dock" mode. It is a lightly modified version of the standard bootstrapped MainLayout.razor component.

The key changes are the addition of id="blazrlytics" on the main div, and the addition of <DiagnosticsPanel /> at the end of that div.

Doing this should allow the diagnostics panel to be displayed in "Dock" mode. In this mode, it should not obscure your own important UI elements, as it will allow you to scroll down to them.

Important: The "Dock" mode is experimental, and may not work in other layouts. We would welcome your feedback on this function, and how we might improve it.

However, we strongly recommend that you install our dedicated browser extension. This integrates seamlessly into the Chrome/Edge DevTools panel for zero-footprint diagnostics.

Download Browser Extension