基于 JavaScript 的方法（Blazor WASM 或服务器端）

Question

我有一个服务器端的blazor应用程序，我想使用azure应用程序的见解对其进行监视。目前，我只看到启动应用程序并关闭它时发送的请求，之间没有任何信息。。。我找不到支持Blazor的Microsoft提供的任何文档。

是否可以使Azure Application Insights与服务器端Blazor完全兼容？如果是这样，有人知道这方面的指南吗？

Answer 1

您有两种方法可以解决此问题 - 如果您计划迁移到 WASM 版本，则基于 JavaScript 的方法是理想的选择，因为它只需要很少的更改即可转换，但为了解决 @liero 的问题，我还在底部添加了服务器端方法。

基于 JavaScript 的方法（Blazor WASM 或服务器端）

我们在 Blazor 服务器端使用社区提供的 BlazorApplicationInsights 包来满足这一需求。是的，GitHub repo 中的说明与 Blazor WASM 的说明相匹配，但我很乐意为您翻译（它在服务器端也能正常工作）。请注意，提供的文件路径基于 Blazor 服务器端模板中使用的路径。

此外，我创建了一个 Git 存储库，其中包含一个实施以下步骤的项目，供您查看 here。您仍需要按照第 4 步中指定的方式设置 Application Insights 检测密钥才能使其正常工作。

将 NuGet 包 BlazorApplicationInsights 安装到您的 Blazor 服务器端项目。
在 Startup.cs 方法中的 ConfigureServices() 中，添加以下行：

services.AddBlazorApplicationInsights();

您可能希望扩充设置以反映自定义角色和实例值。您可以使用以下内容来处理此问题（同一位置）：

services.AddBlazorApplicationInsights(async appInsights => {
  var telemetryItem = new TelemetryItem 
  {
    Tags = new Dictionary<string, object> 
    {
      {"ai.cloud.role", "SPA"},
      {"ai.cloud.roleInstance", "Blazor server-side"}
    }
  };

  await appInsights.AddTelemetryInitializer(telemetryItem);
});

将以下@using 语句添加到 _Imports.razor：

@using BlazorApplicationInsights

将 Application Insights JS 文件的引用添加到 Pages/_Host.cshtml 文件的头部。从 here 提取的脚本。请注意最后一行，您需要将字符串值替换为您的 Application Insights 检测键。

<head>
  <!-- ... -->
