Blazor Web App with Telemetry Initializer: Could not find 'blazorApplicationInsights.addTelemetryInitializer' ('blazorApplicationInsights' was undefined).

[Jiří Kanda]

Reprosteps

1. Create a new project from the Blazor Web App template, as an Interactive Render Mode choose WebAssembly.
2. Follow the BlazorApplicationInsights' guide for Blazor Web App but change <ApplicationInsightsInit @rendermode="@InteractiveAuto" /> to <ApplicationInsightsInit @rendermode="@(new InteractiveWebAssemblyRenderMode(prerender: false))" /> , there is neither server side rendering nor prerendering.
3. Run the application. It works well now.
4. Change the configuration to use a telemetry initializer, ie.

builder.Services.AddBlazorApplicationInsights(x =>
{
    x.ConnectionString = "...";
},
async applicationInsights =>
{
    var telemetryItem = new TelemetryItem()
    {
        Tags = new Dictionary<string, object>
        {
            { "ai.cloud.role", "Web.Client" },
        }
    };
    await applicationInsights.AddTelemetryInitializer(telemetryItem);
});

5. Run the application.

When the application starts it throws an exception (see browser's console):

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Could not find 'blazorApplicationInsights.addTelemetryInitializer' ('blazorApplicationInsights' was undefined).
      Error: Could not find 'blazorApplicationInsights.addTelemetryInitializer' ('blazorApplicationInsights' was undefined).
          at https://localhost:7003/_framework/blazor.web.js:1:734
          at Array.forEach (<anonymous>)
          at l.findFunction (https://localhost:7003/_framework/blazor.web.js:1:702)
          at b (https://localhost:7003/_framework/blazor.web.js:1:5445)
          at https://localhost:7003/_framework/blazor.web.js:1:3238
          at new Promise (<anonymous>)
          at y.beginInvokeJSFromDotNet (https://localhost:7003/_framework/blazor.web.js:1:3201)
          at Object.ri [as invokeJSJson] (https://localhost:7003/_framework/blazor.web.js:1:165204)
          at https://localhost:7003/_framework/dotnet.runtime.8.0.1.wti57lrb1w.js:3:177853
          at Ul (https://localhost:7003/_framework/dotnet.runtime.8.0.1.wti57lrb1w.js:3:178687)
Microsoft.JSInterop.JSException: Could not find 'blazorApplicationInsights.addTelemetryInitializer' ('blazorApplicationInsights' was undefined).
Error: Could not find 'blazorApplicationInsights.addTelemetryInitializer' ('blazorApplicationInsights' was undefined).
    at https://localhost:7003/_framework/blazor.web.js:1:734
    at Array.forEach (<anonymous>)
    at l.findFunction (https://localhost:7003/_framework/blazor.web.js:1:702)
    at b (https://localhost:7003/_framework/blazor.web.js:1:5445)
    at https://localhost:7003/_framework/blazor.web.js:1:3238
    at new Promise (<anonymous>)
    at y.beginInvokeJSFromDotNet (https://localhost:7003/_framework/blazor.web.js:1:3201)
    at Object.ri [as invokeJSJson] (https://localhost:7003/_framework/blazor.web.js:1:165204)
    at https://localhost:7003/_framework/dotnet.runtime.8.0.1.wti57lrb1w.js:3:177853
    at Ul (https://localhost:7003/_framework/dotnet.runtime.8.0.1.wti57lrb1w.js:3:178687)
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Microsoft.JSInterop.Infrastructure.IJSVoidResult, Microsoft.JSInterop, Version=8.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at BlazorApplicationInsights.ApplicationInsights.AddTelemetryInitializer(TelemetryItem telemetryItem)
   at BlazorApp17.Client.Program.<>c.<<Main>b__0_1>d.MoveNext() in C:\Users\kanda\source\repos\BlazorApp17\BlazorApp17\BlazorApp17.Client\Program.cs:line 26
--- End of stack trace from previous location ---
   at BlazorApplicationInsights.ApplicationInsightsInit.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

[Ivan Josipovic]

Hey,

With pre-rendering disabled, the javascript will not be loaded automatically.

Is there a reason you disabled pre-rendering on the component?

[Jiří Kanda]

Ups.

At first: Thank you veru much for your library which fills the gap, Microsoft is not able to provide the solution for Application Insights and Blazor. I appreciate your help to the community.

Why I disabled the prerendering?

Thank you for heading me in the right direction.

• I disabled the prerendering, because in the docs there is @renderMode="InteractiveAuto". For InteractiveAuto I need to use .AddInteractiveServerComponents() and .AddInteractiveServerRenderMode() in Program.cs/Services.cs
• OK, I am changing the @renderMode to InteractiveWebAssembly.
• I get this error when starting the application: InvalidOperationException: Cannot provide a value for property 'ApplicationInsights' on type 'BlazorApplicationInsights.ApplicationInsightsInit'. There is no registered service of type 'BlazorApplicationInsights.Interfaces.IApplicationInsights'. now
• Thats why I previosly switch off the prerendering which leads me to another problems (described as this issue).
• I looked to your source and as a result am using prerendering now and I am calling AddBlazorApplicationInsights() on the server side. No configuration here (no application insights connection string).
• On the client side I followed the docs (connection string, telemetry initializers, ...)
• It looks well know.

I am going back to the docs and I found I poorly undersood Add call to Program.cs in the root and Client project if one exists, it must be root (server) and Client.

Thanks for your help!