IvanJosipovic / BlazorApplicationInsights

Application Insights for Blazor web applications

Home Page:https://BlazorApplicationInsights.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Error with the instrumentation Key in Program.cs

lprada opened this issue ยท comments

Hi I copy the sample in my program.cs

var configuration = builder.Configuration.Build();
var appInsightKey = configuration["ApplicationInsights:Key"];
//builder.Services.AddBlazorApplicationInsights();

        builder.Services.AddBlazorApplicationInsights(async applicationInsights =>
        {
            var telemetryItem = new TelemetryItem
            {
                Tags = new Dictionary<string, object>
                {
                    {"ai.cloud.role", "SPA"},
                    {"ai.cloud.roleInstance", "Blazor Wasm"}
                }
            };

            await applicationInsights.SetInstrumentationKey(appInsightKey);
            await applicationInsights.LoadAppInsights();
            await applicationInsights.AddTelemetryInitializer(telemetryItem);
        });

And I get this error in the console

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Could not find 'blazorApplicationInsights.setInstrumentationKey' ('blazorApplicationInsights' was undefined).
Error: Could not find 'blazorApplicationInsights.setInstrumentationKey' ('blazorApplicationInsights' was undefined).
at https://localhost:44367/_framework/blazor.webassembly.js:1:1287
at Array.forEach ()
at e.findFunction (https://localhost:44367/_framework/blazor.webassembly.js:1:1247)
at b (https://localhost:44367/_framework/blazor.webassembly.js:1:2989)
at https://localhost:44367/_framework/blazor.webassembly.js:1:3935
at new Promise ()
at Object.beginInvokeJSFromDotNet (https://localhost:44367/_framework/blazor.webassembly.js:1:3908)
at Object.w [as invokeJSFromDotNet] (https://localhost:44367/_framework/blazor.webassembly.js:1:64232)
at _mono_wasm_invoke_js_blazor (https://localhost:44367/_framework/dotnet.5.0.6.js:1:190800)
at do_icall (:wasm-function[10596]:0x194e4e)
Microsoft.JSInterop.JSException: Could not find 'blazorApplicationInsights.setInstrumentationKey' ('blazorApplicationInsights' was undefined).
Error: Could not find 'blazorApplicationInsights.setInstrumentationKey' ('blazorApplicationInsights' was undefined).
at https://localhost:44367/_framework/blazor.webassembly.js:1:1287
at Array.forEach ()
at e.findFunction (https://localhost:44367/_framework/blazor.webassembly.js:1:1247)
at b (https://localhost:44367/_framework/blazor.webassembly.js:1:2989)
at https://localhost:44367/_framework/blazor.webassembly.js:1:3935
at new Promise ()
at Object.beginInvokeJSFromDotNet (https://localhost:44367/_framework/blazor.webassembly.js:1:3908)
at Object.w [as invokeJSFromDotNet] (https://localhost:44367/_framework/blazor.webassembly.js:1:64232)
at _mono_wasm_invoke_js_blazor (https://localhost:44367/_framework/dotnet.5.0.6.js:1:190800)
at do_icall (:wasm-function[10596]:0x194e4e)
at Microsoft.JSInterop.JSRuntime.d__15`1[[System.Object, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext()
at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
at BlazorApplicationInsights.ApplicationInsights.SetInstrumentationKey(String key)
at Cardinal.Software.Cif.UI.App.Program.<>c__DisplayClass0_0.<

b__1>d.MoveNext() in C:\Users\lprada\Dropbox\DATA\Cardinal\CONS\CIF\cardinal-software-cif-ui\src\Cif.UI.App\Program.cs:line 53
--- End of stack trace from previous location ---
at BlazorApplicationInsights.ApplicationInsights.InitBlazorApplicationInsightsAsync(IJSRuntime jSRuntime)
at BlazorApplicationInsights.ApplicationInsightsComponent.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

If I use builder.Services.AddBlazorApplicationInsights(); then it works perfect.

I found the error, its was in the index.html. I was to literal in copyng the example in the readme.

I have

<script type="text/javascript"> !function(T,l,y){ // Removed for brevity... src: "https://js.monitor.azure.com/scripts/b/ai.2.min.js", ld: -1, // Set this to -1 crossOrigin: "anonymous", cfg: { instrumentationKey: "YOUR_INSTRUMENTATION_KEY_GOES_HERE" }}); </script>

and I need

<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", ld: -1, crossOrigin: "anonymous", cfg: { /* instrumentationKey: "6d8b71dd-ec2d-405c-8483-eb407b91cf85"*/ } }); </script>

Hey,

Yeah the snippet in the readme is trimmed as its too long, it does say "// Removed for brevity", but its very hard to see :)
I will update the readme to make it more clear.

๐ŸŽ‰ This issue has been resolved in version 1.2.1 ๐ŸŽ‰

The release is available on GitHub release

Your semantic-release bot ๐Ÿ“ฆ๐Ÿš€