<script type="text/javascript">
        !function (T, l, y) { var S = T.location, k = "script", D = "instrumentationKey", C = "ingestionendpoint", I = "disableExceptionTracking", E = "ai.device.", b = "toLowerCase", w = "crossOrigin", N = "POST", e = "appInsightsSDK", t = y.name || "appInsights"; (y.name || T[e]) && (T[e] = t); var n = T[t] || function (d) { var g = !1, f = !1, m = { initialize: !0, queue: [], sv: "5", version: 2, config: d }; function v(e, t) { var n = {}, a = "Browser"; return n[E + "id"] = a[b](), n[E + "type"] = a, n["ai.operation.name"] = S && S.pathname || "_unknown_", n["ai.internal.sdkVersion"] = "javascript:snippet_" + (m.sv || m.version), { time: function () { var e = new Date; function t(e) { var t = "" + e; return 1 === t.length && (t = "0" + t), t } return e.getUTCFullYear() + "-" + t(1 + e.getUTCMonth()) + "-" + t(e.getUTCDate()) + "T" + t(e.getUTCHours()) + ":" + t(e.getUTCMinutes()) + ":" + t(e.getUTCSeconds()) + "." + ((e.getUTCMilliseconds() / 1e3).toFixed(3) + "").slice(2, 5) + "Z" }(), iKey: e, name: "Microsoft.ApplicationInsights." + e.replace(/-/g, "") + "." + t, sampleRate: 100, tags: n, data: { baseData: { ver: 2 } } } } var h = d.url || y.src; if (h) { function a(e) { var t, n, a, i, r, o, s, c, u, p, l; g = !0, m.queue = [], f || (f = !0, t = h, s = function () { var e = {}, t = d.connectionString; if (t) for (var n = t.split(";"), a = 0; a < n.length; a++) { var i = n[a].split("="); 2 === i.length && (e[i[0][b]()] = i[1]) } if (!e[C]) { var r = e.endpointsuffix, o = r ? e.location : null; e[C] = "https://" + (o ? o + "." : "") + "dc." + (r || "services.visualstudio.com") } return e }(), c = s[D] || d[D] || "", u = s[C], p = u ? u + "/v2/track" : d.endpointUrl, (l = []).push((n = "SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details)", a = t, i = p, (o = (r = v(c, "Exception")).data).baseType = "ExceptionData", o.baseData.exceptions = [{ typeName: "SDKLoadFailed", message: n.replace(/\./g, "-"), hasFullStack: !1, stack: n + "\nSnippet failed to load [" + a + "] -- Telemetry is disabled\nHelp Link: https://go.microsoft.com/fwlink/?linkid=2128109\nHost: " + (S && S.pathname || "_unknown_") + "\nEndpoint: " + i, parsedStack: [] }], r)), l.push(function (e, t, n, a) { var i = v(c, "Message"), r = i.data; r.baseType = "MessageData"; var o = r.baseData; return o.message = 'AI (Internal): 99 message:"' + ("SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details) (" + n + ")").replace(/\"/g, "") + '"', o.properties = { endpoint: a }, i }(0, 0, t, p)), function (e, t) { if (JSON) { var n = T.fetch; if (n && !y.useXhr) n(t, { method: N, body: JSON.stringify(e), mode: "cors" }); else if (XMLHttpRequest) { var a = new XMLHttpRequest; a.open(N, t), a.setRequestHeader("Content-type", "application/json"), a.send(JSON.stringify(e)) } } }(l, p)) } function i(e, t) { f || setTimeout(function () { !t && m.core || a() }, 500) } var e = function () { var n = l.createElement(k); n.src = h; var e = y[w]; return !e && "" !== e || "undefined" == n[w] || (n[w] = e), n.onload = i, n.onerror = a, n.onreadystatechange = function (e, t) { "loaded" !== n.readyState && "complete" !== n.readyState || i(0, t) }, n }(); y.ld < 0 ? l.getElementsByTagName("head")[0].appendChild(e) : setTimeout(function () { l.getElementsByTagName(k)[0].parentNode.appendChild(e) }, y.ld || 0) } try { m.cookie = l.cookie } catch (p) { } function t(e) { for (; e.length;)!function (t) { m[t] = function () { var e = arguments; g || m.queue.push(function () { m[t].apply(m, e) }) } }(e.pop()) } var n = "track", r = "TrackPage", o = "TrackEvent"; t([n + "Event", n + "PageView", n + "Exception", n + "Trace", n + "DependencyData", n + "Metric", n + "PageViewPerformance", "start" + r, "stop" + r, "start" + o, "stop" + o, "addTelemetryInitializer", "setAuthenticatedUserContext", "clearAuthenticatedUserContext", "flush"]), m.SeverityLevel = { Verbose: 0, Information: 1, Warning: 2, Error: 3, Critical: 4 }; var s = (d.extensionConfig || {}).ApplicationInsightsAnalytics || {}; if (!0 !== d[I] && !0 !== s[I]) { var c = "onerror"; t(["_" + c]); var u = T[c]; T[c] = function (e, t, n, a, i) { var r = u && u(e, t, n, a, i); return !0 !== r && m["_" + c]({ message: e, url: t, lineNumber: n, columnNumber: a, error: i }), r }, d.autoExceptionInstrumented = !0 } return m }(y.cfg); function a() { y.onInit && y.onInit(n) } (T[t] = n).queue && 0 === n.queue.length ? (n.queue.push(a), n.trackPageView({})) : a() }(window, document, {
            src: "https://js.monitor.azure.com/scripts/b/ai.2.min.js", // The SDK URL Source
            // name: "appInsights", // Global SDK Instance name defaults to "appInsights" when not supplied
            // ld: 0, // Defines the load delay (in ms) before attempting to load the sdk. -1 = block page load and add to head. (default) = 0ms load after timeout,
            // useXhr: 1, // Use XHR instead of fetch to report failures (if available),
            crossOrigin: "anonymous", // When supplied this will add the provided value as the cross origin attribute on the script tag
            // onInit: null, // Once the application insights instance has loaded and initialized this callback function will be called with 1 argument -- the sdk instance (DO NOT ADD anything to the sdk.queue -- As they won't get called)
            cfg: { // Application Insights Configuration
                instrumentationKey: "INSTRUMENTATION_KEY"
            }
        });
    </script>
</head>

将 JS 互操作添加到 Pages/_Host.cshtml 文件底部的 </body> 结束标记之前：

<body>
  <!-- ... ->
  <script src="_content/BlazorApplicationInsights/JsInterop.js"></script>
</body>

将以下内容添加到您的 App.razor 文件的顶部以支持自动导航跟踪：

<ApplicationInsightsComponent />

此库将在路线更改时自动触发“跟踪页面视图”，但其他任何事情都需要您手动触发事件。以下是您的一个页面中可能包含的示例（请参阅更多示例方法 here）：

@page "/"
@inject IApplicationInsights AppInsights

<button class="btn btn-primary" @onclick="TrackEvent">Track Event</button>
<button class="btn btn-secondary" @onclick="TrackMetric">Track Metric</button>

@code {
  private async Task TrackEvent()
  {
    await AppInsights.TrackEvent("My Event");
  }

  private async Task TrackMetric()
  {
    await AppInsights.TrackMetric("myMetric", 100, 200, 1, 200, new Dictionary<string,object> {{"customProperty", "customValue"}});
    await AppInsights.Flush();
  }
}

您会注意到使用 sample code 中的 PageViewPerformanceTelemtry 支持 TrackPageViewPerformance。与其绑定到按钮，您可能更想在 @code 块中调用它，如下所示：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await AppInsights.TrackPageViewPerformance(new PageViewPerformanceTelemetry());
}

Application Insights SDK 方法（Blazor 服务器端）

将 NuGet 包 Microsoft.ApplicationInsights.AspNetCore 安装到您的 Blazor 服务器端项目。
在 Startup.cs 方法内的 ConfigureServices() 中，添加以下行，将字符串参数替换为您的 App Insights 检测键：

services.AddBlazorApplicationInsights("INSERT YOUR INSTRUMENTATION KEY HERE");

或者，您也可以删除字符串并将密钥存储在以下任一环境变量中：

APPINSIGHTS_INSTRUMENTATIONKEY
ApplicationInsights:InstrumentationKey

关于您可能希望启用的其他遥测模块，您可以找到其他文档 here，其中描述了您可以选择在此处传递的各种选项。

将以下 @using 语句添加到 _Imports.razor：

@using Microsoft.ApplicationInsights

由于 Application Insights 没有与 Blazor 的任何本机集成，因此您需要自行连接要跟踪的所有内容。我们将在本节的其余部分介绍一些方法。

首先，我们需要创建宿主组件来跟踪各种导航操作。在您的共享目录中创建一个名为 ApplicationInsightsComponent.cs 的新 CS 文件并填充以下内容：

using System;
using Microsoft.ApplicationInsights;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Routing;

namespace ApplicationInsightsServerSample.Shared
{
    public class ApplicationInsightsComponent : ComponentBase, IDisposable
    {
        [Inject]
        private TelemetryClient _telemetryClient { get; init; }

        [Inject]
        private NavigationManager _navigationManager { get; init; }

        protected override void OnAfterRender(bool firstRender)
        {
            if (firstRender)
            {
                _navigationManager.LocationChanged += NavigationManagerOnLocationChanged;
            }
        }

        private void NavigationManagerOnLocationChanged(object? sender, LocationChangedEventArgs e)
        {
            _telemetryClient.TrackPageView(e.Location); //Set the argument to whatever you'd like to name the page
            
        }


        public void Dispose()
        {
            _navigationManager.LocationChanged -= NavigationManagerOnLocationChanged;
        }
    }
}

在您的 App.razor 文件中，将以下内容添加到顶部：

<ApplicationInsightsComponent />

让我们也实现一些东西来捕获应用程序中抛出的任何异常。创建共享目录中名为 Error.razor 的另一个文件并填充以下内容：

@inject TelemetryClient _telemetryClient

<CascadingValue Value=this>
    @ChildContent
</CascadingValue>

@code 
{
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    public void ProcessError(Exception ex)
    {
        _telemetryClient.TrackException(ex);
    }
}

回到您的 App.razor 文件，使用这个新组件包装路由器，如下所示：

<Error>
  <Router ...>
    ...
  </Router>
</Error>

然后在任何组件中，将 Error 组件指定为代码块中的级联参数，如下所示：

@code {
  [CascadingParameter]
  public Error Error {get; set;}
}

当您使用 try/catch 块以其他方式包装操作时，请在您的 catch 中调用 Error.ProcessError(ex) 以将异常传播到我们的错误组件：

try 
{
  // ...
}
catch (Exception ex)
{
  Error.ProcessError(ex);
}

除此之外，您无疑会希望在各个页面上跟踪任意数量的事件，因此我将以 TrackEvent 示例结束。就像在另一个答案中一样，让我们使用其按钮重新调整页面示例的用途，并在此处重新设计以实现兼容性：

@page "/"
@inject TelemetryClient _telemetryClient

<button class="btn btn-primary" @onclick="TrackEvent">Track Event</button>
<button class="btn btn-secondary" @onclick="TrackMetric">Track Metric</button>

@code {
  private void TrackEvent()
  {
    await _telemetryClient.TrackEvent("My Event");
  }

  private void TrackMetric()
  {
    _telemetryClient.TrackMetric("myMetric", 100, new Dictionary<string,string> {{"customProperty", "customValue"}});
  }
}

我希望这会有所帮助，但我很乐意用您正在寻找的任何其他细节更新此答案！

Answer 2

Blazor服务器应用本质上是asp.net核心应用。因此，您应该在this guide之后设置应用程序见解集成。

在项目中添加“ Microsoft.ApplicationInsights.AspNetCore” nuget。

    <ItemGroup>
      <PackageReference Include="Microsoft.ApplicationInsights.AspNetCore" Version="2.13.1" />
    </ItemGroup>

在Startup.cs的services.AddApplicationInsightsTelemetry();方法中添加ConfigureServices。

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        // The following line enables Application Insights telemetry collection.
        services.AddApplicationInsightsTelemetry();

        // This code adds other services for your application.
        ...
    }

在appsettins.json中添加检测密钥。

    {
      "ApplicationInsights": {
        "InstrumentationKey": "putinstrumentationkeyhere"
      },
      "Logging": {
        "LogLevel": {
          "Default": "Warning"
        }
      }
    }

服务器端应用程序的Azure应用程序见解？

2 个答案:

基于 JavaScript 的方法（Blazor WASM 或服务器端）

Application Insights SDK 方法（Blazor 服务器端）