It is quite common that an application or its integration doesn’t behave uniformly at all circumstances for all users, browsers, devices, regions etc. Most of the Performance issues and End-user exceptions are detected only after it is reported by an end user while it might be too late as it would have affected the user engagement and retention already.
DevOps needs automated feedback from end-users to facilitate a stunning experience for them
Setting up real-time instrumentation is a key solution that allows us to gain end-user visibility and traceability to obtain performance and experience feedback of our site in real-time from all users, browsers, devices and all possible segments. Depending upon the current platform and level of visibility/feedback needed, there are several real-time instrumentation solutions available ranging from Pingdom RUM, Site24x7 RUM etc. to New Relic, Appdynamics etc.
AppInsights JS SDK:
AppInsights JS SDK allows capturing client-side experience in Azure AppInsights. This Open-source SDK helps recording several critical insights,
- Real-user page load times
- Real-user load times of AJAX calls, js/css, media, external dependencies etc.
- External dependency load failures and status code
- Client-side Exceptions, Stack Trace
- Request/response headers for AJAX requests, js/css, external dependencies etc.
- User time spent on pages
- User Device, OS etc.
- User IP, Location etc. (if enabled)
- Correlation between client-side and server-side requests for an operation
- Browser Link Requests tracking
AppInsights JS SDK also allows recording of custom attributes as well (Eg: User Profile Attributes, Segments etc. but make sure to review your Compliance Strategy – GDPR, CCPA etc.) in AppInsights, which is a key differentiator. Telemetry capturing can be disabled for certain users based on custom conditions as well.
Setup & Configuration:
AppInsights JS SDK supports both Snippet-based Integration and NPM-based Integration.
If the implementation leverages NPM (Eg: JSS), NPM-based Integration can be preferred. The below command shall be used for installation of the module,
npm i --save @microsoft/applicationinsights-web
The below command shall be used if looking for light version,
npm i --save @microsoft/applicationinsights-web-basic
The javascript code that needs to be integrated within layout file to allow it to render on all pages shall be found here.
Snippet-based Integration needs to be opted when the implementation doesn’t use NPM. The javascript snippet that needs to be added to the layout can be found here. It is recommended to keep it as high as possible in the head tag to allow it to capture the errors occurring in all the dependencies. HTML Snippet component could be used for Sitecore SXA based implementations.
Instrumentation key for AppInsights can be found from the respective AppInsights resource,
Depending upon the no. of Environments & DevOps process for the implementation, Instrumentation key could be stored in config, environment variables, Azure Application Settings, CI/CD Pipeline Variables etc. if/as needed.
Once the setup is complete, AppInsights JS SDK starts sending the data from the user browser to Azure AppInsights and can be verified from the Network tab,
Data will be recorded in Azure AppInsights within 2-3 mins usually.
Page Views table in Azure AppInsights which will usually be empty, will now see real-time records along with any custom data posted,
Dependencies table will start recording the AJAX calls, dependencies etc.
Exceptions table will now start recording client-side exceptions and failures as well,
Requests, Dependencies and Exceptions tables will also continue to capture server-side application monitoring data as usual.
With AppInsights JS SDK’s unique operation id and custom ids (Eg: Session Id etc.), the client-side page views, dependencies and exceptions can easily be correlated with server-side dependencies/requests, facilitating early identification, quicker tracing & faster resolution of critical production end-user issues and thereby providing a stunning experience for all customers.
Happy Monitoring!