当前位置：网站首页>Azure applicationinsights integrated in blazor

Azure applicationinsights integrated in blazor

2022-06-21 13:40:00 【Guo Mahua】

Blazor In the integration Azure ApplicationInsights

    ApplicationInsights It is really a very powerful tool for application monitoring . It can record the number and performance of site interface requests for you , Dependency performance , Call chain exceptions and stack trace information .ApplicationInsights It can not only be used for server-side monitoring , It can also be used to record browser information .

It eliminates the tedious logging and encountering by developers Bug Groundless speculation , Technology is the primary productive force .

Here it is , I mainly talk about ApplicationInsights stay Blazor The application method of the .
It's simple , First, in the wwwroot In folder index.html On the page , add to JavaScript SDK

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>ClientSideTemplate</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
</head>

<body>
    <app>Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">*</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script type="text/javascript">
        function insightInit(object) {
            var S = window.location, u = "script", k = "instrumentationKey", D = "ingestionendpoint", C = "disableExceptionTracking", E = "ai.device.", I = "toLowerCase", b = "crossOrigin", w = "POST", e = "appInsightsSDK", t = object.name || "appInsights";
            (object.name || window[e]) && (window[e] = t);
            var n = window[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), 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 || object.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 = window.fetch; if (n && !object.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 = document.createElement(u); n.src = h; var e = object[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 }(); object.ld < 0 ? document.getElementsByTagName("head")[0].appendChild(e) : setTimeout(function () { document.getElementsByTagName(u)[0].parentNode.appendChild(e) }, object.ld || 0) } try { m.cookie = document.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[C] && !0 !== s[C]) { method = "onerror", t(["_" + method]); var c = window[method]; window[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 = !0 } return m }(object.cfg); (window[t] = n).queue && 0 === n.queue.length && n.trackPageView({})
        }
    </script>
</body>

</html>

It is different from the way introduced on the official website , Here I do not directly load and execute this javascript Script , Instead, it is defined as a function insightInit. because , Usually ApplicationInsights The required key It distinguishes the operating environment , That is, different operating environments need to use different key. therefore , We need a service to get it , And when the program is running , Call this top js Method .

Here is an example ：

    public interface IApplicationInsightKeyProvider
    {
        Task<string> GetApplicationInsightKeyAsync();
    }
``
   public class DefaultApplicationInsightKeyProvider : IApplicationInsightKeyProvider
    {
        private readonly IWebAssemblyHostEnvironment _hostEnvironment;

        public DefaultApplicationInsightKeyProvider(IWebAssemblyHostEnvironment hostEnvironment)
        {
            _hostEnvironment = hostEnvironment;
        }

        public Task<string> GetApplicationInsightKeyAsync()
        {
        // Add your own implementation 
            return Task.FromResult(string.Empty);
        }
    }`

And then in App.razor Add the following code in ：

@code
{
    [Inject]
    IJSRuntime JsRuntime { get; set; }

    [Inject]
    IApplicationInsightKeyProvider InsightKeyProvider { get; set; }

    protected override async Task OnInitializedAsync()
    {
        var connStr = await InsightKeyProvider.GetApplicationInsightKeyAsync();
        await JsRuntime.InvokeVoidAsync("insightInit", new
        {
            src = "https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js",
            cfg = new { connectionString = connStr }
        });
    }
}

thus , Completed blazor client Azure ApplicationInsights Integrate . It will record the page access in the browser , Resource loading , And component exceptions . You can go to azure In the portal , Select the indicator you want to view , Bear in mind , Need to switch to browser mode .https://docs.microsoft.com/zh-cn/azure/azure-monitor/app/javascript#explore-browserclient-side-data

原网站

版权声明
本文为[Guo Mahua]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202221433592547.html

边栏推荐

猜你喜欢

随机推荐