在Blazor Client(Web Assembly)中集成Application Insights的配置疑问

1. @inject文本直接显示的问题 #

index.html 是Blazor WASM的静态入口文件，不支持Razor语法解析，你写在文件开头的@inject IJSRuntime _jsRuntime以及</body>标签外的await _jsRuntime.InvokeVoidAsync(...) 属于Razor/C#代码，无法被静态HTML识别，会直接作为普通文本渲染到页面上，这就是你看到异常文本的原因。

2. 埋点覆盖范围问题 #

你在index.html中添加的Application Insights JS片段，仅需要配置一次即可作用于全应用：

• 默认会自动采集全应用的前端异常、静态资源加载性能、首次页面加载等数据
• 但Blazor WASM采用客户端路由，切换页面不会触发浏览器原生的页面重载，因此Application Insights默认无法自动采集路由跳转后的页面浏览数据，需要额外补充代码处理，不需要在每个Razor页面单独添加配置。

1. 先清理index.html中的无效代码：删除开头的@inject IJSRuntime _jsRuntime行，以及</body>和</html>之间的await _jsRuntime.InvokeVoidAsync(...)代码行，Application Insights的JS片段保留即可。

2. 全局路由切换页面浏览埋点（可选，若需要采集路由跳转数据）：
   在全局共享的MainLayout.razor中添加如下代码，统一监听路由变化触发页面浏览埋点：

@inject IJSRuntime _jsRuntime
@inject NavigationManager _navManager
@implements IDisposable

@code {
    protected override void OnInitialized()
    {
        _navManager.LocationChanged += OnLocationChanged;
    }

    private async void OnLocationChanged(object sender, LocationChangedEventArgs e)
    {
        await _jsRuntime.InvokeVoidAsync("appInsights.trackPageView", new { uri = e.Location });
    }

    public void Dispose()
    {
        _navManager.LocationChanged -= OnLocationChanged;
    }
}

3. 自定义事件埋点（可选，若需要上报自定义业务事件）：
   在需要埋点的Razor组件中直接注入IJSRuntime，调用对应的Application Insights JS方法即可，示例：

@inject IJSRuntime _jsRuntime

<button @onclick="TrackCustomEvent">上报事件</button>

@code {
    private async Task TrackCustomEvent()
    {
        await _jsRuntime.InvokeVoidAsync("appInsights.trackEvent", new { 
            name = "按钮点击",
            properties = new { 页面 = "首页", 按钮名称 = "提交" }
        });
    }
}

内容的提问来源于stack exchange，提问作者MarkCo