Blazor WASM, Application Insights

Application Insights: How to set the Cloud Role Name for Blazor Application

7 min read

  • October 24,2024
  • Rajesh Goel

 

Problem Overview

I am currently working on a Blazor WebAssembly (WASM) application and have integrated Application Insights for the client-side monitoring using the BlazorApplicationInsight library. Initially, everything worked as expected, with all configurations properly set up, and Application Insights was capturing client-side telemetry without any issues.

However, after switching between Git branches during development, the application suddenly started encountering a runtime error, specifically: 
Microsoft.JSInterop.JSException: Could not find appInsights.updateCfg.

This issue surfaced unexpectedly and affected some, but not all, members of my development team. While a few developers were able to continue working without encountering any errors, others experienced the same problem after checking in or pulling my changes from the repository. This inconsistency added complexity to identifying the root cause, as it wasn’t immediately clear why only a subset of the team encountered the issue while others did not.

Investigation and Cause

To diagnose the problem, I began by retracing the recent changes and debugging the areas of the code where the Application Insights integration was implemented. After spending a couple of hours investigating the issue, it became evident that the error was related to the JavaScript client script used for Application Insights, which I had added to the Index.html file.

Upon further inspection, I realized that the script was not being rendered as expected during runtime, even though it was properly included in the HTML file. The cause of this issue appeared to be related to the caching mechanism of the browser. Specifically, an older version of the Index.html file was cached, which did not include the updated JavaScript necessary for initializing Application Insights correctly. As a result, the runtime was unable to locate the appInsights.updateCfg method, leading to the observed JavaScript exception.

This caching issue explains why not all team members experienced the same error. Those who did not encounter the problem were likely working with a version of the application that had the updated HTML content loaded properly, while those facing the issue were working with an outdated, cached version of the page.

Solution

Once I identified that the issue was caused by a cached version of the Index.html file, the resolution became straightforward. I manually cleared my browser’s cache to ensure that the most recent version of the Index.html file, containing the correct JavaScript client for Application Insights, would be loaded. After doing this, the application worked correctly, and the error was no longer encountered.

Going forward, I will ensure that changes affecting critical client-side scripts are communicated clearly to the team, and we will establish a practice of clearing browser caches or implementing cache-busting mechanisms, particularly after significant front-end changes. This will help prevent similar issues from occurring in the future, especially when switching between Git branches or working on updates that involve client-side assets.

At Memetic Solutions, we use these notification permission concepts to keep applications user-friendly. By ensuring users control their settings, we create apps that are both intuitive and engaging, improving user satisfaction without disrupting their experience.