Merge pull request #21 from IvanJosipovic/dev

Breaking Change: JS Interop needs to be loaded, see readme …
Updated Readme
Added AddTelemetryInitializer
Added TrackPageViewPerformance
NuGet Update
Added global.json and dependabot config

.dependabot/config.yaml

@@ -0,0 +1,12 @@
+version: 1
+update_configs:
+  - package_manager: "dotnet:nuget"
+    directory: "/"
+    update_schedule: "live"
+    ignored_updates:
+      - match:
+          dependency_name: "Microsoft.AspNetCore.*"
+          version_requirement: "3.x"
+      - match:
+          dependency_name: "System.Net.Http.Json"
+          version_requirement: "3.x"

BlazorApplicationInsights.sln

@@ -11,6 +11,8 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution
 	ProjectSection(SolutionItems) = preProject
 		.github\workflows\build.yml = .github\workflows\build.yml
 		.github\workflows\cicd.yml = .github\workflows\cicd.yml
+		.dependabot\config.yaml = .dependabot\config.yaml
+		global.json = global.json
 		README.md = README.md
 		.github\workflows\release.yml = .github\workflows\release.yml
 	EndProjectSection

README.md

@@ -3,7 +3,7 @@
 [![Nuget (with prereleases)](https://img.shields.io/nuget/dt/BlazorApplicationInsights.svg?style=flat-square)](https://www.nuget.org/packages/BlazorApplicationInsights)
 ![](https://github.com/IvanJosipovic/BlazorApplicationInsights/workflows/Create%20Release/badge.svg)
 
-Blazor Application Insights
+Application Insights for Blazor web applications
 
 # Install
 
@@ -16,42 +16,48 @@ Blazor Application Insights
 - Add component to App.razor
   - ```<ApplicationInsightsComponent />```
 - Add Application Insights JS to head in index.html
-  - [Source](https://docs.microsoft.com/en-us/azure/azure-monitor/app/javascript#snippet-based-setup)
-  - Set 'ld: -1' so that the page will be blocked until the JS is loaded
+  - [Source](https://github.com/microsoft/ApplicationInsights-JS#snippet-setup-ignore-if-using-npm-setup)
+  - Set 'ld: -1' so that the page will be blocked until the JS is loaded and enter your instrumentationKey
     - Example
-      ```
+      ```html
       <script type="text/javascript">
-        !function(T,l,y){// Removed for brevity}
-        src: "https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js",
-        ld: -1, // Set this to -1
-        cfg: {
-            instrumentationKey: "YOUR_INSTRUMENTATION_KEY_GOES_HERE"
-        }});
+      !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>
       ```
+- Add JS Interop to the bottom of body in index.html
+  ```html
+  <script src="_content/BlazorApplicationInsights/JsInterop.js"></script>
+  ```
 
 ## [Example Project](https://github.com/IvanJosipovic/BlazorApplicationInsights/tree/master/src/BlazorApplicationInsights.Sample)
 
 # Features
  - Automatically triggers Track Page View on route changes
  - ILoggerProvider which sends all the logs to App Insights
- - Supported [APIs](https://github.com/microsoft/ApplicationInsights-JS/blob/master/API-reference.md#addTelemetryInitializer)
+ - Supported [APIs](https://github.com/microsoft/ApplicationInsights-JS/blob/master/API-reference.md)
+   - AddTelemetryInitializer
    - ClearAuthenticatedUserContext
    - Flush
+   - SetAuthenticatedUserContext
    - StartTrackPage
    - StopTrackPage
-   - SetAuthenticatedUserContext
-   - TrackMetric
    - TrackDependencyData
    - TrackEvent
    - TrackException
+   - TrackMetric
    - TrackPageView
+   - TrackPageViewPerformance
    - TrackTrace
- - Todo
-   - AddTelemetryInitializer
 
 
 # TrackEvent
+
 ```csharp
 @page "/"
 
@@ -78,7 +84,7 @@ Blazor Application Insights
     [Parameter] public string Action { get; set; }
 
     [CascadingParameter] public Task<AuthenticationState> AuthenticationState { get; set; }
-    
+
     [Inject] private IApplicationInsights AppInsights { get; set; }
 
     public async Task OnLogInSucceeded()
@@ -87,11 +93,45 @@ Blazor Application Insights
 
         await AppInsights.SetAuthenticatedUserContext(user.FindFirst("preferred_username")?.Value);
     }
-    
+
     public async Task OnLogOutSucceeded()
     {
         await AppInsights.ClearAuthenticatedUserContext();
     }
 }
+```
+
+# Set Role and Instance
+- Edit Program.cs
+```csharp
+    public class Program
+    {
+        public static async Task Main(string[] args)
+        {
+            var builder = WebAssemblyHostBuilder.CreateDefault(args);
+            builder.RootComponents.Add<App>("app");
+
+            builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+
+            builder.Services.AddBlazorApplicationInsights();
+
+            var build = builder.Build();
+
+            var applicationInsights = build.Services.GetRequiredService<IApplicationInsights>();
+
+            var telemetryItem = new TelemetryItem()
+            {
+                Tags = new Dictionary<string, object>()
+                {
+                    { "ai.cloud.role", "SPA" },
+                    { "ai.cloud.roleInstance", "Blazor Wasm" },
+                }
+            };
+
+            await applicationInsights.AddTelemetryInitializer(telemetryItem);
+
+            await build.RunAsync();
+        }
+    }
 
 ```

global.json

@@ -0,0 +1,6 @@
+{
+  "sdk": {
+    "version": "3.1.404",
+    "rollForward": "latestFeature"
+  }
+}

src/BlazorApplicationInsights.Sample/Pages/Index.razor

@@ -21,6 +21,8 @@
         {
             { "customProperty", "customValue" }
         });
+
+        await AppInsights.Flush();
     }
 
     private void TrackException()

src/BlazorApplicationInsights.Sample/Program.cs

@@ -1,4 +1,5 @@
 using System;
+using System.Collections.Generic;
 using System.Net.Http;
 using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
@@ -17,7 +18,22 @@ public static async Task Main(string[] args)
 
             builder.Services.AddBlazorApplicationInsights();
 
-            await builder.Build().RunAsync();
+            var build = builder.Build();
+
+            var applicationInsights = build.Services.GetRequiredService<IApplicationInsights>();
+
+            var telemetryItem = new TelemetryItem()
+            {
+                Tags = new Dictionary<string, object>()
+                {
+                    { "ai.cloud.role", "SPA" },
+                    { "ai.cloud.roleInstance", "Blazor Wasm" },
+                }
+            };
+
+            await applicationInsights.AddTelemetryInitializer(telemetryItem);
+
+            await build.RunAsync();
         }
     }
 }

src/BlazorApplicationInsights.Sample/wwwroot/index.html

@@ -7,15 +7,12 @@
     <title>BlazorApplicationInsights.Sample</title>
     <base href="/" />
     <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), 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, 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) } 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[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 = !0 } return 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: -1, // 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
+        !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: "219f9af4-0842-42c8-a5b1-578f09d2ee27"
-                /* ...Other Configuration Options... */
             }
         });
     </script>
@@ -32,6 +29,7 @@
         <a class="dismiss">🗙</a>
     </div>
     <script src="_framework/blazor.webassembly.js"></script>
+    <script src="_content/BlazorApplicationInsights/JsInterop.js"></script>
 </body>
 
 </html>

src/BlazorApplicationInsights/ApplicationInsights.cs

@@ -1,4 +1,5 @@
 using Microsoft.JSInterop;
+using System;
 using System.Collections.Generic;
 using System.Threading.Tasks;
 
@@ -67,5 +68,15 @@ public async Task SetAuthenticatedUserContext(string authenticatedUserId, string
         {
             await JSRuntime.InvokeVoidAsync("appInsights.setAuthenticatedUserContext", new object[] { authenticatedUserId, accountId, storeInCookie });
         }
+
+        public async Task AddTelemetryInitializer(ITelemetryItem telemetryItem)
+        {
+            await JSRuntime.InvokeVoidAsync("blazorApplicationInsights.addTelemetryInitializer", new object[] { telemetryItem });
+        }
+
+        public async Task TrackPageViewPerformance(IPageViewPerformanceTelemetry pageViewPerformance, Dictionary<string, object> customProperties = null)
+        {
+            await JSRuntime.InvokeVoidAsync("appInsights.trackPageViewPerformance", new object[] { pageViewPerformance, customProperties });
+        }
     }
 }

src/BlazorApplicationInsights/BlazorApplicationInsights.csproj

@@ -6,7 +6,7 @@
     <IsPackable>true</IsPackable>
     <Title>BlazorApplicationInsights</Title>
     <PackageId>BlazorApplicationInsights</PackageId>
-    <Description>Blazor Application Insights</Description>
+    <Description>Application Insights for Blazor web applications</Description>
     <Authors>Ivan Josipovic</Authors>
     <PackageProjectUrl>https://blazorapplicationinsights.netlify.app</PackageProjectUrl>
     <PackageTags>Blazor;Application Insights</PackageTags>
@@ -19,9 +19,9 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components" Version="3.1.8" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="3.1.8" />
-    <PackageReference Include="Microsoft.CodeAnalysis.FxCopAnalyzers" Version="3.3.0">
+    <PackageReference Include="Microsoft.AspNetCore.Components" Version="3.1.10" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="3.1.10" />
+    <PackageReference Include="Microsoft.CodeAnalysis.FxCopAnalyzers" Version="3.3.1">
       <PrivateAssets>all</PrivateAssets>
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>

src/BlazorApplicationInsights/IApplicationInsights.cs

@@ -1,4 +1,5 @@
-using System.Collections.Generic;
+using System;
+using System.Collections.Generic;
 using System.Threading.Tasks;
 
 namespace BlazorApplicationInsights
@@ -118,5 +119,22 @@ public interface IApplicationInsights
         /// <param name="storeInCookie"></param>
         /// <returns></returns>
         Task SetAuthenticatedUserContext(string authenticatedUserId, string? accountId = null, bool storeInCookie = false);
+
+        /// <summary>
+        /// Adds a telemetry initializer to the collection. Telemetry initializers will be called one by one,
+        /// in the order they were added, before the telemetry item is pushed for sending.
+        /// If one of the telemetry initializers returns false or throws an error then the telemetry item will not be sent.
+        /// </summary>
+        /// <param name="telemetryItem"></param>
+        /// <returns></returns>
+        Task AddTelemetryInitializer(ITelemetryItem telemetryItem);
+
+        /// <summary>
+        /// Send browser performance metrics.
+        /// </summary>
+        /// <param name="pageViewPerformance"></param>
+        /// <param name="customProperties"></param>
+        /// <returns></returns>
+        Task TrackPageViewPerformance(IPageViewPerformanceTelemetry pageViewPerformance, Dictionary<string, object> customProperties = null);
     }
 }