Blazor Integration

ByteHide Logger provides seamless integration with Blazor applications (both Server and WebAssembly), automatically capturing navigation events, component errors, and browser information.

Installation

Install the Blazor integration package:

dotnet add package Bytehide.Logger.Blazor

Supported Versions

• .NET Core 3.1, .NET 5, .NET 6, .NET 7, .NET 8, .NET 9

Basic Configuration

Blazor WebAssembly

Configure in Program.cs:

using Bytehide.Logger.Blazor.Extensions;

var builder = WebAssemblyHostBuilder.CreateDefault(args);

// Add ByteHide Logger
builder.Services.AddBytehideLogging(options => {
    options.ProjectToken = "your-project-token";
});

var host = builder.Build();

// Initialize the logger
host.Services.UseBytehideLogging();

await host.RunAsync();

Blazor Server

Configure in Program.cs:

using Bytehide.Logger.Blazor.Extensions;

var builder = WebApplication.CreateBuilder(args);

// Add ByteHide Logger
builder.Services.AddBytehideLogging(options => {
    options.ProjectToken = "your-project-token";
});

var app = builder.Build();

// Initialize the logger
app.Services.UseBytehideLogging();

app.Run();

Configuration Options

Basic Options

builder.Services.AddBytehideLogging(options => {
    // Required
    options.ProjectToken = "your-project-token";
    
    // Event Tracking
    options.CaptureNavigationEvents = true;        // Log page navigation
    options.CaptureUnhandledExceptions = true;     // Log unhandled errors
    options.LogBrowserInfo = true;                 // Log browser details
    
    // Performance Features
    options.UseCompactNavigationLogs = true;       // Shorter log messages
    options.NavigationDuplicateSuppressionSeconds = 3; // Avoid duplicates
    options.SlowNavigationThresholdMs = 1000;      // Flag slow navigation
    
    // User Context
    options.AutoIdentifyUsers = true;              // Extract user from auth
    options.UserIdentificationClaims = new[] { "sub", "name", "email" };
    
    // Integration
    options.ReplaceDefaultLogger = true;           // Use as ILogger provider
    options.LogLevel = LogLevel.Info;              // Minimum log level
});

Advanced Options

builder.Services.AddBytehideLogging(options => {
    options.ProjectToken = "your-project-token";
    
    // Advanced Features (use sparingly)
    options.CaptureComponentLifecycleEvents = false; // For debugging only
    options.CaptureJsInterop = false;                // Log JS interop calls
    
    // Correlation tracking
    options.EnableCorrelationTracking = true;
});

Features

Error Boundary Component

Use the built-in error boundary to catch component errors:

@using Bytehide.Logger.Blazor.Components

<BytehideErrorBoundary>
    <ChildContent>
        <MyComponent />
    </ChildContent>
    <ErrorContent Context="exception">
        <p>Something went wrong: @exception.Message</p>
    </ErrorContent>
</BytehideErrorBoundary>

Component Lifecycle Logging

For debugging, inherit from the logging base component:

@using Bytehide.Logger.Blazor.Components
@inherits LoggingComponentBase

<h1>My Component</h1>

@code {
    // Lifecycle events automatically logged
    protected override void OnInitialized()
    {
        base.OnInitialized();
        
        // Your initialization code
    }
}

Custom Logging

@inject ILogger<MyComponent> Logger

<button @onclick="HandleClick">Click Me</button>

@code {
    private void HandleClick()
    {
        Log.WithTags("blazor", "interaction")
           .WithMetadata("component", "MyComponent")
           .Info("Button clicked");
    }
}

Automatic Features

Navigation Tracking

// Automatically logs when users navigate between pages:
// [INFO] Navigation from /home to /products completed in 245ms

Browser Information

// Automatically captures:
// - User agent
// - Screen resolution  
// - Browser language
// - Time zone

User Identification

// When enabled, automatically extracts user info from AuthenticationState:
// [INFO] User authenticated: user@example.com (ID: 12345)

File Logging (Blazor Server Only)

builder.Services.AddBytehideLogging(
    options => {
        options.ProjectToken = "your-project-token";
    },
    logSettings => {
        // File logging only works in Blazor Server
        logSettings.Persist = true;
        logSettings.FilePath = "logs/blazor.log";
        logSettings.RollingInterval = RollingInterval.Day;
    }
);

Options Reference

Best Practices

• Enable UseCompactNavigationLogs in production to reduce log volume
• Use NavigationDuplicateSuppressionSeconds to prevent log flooding
• Keep CaptureComponentLifecycleEvents = false except during debugging
• Enable AutoIdentifyUsers for user-specific logging

Platform Differences

Blazor WebAssembly

• File logging not supported (browser limitation)
• All logs sent over network
• Client-side performance monitoring

Blazor Server

• Full file logging support
• Server-side component error logging
• SignalR connection monitoring

Next Steps

• Configuration - Set up your project token
• User Identification - Track user activities
• Exception Handling - Component error logging