Conflict with BlazorMonaco

[oveldman]

I'm building an Blazor dotnet 6 project with BlazorApplicationInsight. This packages runs fine until I install package BlazorMonaco. Monaco is created by Microsoft and you can run visual code in the browser with javascript. BlazorMonaco is created by somebody else. When I use both packages, then application insight creates a request with the following body:

Message: SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details) Stacktrace: SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details)Snippet failed to load [https://js.monitor.azure.com/scripts/b/ai.2.min.js] -- Telemetry is disabledHelp Link: https://go.microsoft.com/fwlink/?linkid=2128109Host: /Endpoint: https://dc.services.visualstudio.com/v2/track

This crash happens also local at my development machine.

I tried the following solutions but it didn't work: -> Change some security headers -> Change the order of the javascript files -> Different way to set the instrumentationKey -> More little stupid things

But nothing changed the result.

Index.html in the end of the head tag

    <!-- Extern packages -->
    <link href="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.css" rel="stylesheet" />
    <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: "",
                disableFetchTracking: false,
                enableCorsCorrelation: true,
                enableRequestHeaderTracking: true,
                enableResponseHeaderTracking: true
            }
        });
    </script>

Index.html in the end of the body tag.

    <!-- Extern packages -->
    <script type="text/javascript" src="lib/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="js/extern/smartlook-def.js"></script>
    <script type="text/javascript" src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
    <script type="text/javascript">require.config({ paths: { 'vs': '_content/BlazorMonaco/lib/monaco-editor/min/vs' } });</script>
    <script type="text/javascript" src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
    <script type="text/javascript" src="_content/BlazorMonaco/jsInterop.js"></script>
    <script type="text/javascript" src="_content/BlazorTable/BlazorTable.min.js"></script>

    <!-- App packages -->
    <script type="text/javascript" src="_framework/blazor.webassembly.js"></script>
    <script type="text/javascript">navigator.serviceWorker.register('service-worker.js');</script>
    <script type="text/javascript" src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script>

    <!-- Extern packages -->
    <script type="text/javascript" src="_content/BlazorApplicationInsights/JsInterop.js"></script>

Program.cs

            builder.Services.AddBlazorApplicationInsights(async applicationInsights =>
            {
                await applicationInsights.SetInstrumentationKey(InstrumentationKey);
                await applicationInsights.TrackPageView();
            });

_Imports.razor

@using BlazorApplicationInsights
@using BlazorMonaco

App.razor <ApplicationInsightsComponent />

Do you have idea's how to identify the problem or maybe even fix it? Did you have this problem with other packages as well? At the moment I have no idea's anymore how to tackle the problem.

I created other test projects. When I installed both packages, then the same problem will be there again.

My blazor project is here if you need it: Blazor Project My website to see the errormessage: Mad-World.nl

If you have questions, then I would like that to hear.

[rsek-uk]

I am having this exact same issue (thank you so much for posting the issue @oveldman). I tried juggling around the various script references but nothing seems to resolve it.

If I remove the script references to BlazorMonaco in the index.html the problem goes away so I was guessing it is related to that somehow. Thinking it might be related to the loader bundled with BlazorMonaco I added the require.js source (from https://requirejs.org/docs/release/2.3.6/comments/require.js) to index.html and this triggers the same problem (with the same "SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details)" error) - so I think that is probably the problem here.

Does BlazorApplicationInsights introduce its own require loader, or do something else that might cause it to clash with another require loader that might already exist?

[SLStinson]

I am struggling with the same conflict between BlazorMonaco and BlazorApplicationInsights too. Has anyone been able to find a workaround for this problem?

[IvanJosipovic]

If someone can create a Git repo with this issue reproduced, I can have a look at it. There is nothing fancy that my library is doing when it comes to loading resources.

[oveldman]

@IvanJosipovic Yes! I will try to reproduce the issue next Sunday or Monday (18/19 september 2022).

[winstliu]

Hey! Happened to see this after Ivan resolved a different issue of mine earlier today. We ran into this as well back in January and raised it directly with the App Insights team, who gave us a solution in microsoft/ApplicationInsights-JS#1742. It has nothing to do with this package but rather AI itself.

TL;DR: AI's UMD module conflicts with Monaco, which uses AMD/RequireJS. The solution is to set the src to use the IIFE module (https://js.monitor.azure.com/scripts/b/ai.2.gbl.min.js) rather than the default module - more information here and in the linked bug, above.

[oveldman]

I made the following repo: https://github.com/oveldman/ConflictApplicationInsight

Unfortunately, I couldn't reproduce the exact same problem. But there is still a problem between these two packages.

In the main branch I installed the two packages. I made extra two branches. Both branches contains only the package what is in the name.

When I startup the application right now, then a different problem will be there. There is no crash when application insight sends a request. But in the request there is no iKey (Instrumentation Key). Then in the server sends a response with a statuscode 400 and it said that this is no valid Instrumentation Key.

The interesting thing is that when I removed the following code from index.html, then the application insight is working normally: <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>

But of course then the package Monaco doesn't work anymore.

I don't know if it is a problem with your package, but maybe somebody can find out.

[IvanJosipovic]

I made the following repo: https://github.com/oveldman/ConflictApplicationInsight

In the main branch I installed the two packages. I made extra two branches. Both branches contains only the package what is in the name.

When I startup the application right now, then a different problem will be there. There is no crash when application insight sends a request. But in the request there is no iKey (Instrumentation Key). Then in the server sends a response with a statuscode 400 and it said that this is no valid Instrumentation Key.

The interesting thing is that when I removed the following code from index.html, then the application insight is working normally: <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>

But of course then the package Monaco doesn't work anymore.

I don't know if it is a problem with your package, but maybe somebody can find out.

Have a look at the post above, it seems there is a solution. Change index.html url to https://js.monitor.azure.com/scripts/b/ai.2.gbl.min.js

[oveldman]

Thank you for saying it again. It is fixed now.

I indeed changed the src file to https://js.monitor.azure.com/scripts/b/ai.2.gbl.min.js and it is working now.