Blazor 客户端 (WASM) 应用程序洞察

Posted 2023-02-15

【中文标题】Blazor 客户端 (WASM) 应用程序洞察

【英文标题】：Blazor Client Side (WASM) Application Insights

【发布时间】：2020-05-17 08:48:45

【问题描述】：

Application Insights SDK 是否适用于 Blazor WASM？

我正在尝试连接我的应用程序，但它没有发送任何指标。即使在实例化 TelemetryClient 时，它也只是挂起。

【问题讨论】：

您可以对我的项目进行一些更改以添加 Blazor 客户端的功能 - github.com/robdavey555/Blazor.ApplicationInsights 它应该只需要对 ApplicationInsightsInterop.ts 中的导航功能进行一些更改，该功能可以在资源文件夹中找到

【参考方案1】：

与 Blazor 服务器端不同，您不能只将单例添加到 IoC，然后将其注入页面。我尝试的第一件事也是这样！我知道，应该是这样……我认为 Blazor 团队需要在幕后处理这个问题。

但无论如何，这是你应该做的：

我们的方法将假定我们将使用 Application Insight javascript SDK。

复制这里提到的sn-p：https://docs.microsoft.com/en-us/azure/azure-monitor/app/javascript#snippet-based-setup

（如果你太懒，在下面找到）

<script type="text/javascript">
!function(T,l,y)var S=T.location,u="script",k="instrumentationKey",D="ingestionendpoint",C="disableExceptionTracking",E="ai.device.",I="toLowerCase",b="crossOrigin",w="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:"4",version:2,config:d;function v(e,t)var n=,a="Browser";return n[E+"id"]=a[I](),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),treturn 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:2var h=d.url||y.src;if(h)function a(e)var t,n,a,i,r,o,s,c,p,l,u;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][I]()]=i[1])if(!e[D])var r=e.endpointsuffix,o=r?e.location:null;e[D]="https://"+(o?o+".":"")+"dc."+(r||"services.visualstudio.com")return e(),c=s[k]||d[k]||"",p=s[D],l=p?p+"/v2/track":config.endpointUrl,(u=[]).push((n="SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details)",a=t,i=l,(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)),u.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,l)),function(e,t)if(JSON)var n=T.fetch;if(n&&!y.useXhr)n(t,method:w,body:JSON.stringify(e),mode:"cors");else if(XMLHttpRequest)var a=new XMLHttpRequest;a.open(w,t),a.setRequestHeader("Content-type","application/json"),a.send(JSON.stringify(e))(u,l))function i(e,t)f||setTimeout(function()!t&&m.core||a(),500)var e=function()var n=l.createElement(u);n.src=h;var e=y[b];return!e&&""!==e||"undefined"==n[b]||(n[b]=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(u)[0].parentNode.appendChild(e),y.ld||0)trym.cookie=l.cookiecatch(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[C]&&!0!==s[C])method="onerror",t(["_"+method]);var c=T[method];T[method]=function(e,t,n,a,i)var r=c&&c(e,t,n,a,i);return!0!==r&&m["_"+method](message:e,url:t,lineNumber:n,columnNumber:a,error:i),r,d.autoExceptionInstrumented=!0return m(y.cfg);(T[t]=n).queue&&0===n.queue.length&&n.trackPageView()(window,document,
src: "https://az416426.vo.msecnd.net/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 
cfg:  // Application Insights Configuration
    instrumentationKey: "YOUR_INSTRUMENTATION_KEY_GOES_HERE"
    /* ...Other Configuration Options... */
);
</script>

将上述代码复制到<head> 中的index.html 中，最好在链接和脚本标签之前

接下来，您需要注入 IJSRuntime 以从 .Net 代码中调用 JavaScript 方法。

像这样在页面顶部注入：

@inject IJSRuntime _jsRuntime

然后您可以通过如下方式调用任何您想要的 Application Insight 方法：

await _jsRuntime.InvokeVoidAsync("appInsights.trackPageView");

您可以在此处找到 AI JS SDK 的完整方法列表：

https://github.com/microsoft/ApplicationInsights-JS/blob/master/API-reference.md

如果您不想处理 JSRuntime，@IvanJosipovic 创建了一个 BlazorApplicationInsight 库来为您包装所有内容。

只需按照他的自述文件中的说明进行操作：https://github.com/IvanJosipovic/BlazorApplicationInsights

来自我的 Blazor WebAssembly 项目的遥测结果示例：

希望对你有帮助?