Observabilité complète pour Blazor

1. Installer le package

Ajoutez le package NuGet à votre projet serveur.

dotnet add package BlazorAmpowering.Observability

2. Configurer appsettings.json

Ajoutez la section OpenTelemetry à votre fichier de configuration.

{
  "OpenTelemetry": {
    "Enabled": true,
    "ApplicationName": "my-app",
    "OtlpEndpoint": "http://localhost:4318/v1/traces",
    "SamplingProbability": 1.0
  }
}

3. Enregistrer dans Program.cs

Appelez les extensions dans l'ordre indiqué.

var builder = WebApplication.CreateBuilder(args);

builder.Services
    .AddRazorComponents()
    .AddInteractiveServerComponents();

// Web API — un span par action
builder.Services
    .AddControllers()
    .AddApiObservability();

// Circuit handler + navigation
builder.Services.AddBlazorObservability();

// Pipeline OTel : traces + métriques
builder.AddBlazorTelemetry();

// Profiling Pyroscope (no-op si le profiler natif n'est pas chargé)
builder.AddBlazorProfiler();

4. Instrumenter les composants

Ajoutez l'héritage dans _Imports.razor pour instrumenter tous les composants d'un dossier.

@using BlazorAmpowering.Observability.Components
@inherits InstrumentedComponentBase

@code {
    protected override async Task OnInitializedCoreAsync()
    {
        data = await MyService.GetDataAsync();
    }
}

5. Activer la navigation (optionnel)

Injectez NavigationInstrumentation dans MainLayout.razor pour tracer chaque changement de route.

@using BlazorAmpowering.Observability.Services
@inject NavigationInstrumentation NavInstrumentation

1. Installer le package WASM

Ajoutez le package au projet client WebAssembly.

dotnet add package BlazorAmpowering.Observability.WebAssembly

2. Enregistrer dans Program.cs (client)

Une seule ligne dans le Program.cs du client WASM.

var builder = WebAssemblyHostBuilder.CreateDefault(args);

builder.Services.AddWasmObservability();

await builder.Build().RunAsync();

3. Instrumenter les composants WASM

Utilisez WasmInstrumentedComponentBase à la place du base class standard.

@using BlazorAmpowering.Observability.WebAssembly.Components
@inherits WasmInstrumentedComponentBase

@code {
    protected override async Task OnInitializedCoreAsync()
    {
        // Les appels HTTP sortants injectent automatiquement
        // traceparent et X-Blazor-* dans les headers.
        data = await Http.GetFromJsonAsync<MyData[]>("/api/data");
    }

    // Contexte explicite pour les appels déclenchés par un événement
    private async Task HandleClick()
    {
        await TraceRequest(() => Http.PostAsJsonAsync("/api/action", payload));
    }
}

4. Configuration serveur

1. Ajouter l'observabilité aux contrôleurs

Chaînez AddApiObservability() après AddControllers().

builder.Services
    .AddControllers()
    .AddApiObservability();

// Désactiver la capture des paramètres en production (données sensibles)
builder.Services
    .AddControllers()
    .AddApiObservability(options =>
    {
        options.CaptureActionParameters = false;
    });

2. Tags enrichis par WASM

Quand l'API est appelée depuis un client WASM, les spans sont automatiquement enrichis avec blazor.component, blazor.method, blazor.event et client.latency_ms.

ProductsController.GetAll
├─ controller:        Products
├─ action:            GetAll
├─ http.method:       GET
├─ http.route:        api/products
├─ http.status_code:  200
├─ blazor.component:  ProductList   ← injecté par le client WASM
├─ blazor.method:     OnInitialized
└─ client.latency_ms: 42

1. Installer le package EF Core

Ce package est en pre-release car sa dépendance OpenTelemetry ne l'est pas encore.

dotnet add package BlazorAmpowering.Observability --version 1.0.0
dotnet add package BlazorAmpowering.Observability.EntityFrameworkCore --prerelease

2. Appeler après AddBlazorTelemetry()

Ajoutez l'instrumentation EF Core après le pipeline OTel principal.

builder.AddBlazorTelemetry();

// EF Core — un span par requête SQL
builder.AddEntityFrameworkCoreInstrumentation();

GET /api/products
└─ ProductsController.GetAll
   └─ SELECT * FROM "Products"    ← span EF Core
      ├─ db.system:      sqlite
      ├─ db.name:        mydb
      └─ db.statement:   SELECT "p"."Id", "p"."Date" FROM "Products" AS "p"