Application Insights using Azure and VueJs — Error handling and Event Logging in Front End to avoid Console.log in Production

  • Handle Errors gracefully in Front End and log them into a third party system (and not our own Back End / Database) which is available even when the Back End is down
  • Log important Front End/User/custom events based on technical and business requirements to know the user and application behavior and fix the UI problems proactively
  • Console.log is OK for Development but not for Production. So it has to be configurable per environment.
  • Collect other analytics like browsers, geography, user flow etc to take important technical and functional decisions by business and stakeholders
  • Minimal setup which works in VueJs based Single Page app easily
  • Azure App Insights
  • AppDynamics
  • Splunk
  • UpTrends
  • Winston can do various Levels of logging like errors/info/debug
  • Winston highly configurable and hence can do environment specific logging with help of Transports
  • It was difficult to integrate Winston with and SPA like that of VueJs without writing extra logic for environment specific configs/transport and integrating with Router
  • I could not find any Out of the Box solution to create a simple transport using Azure App Insight and Winston
  • Reach out to your DevOps contact person for Enabling Azure App Insights for your application and also get the App Key (also called Instrumentation Key).
  • Use (or better Inject at runtime thru env configs) environment specific APP KEY in your Front End code. Similar to below:
if (process.env.NODE_ENV === ‘development’) {
APP_INSIGHTS_KEY = ‘’; // no logging to remote in dev mode. if you prefer to see an Exception in Console, leave this as null or undefined.
}
//Prodelse if (process.env.NODE_ENV === ‘production’){
APP_INSIGHTS_KEY = ‘prod_env_app_insight_key’; // get from your app’s Azure portal
}
  • Setup Vue Application Insights library while loading Vue app like following in Main.js:
import VueAppInsights from “vue-application-insights”;
import {APP_INSIGHTS_KEY} from “@/constant/constant”;
Vue.use(VueAppInsights, { id: APP_INSIGHTS_KEY, router});
  • Write a common service that would log Events/Exceptions to remote using Azure App Insights api to suit your need. Similar to following:
logErrorsAndExceptions(location, error) {if (this.$appInsights && this.$appInsights.trackException && APP_INSIGHTS_KEY) { this.$appInsights.trackException({  exception: new Error(location),  properties: error });} else {console.error (location, ‘:’, error)}},logInfoAndDebug(location, message) { if (this.$appInsights && this.$appInsights.trackEvent &&  APP_INSIGHTS_KEY) { this.$appInsights.trackEvent({ name: location, properties: message });} else { console.log(location, ‘:’, message)}}
  • Now, you can start sending custom events/message on important business/functional milestones. e.g. when user has requested for a specific file or reported an incident
  • Or you can send Errors/Exceptions details e.g. when API gives invalid output or fails altogether after some timeout period.
try {
// call api, get response, try to get nested object, get null exception or timeout etc
} catch (error) {
this.
logErrorsAndExceptions(‘approvedList.getReviewDataSets.error’, error);
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ajay

Ajay

Javascript, Angular, Vue. Web App is all what I Do. And sometimes getting bored, i write articles and poems too!