.NET 6 Web应用如何将控制台JS异常记录到Application Insights

问题核心 #

当前配置仅完成了服务器端的Application Insights集成（NLog日志、SQL依赖追踪），前端JS异常需要单独配置Application Insights JavaScript SDK才能捕获，这是服务器端SDK覆盖不到的范围。你提到的控制台错误，大概率是JS SDK未正确引入或配置导致的。

解决方案步骤 #

1. 引入并配置Application Insights JavaScript SDK #

在你的布局页面（如_Layout.cshtml）的</body>标签前添加以下代码，替换为你的Application Insights连接字符串（可从Azure门户获取）：

<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:"7",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=v(c,"Exception")).data.baseData.exceptions=[{typeName:"SDKLoadFailed",message:n.replace(/\./g,"-"),hasFullStack:!1,stack:n+"\nSnippet failed to load ["+a+"] -- Telemetry is disabled\nHost: "+(S&&S.pathname||"_unknown_"),parsedStack:[]}],o.data.baseData.properties={endpoint:i}),l),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(){!g&&t&&y.onError&&y.onError(e)},500)}var r=function(e,t){n=function(){var n,a={},i=T.scriptElement||k;for(n in t)a[n]=t[n];a.src=e;var r=T.createElement(i);if(r){for(n in a)r[n]=a[n];r.onerror=i(r.src),r.onload=i(r.src,1),T.getElementsByTagName("head")[0].appendChild(r)}};return n}();r(h,{onload:function(){var e=T[t];if(e.initialize)e.initialize(m.config);else{var n=function(e){var t={},n="Browser";return t[E+"id"]=n[b](),t[E+"type"]=n,t}(d);y.queue&&0===y.queue.length&&y.queue.push(function(){e.context.addTelemetryInitializer(function(t){t.tags||(t.tags={});t.tags["ai.device.id"]=n["ai.device.id"],t.tags["ai.device.type"]=n["ai.device.type"]})})}},onerror:a,crossOrigin:"anonymous"})}return m}(window,document,{
src: "https://js.monitor.azure.com/scripts/b/ai.2.min.js",
// 替换为你的Application Insights连接字符串
connectionString: "YOUR_CONNECTION_STRING_HERE"
});
window.appInsights=appInsights;
// 启用自动捕获异常（包括控制台错误）
appInsights.loadAppInsights();
appInsights.config.disableExceptionTracking = false;
// 手动捕获未处理的Promise拒绝（可选）
window.addEventListener("unhandledrejection", function(event) {
    appInsights.trackException({ exception: event.reason, severityLevel: 3 });
});
</script>

2. 验证服务器端配置兼容性 #

确保appsettings.json中正确配置了Application Insights连接字符串，服务器端会自动读取该配置：

{
  "ApplicationInsights": {
    "ConnectionString": "YOUR_CONNECTION_STRING_HERE"
  }
}

你现有的服务器端配置services.AddApplicationInsightsTelemetry();无需额外修改。

3. 排查控制台错误 #

你遇到的控制台错误，常见原因及修复：

• 连接字符串错误：确认JS SDK中填入的连接字符串与服务器端一致，且在Azure门户中有效。
• CORS问题：默认情况下Application Insights ingestion端点允许所有域名访问，若部署在特殊环境，需检查域名访问权限。
• SDK版本不兼容：使用上述CDN链接的稳定版JS SDK，避免与服务器端SDK版本差异过大。

4. 测试异常捕获 #

在前端页面添加测试按钮触发异常，验证是否能被捕获：

<button onclick="throw new Error('Test JS Exception')">触发测试异常</button>

点击后等待几分钟，登录Azure门户查看Application Insights的异常面板，即可看到测试记录。

关键提示 #

• 前端JS异常捕获完全依赖Application Insights JavaScript SDK，服务器端SDK无法直接捕获前端错误。
• 若使用Webpack等打包工具，也可通过npm安装@microsoft/applicationinsights-web包，在入口文件中初始化SDK，效果与CDN方式一致。

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