Search

Logging in AngularJS Applications Made Simple

What comes to mind, when you think of a JavaScript framework that can be used to build applications across platforms, achieve maximum speed with accelerated performance and ensure quick builds? Just AngularJS, isn’t it?  Powered by Google, Angular was developed as a framework to give you a toolset for powering your single page application development, work well with other web-based libraries and be fully extensible. All its features can be modified and even replaced to give you complete freedom in developing your own unique workflow.  As a pure JavaScript framework, Angular can be added to an HTML page with a normal <script> tag with src attribute pointing to the source framework library. AngularJS extends HTML attributes using Directives.  It binds data to HTML using Expressions.  AngularJS can be downloaded from.  If you’re new to AngularJS, it is better to get introductory information from. This site provides the basic information required to start working with AngularJS.  It has various features including MVC Architecture, Directives, Expressions, Controllers, Filters, HTML DOM, Modules, Views, AJAX, Scopes, Services, Dependency Injection, Logging and Internationalization. We will deal with Logging in the following section. IntroductionAngularJS includes a logging service called $log, which logs the messages to the client browser's console. The $log service includes different methods to handle the log for error, information, warning or debug information. It can be useful in debugging and auditing. This article will help you learn about each type of log. The topics we will go through in this article are: Introduction to logging Testing AngularJS Logging Application What Is Application Logging? Angular Logging: The Improved Approach Logging with AngularJS - extending the built-in logger $log in AngularJS Turn off logging in AngularJS  Introduction to logging AngularJS has an impressive and robust logging mechanism in-built through the $logService and $log injection.  The $log service includes different methods to log the error, information, warning or debug information. It can be useful in debugging and auditing.  The main purpose of all AngularJS logging services is to simplify debugging and troubleshooting. To reveal the location of the calls to $log in the JavaScript console; you can "blackbox" the AngularJS source in your favorite browser. To blackbox in the browser, go to the page, right click it, “Inspect” it in developer mode, and then read the console. Note: All browsers do not support blackboxing. AngularJS logs everything to the console, which is neither a robust or scalable solution. Sometimes, you need to be able to intercept the exceptions and do something extra. This could be as simple as adding extra information or sending all logs to the server/database. $log in AngularJS AngularJS programmers frequently use console.log to record errors or other informational messages in their applications. Although this is fine while debugging your application, yet it is not a best practice for production environment. As AngularJS is all about services, it is a better idea to create a logging service that you can call from other services and components due to some event which needs to be logged. In this logging service, you can still call console.log, but you can also modify the service later to record messages to store them in local storage or a database table via the Web API. Some methods that we will use for logging in AngularJS $log are: log();  to write a log message info(); to write an information message warn(); to write a warning message error(); to write an error message debug(); to write a debug message  The above methods are used for different categorizations of $log. Testing AngularJS Logging Application An Example of logging in AngularJS is: Considering you have already downloaded the latest AngularJS file from (here we are using the minified version of AngularJS as angular.min.js). We can even use the AngularJS CDN for the same provided by Google: https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js <!DOCTYPE html> <html> <head> <title>Logging Example in AngularJS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script> <script> var app = angular.module('myApp', []) app.controller("myController", function ($log) {             $log.log('This is log.');             $log.error('This is error.');             $log.info('This is info.');             $log.warn('This is warning.');             $log.debug('This is debugging.');         }); </script> </head> <body ng-app="myApp"> <form id="form1"> <div ng-controller="myController"> <p> <h1> Go to Inspect, through browser blackbox <br/> to see the Console for the different loggers.   </form> </body> </html>Now run the logging example as an HTML file and check the output, which will look like this: Go to Inspect, through browser blackbox to see the Console for the different loggers. In the Inspect Window, go to Console, and see the result as: This is log. This is error. (In red font displayed with error icon) This is info. This is warning. (In brown font with warning icon) Here is a more complex example, which logs according to events generated as follows: <!DOCTYPE html>  <html>  <head>  <title>Logging Example in AngularJS</title>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>  <script>  var app = angular.module('myApp', [])  app.controller("myController", ['$scope', '$log', function($scope, $log) {  $scope.$log = $log;  $scope.message = 'Hello World!';  }]);  </script>  </head>  <body ng-app="myApp">  <form id="form1">  <div ng-controller="myController">  <p>Reload this page with open console, enter text and hit the log button...</p>  <label>Message:   <input type="text" ng-model="message" />  </label>  <br/><br/><br/>  <button ng-click="$log.log(message + ' log') ">log</button>  <button ng-click="$log.warn(message + ' warn') ">warn</button>  <button ng-click="$log.info(message + ' info') ">info</button>  <button ng-click="$log.error(message + ' error') ">error</button>  </div>  </form>  </body>  </html> Now run the above logging example as an HTML file and check the output, which will look like this: Reload this page with open console, enter text and hit the log button... Message:Clicking the buttons accordingly will give the console information as: Hello World! log Hello World! warn (in brown font with warning icon) Hello World! info Hello World! error (in red font with error icon) The output snapshot: What Is Application Logging? For a long time, logs have been an essential part of troubleshooting application and infrastructure performance. They help in providing visibility of how our applications are running on each of the various infrastructure components. Log data contains information such as out of memory exception or hard disk errors or even simple divide by zero error. Within software development, application logging plays a vital role; as much as we’d like our software to be perfect, issues will always arise within a production environment. When they do, a good logging strategy becomes very crucial. An application log usually contains errors, warning, events and non-critical information when compared to an error log that usually contains only errors and critical warnings. The application log should contain all the information necessary for audit. Put in simple words, an application log is a file that contains information about events that have occurred or errors and warnings that may occur due to some malfunctioning within a software application. These events are logged out by the application and written into a file, console or Web API. Once logged, the events can be handled accordingly as they include errors and warnings as well as informational events. The types of information and format of messages found in an application log file will vary between applications. These variables aren’t determined by external guidelines or by the operating system we are working on, rather they are determined by  the developers of the software application who control what goes into the log file. They’re the ones making decisions about what events and information would be useful to log and how logging should be done. Many events will be specific to the source application and many others would require a timestamp. Thus, it is common for logged events to contain information such as timestamp, source, etc. to make them more useful. Here is some common information that you will generally get in application log messages: Context information: Context information is the background information that provides an insight into the state of the application at the time of the message. Timestamp: A timestamp is a specific piece of contextual information for tracking and correlating issues that relate to the time aspect. Log levels: Log labels help you calculate the level of importance for the information entries in your log file. Some of the frequently used levels include INFO, WARN, ERROR, MESSAGE, and LOG. Once you are familiar with logged messages you will find it easier to use them when you’re trying to analyze bugs and unexpected events. When developers use the word “logging,” they usually refer to application logging. However, there are other types of logging as well. To further clarify what application logging is, let us briefly look at other types of logs to understand the differences. System Logs: System logs are written by the operating system. They contain information about System Processes and Drivers. On a Windows machine, System log is stored in the event log while in a Linux machine this is the syslog service. Server Logs: Server logs provide information on the state of a web application, web API, web Server or application server. The web server or application server is responsible for creating and maintaining server log files. GC Logs: Garbage collector logs assist with memory management of Java Programming Language by tracking objects within a JVM (Java Virtual Machine) and removing those that are unused. They are deactivated by default, however with simple switches, they can be switched on. Thus, application logging involves recording information about your application’s runtime behavior to a more persistent medium like a file or a database or even simple console. By reading the log entries wherever they are stored, you go back in time to analyze the application’s behavior, understanding the sequence of events that happened to it. You could even repeat the actions taken by a user, in order to recreate and fix whatever problem you are struggling with.  We need to log so that we can retroactively debug and analyze our application as if we are running it in the current moment. AngularJS Logging: The Improved Approach It is very easy to log all of the client-side messages to the server using AngularJS logging services. The biggest benefit is that it makes it easier to find application errors once in production phase and accelerate bug finding at deployment stage. Client-side logging can also help you identify the frequency of errors so that hotfixes can be prioritized in the order of importance as they can be labeled, helping you further to improve your AngularJS application for your clients. In AngularJS we have the different categories of logging as : $log.log(), $log.warn(), $log.info(), $log.error() and $log.debug(). These help the programmer and debugger to understand and classify different information as simple log, warning, information, error or debug information. Logging with AngularJS - extending the built-in logger Showing the correct line numbers You can tell AngularJS to show the correct line numbers by binding the $log.* functions to the console.* functions. For Example:     $log.debug = console.debug.bind(console); You will have to do that for each one of the 5 $log methods separately. For Example: <!DOCTYPE html>  <html>  <head>  <title>Logging Example in AngularJS</title>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js">  </script>  <script>  var app = angular.module('myApp', [])  app.controller("myController", ['$scope', '$log', function($scope, $log) {  $log.debug = console.debug.bind(console);  $log.info = console.info.bind(console);  $log.log = console.log.bind(console);  $log.warn = console.warn.bind(console);  $log.error = console.error.bind(console);  console.debug("Calling console.debug");  console.info("Calling console.info");  console.log("Calling console.log");  console.warn("Calling console.warn");  console.error("Calling console.error");  $scope.$log = $log;  $scope.message = 'Hello World!';  }]);  </script>  </head>  <body ng-app="myApp">  <form id="form1">  <div ng-controller="myController">  <p>Reload this page with open console, enter text and hit the log button...</p>    <label>Message:  <input type="text" ng-model="message" />  </label>  <br/>  <br/>  <br/>  <button ng-click="$log.log(message + ' log') ">log</button>  <button ng-click="$log.warn(message + ' warn') ">warn</button>  <button ng-click="$log.info(message + ' info') ">info</button>  <button ng-click="$log.error(message + ' error') ">error</button>  <button ng-click="$log.debug(message + ' debug') ">debug</button>  </div>  </form>  </body>  </html> Output is: All the console messages are shown in line numbers. Showing the  $exceptionHandler as Factory  As per https://cmatskas.com/logging-with-angularjs-extending-the-built-in-logger/  site:  AngularJs has an impressive and robust logging mechanism through the $logService and $log injection. However, Angular logs everything to the console, which is neither a robust or scalable solution. Sometimes, you need to be able to intercept the exceptions and do something extra. This could be as simple as adding extra information or sending all logs to the server/database. The example below is simple and allows you to hook into the $exceptionHandler and pass a logger in the form of an AngularJS factory. The factory contains only one method => log(). This method first calls the base $log.error() method and after that point we have all the data we need to do as we want. The only limitation is that this custom logger deals only with errors and exceptions. Example: var mod = angular.module("LogDemo2", [] ); mod.provider('$exceptionHandler', {      $get: function( errorLogService ) {          return( errorLogService );      }  });  mod.factory('errorLogService', ['$log', '$window', function($log, $window) {        function log( exception ) {            $log.error.apply( $log, arguments );            try {              var args = [];              if (typeof arguments === 'object') {                  for(var i = 0; i < arguments.length; i++ ) {                    arg = arguments[i];                    var exceptionItem = {};                    exceptionItem.message = arg.message;                    exceptionItem.stack = arg.stack;                    args.push(JSON.stringify(exception));                  }                }                // Phone home and log the error to the server.                /*$.ajax({                    type: "POST",                    url: "./javascript-errors",                    contentType: "application/json",                    data: angular.toJson({                        errorUrl: $window.location.href,                        errorMessage: errorMessage,                        stackTrace: stackTrace,                        cause: ( cause || "" )                    })                });*/                console.log('from inside the log method ' + args.join('\n') );            } catch ( loggingError ) {                // For Developers - log the log-failure.                $log.warn( "Error logging failed" );                $log.log( loggingError );            }        }        return( log );    }  ]);   mod.controller('LogController2', function($scope) {    $scope.throwError = function(){      throw {message: 'error message'};    };     $scope.throwException = function(){      var a = b;    };      $scope.throwNestedExceptions = function() {      try {        var a = b;      } catch (e) {        try {          var c = d;        } catch (ex) {          $log.error(e, ex);        }      }    };  }); Citation. Turn off logging in AngularJS $log.debug can be turned on or off depending on the requirement from an application. The only advantage of $log.debug over console.debug is the ability to turn off the debugging printouts. You can do that through the $logProvider provider in the config directive of AngularJS by adding the following statement: .config(['$logProvider', function($logProvider) {      $logProvider.debugEnabled(false); // turns off the calls to $log.debug only  }]); Or simply, app.config(function($logProvider){    $logProvider.debugEnabled(false);  }); This turns off the $log.debug calls. However, $log.info(), $log.error(), $log.warn(), $log.log() is not turned off. Thus, your code will still print out any of the info, log, warn, and error messages.  To see the Debug messages, in Chrome, we need to view the sidebar of the Console in Inspect window. In others, enable it from browser console. Go to the console of the browser and set the level to verbose.  Complete Example with debug: <!DOCTYPE html>  <html>  <head>  <title>Logging Example in AngularJS</title>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js">  </script>  <script>  var app = angular.module('myApp', [])  app.config(function($logProvider){  $logProvider.debugEnabled(false);  });  app.controller("myController", ['$scope', '$log', function($scope, $log) {  $scope.$log = $log;  $scope.message = 'Hello World!';  }]);  </script>  </head>  <body ng-app="myApp">  <form id="form1">  <div ng-controller="myController">  <p>Reload this page with open console, enter text and hit the log button...</p>  <label>Message:  <input type="text" ng-model="message" />  </label>   <br/> <br/> <br/>  <button ng-click="$log.log(message + ' log') ">log</button>  <button ng-click="$log.warn(message + ' warn') ">warn</button>  <button ng-click="$log.info(message + ' info') ">info</button>  <button ng-click="$log.error(message + ' error') ">error</button>  <button ng-click="$log.debug(message + ' debug') ">debug</button>  </div>  </form>  </body>  </html>  Case 1:  With :   app.config(function($logProvider){  $logProvider.debugEnabled(false);  }); Output: We can see that if we open the “See Console Sidebar”, we get 1 error, 1 warning and 2 info(1 for log function, other one for info function). Here Debug() is missing as it is turned off by our application. If we hide the Console Sidebar, we can still see all the messages displayed in the Console as:Case 2: With :  app.config(function($logProvider){  $logProvider.debugEnabled(true);  }); Or we can skip the entire code for app.config(){….}); as by default debug is turned on. Output: We can see that if we open the “See Console Sidebar”, we get 1 debug, 1 error, 1 warning and 2 info(1 for log function, other one for info function). Here Debug() is seen as it is turned on by our application or by default. If we hide the Console Sidebar, we can see all the messages displayed in the Console except the debug message since it can be seen only in the verbose of the console, as:Conclusion: logging in AngularJS In this post, we started with logging in AngularJS. AngularJS comes with a service called $log for logging. $log is a simple wrapper around the console.log facilities. We understood the difference between $log.info, $log.warn, $log.error, $log.log and $log.debug. We learned how to extend $log through AngularJS application and even work with extended features of the same. We also saw how to switch off debugging in AngularJS logging. Note: Angular is a version upgrade to AngularJS. Therefore, Angular refers to AngularJS in this article.

Logging in AngularJS Applications Made Simple

11K
  • by Monica Gupta
  • 18th Sep, 2020
  • Last updated on 17th Mar, 2021
  • 13 mins read
Logging in AngularJS Applications Made Simple

What comes to mind, when you think of a JavaScript framework that can be used to build applications across platforms, achieve maximum speed with accelerated performance and ensure quick builds? Just AngularJS, isn’t it?  

Powered by Google, Angular was developed as a framework to give you a toolset for powering your single page application development, work well with other web-based libraries and be fully extensible. All its features can be modified and even replaced to give you complete freedom in developing your own unique workflow.  

As a pure JavaScript framework, Angular can be added to an HTML page with a normal <script> tag with src attribute pointing to the source framework library. 

AngularJS extends HTML attributes using Directives.  It binds data to HTML using Expressions.  

AngularJS can be downloaded from 

If you’re new to AngularJS, it is better to get introductory information from. This site provides the basic information required to start working with AngularJS.  

It has various features including MVC Architecture, Directives, Expressions, Controllers, Filters, HTML DOM, Modules, Views, AJAX, Scopes, Services, Dependency Injection, Logging and Internationalization. We will deal with Logging in the following section. 

Introduction

AngularJS includes logging service called $log, which logs the messages to the client browser's console. 

The $log service includes different methods to handle the log for error, information, warning or debug information. It can be useful in debugging and auditing. 

This article will help you learn about each type of log. 

The topics we will go through in this article are: 

  • Introduction to logging 
  • Testing AngularJS Logging Application 
  • What Is Application Logging? 
  • Angular Logging: The Improved Approach 
  • Logging with AngularJS - extending the built-in logger 
  • $log in AngularJS 
  • Turn off logging in AngularJS  

Introduction to logging 

AngularJS has an impressive and robust logging mechanism in-built through the $logService and $log injection.  The $log service includes different methods to log the error, information, warning or debug information. It can be useful in debugging and auditing.  The main purpose of all AngularJS logging services is to simplify debugging and troubleshooting. 

To reveal the location of the calls to $log in the JavaScript console; you can "blackbox" the AngularJS source in your favorite browser. To blackbox in the browser, go to the page, right click it, “Inspect” it in developer mode, and then read the console. 

Note: All browsers do not support blackboxing. 

AngularJS logs everything to the console, which is neither a robust or scalable solution. Sometimes, you need to be able to intercept the exceptions and do something extra. This could be as simple as adding extra information or sending all logs to the server/database. 

$log in AngularJS 

AngularJS programmers frequently use console.log to record errors or other informational messages in their applications. Although this is fine while debugging your application, yet it is not a best practice for production environment. As AngularJS is all about services, it is a better idea to create a logging service that you can call from other services and components due to some event which needs to be logged. In this logging service, you can still call console.log, but you can also modify the service later to record messages to store them in local storage or a database table via the Web API. 

Some methods that we will use for logging in AngularJS $log are: 

  • log();  to write a log message 
  • info(); to write an information message 
  • warn(); to write a warning message 
  • error(); to write an error message 
  • debug(); to write a debug message  

The above methods are used for different categorizations of $log. 

Testing AngularJS Logging Application 

An Example of logging in AngularJS is: 

Considering you have already downloaded the latest AngularJS file from (here we are using the minified version of AngularJS as angular.min.js). We can even use the AngularJS CDN for the same provided by Google: https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js 

<!DOCTYPE html> 
<html> 
<head> 
<title>Logging Example in AngularJS</title> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script> 
<script> 
var app = angular.module('myApp', []) 
app.controller("myController", function ($log) { 
            $log.log('This is log.'); 
            $log.error('This is error.'); 
            $log.info('This is info.'); 
            $log.warn('This is warning.'); 
            $log.debug('This is debugging.'); 
        }); 
</script> 
</head> 
<body ng-app="myApp"> 
<form id="form1"> 
<div ng-controller="myController"> 
<p> <h1> Go to Inspect, through browser blackbox <br/> 
to see the Console for the different loggers.   
</form> 
</body> 
</html>

Now run the logging example as an HTML file and check the output, which will look like this: 

Go to Inspect, through browser blackbox to see the Console for the different loggers. 

In the Inspect Window, go to Console, and see the result as: 

  • This is log. 
  • This is error. (In red font displayed with error icon) 
  • This is info. 
  • This is warning. (In brown font with warning icon) 

Logging in AngularJS Applications Made Simple

Here is a more complex example, which logs according to events generated as follows: 

<!DOCTYPE html> 
<html> 
<head> 
<title>Logging Example in AngularJS</title> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script> 
<script> 
var app = angular.module('myApp', []) 
app.controller("myController", ['$scope', '$log', function($scope, $log) { 
$scope.$log = $log; 
$scope.message = 'Hello World!'; 
}]); 
</script> 
</head> 
<body ng-app="myApp"> 
<form id="form1"> 
<div ng-controller="myController"> 
<p>Reload this page with open console, enter text and hit the log button...</p> 
<label>Message: 
 <input type="text" ng-model="message" /> 
</label> 
<br/><br/><br/> 
<button ng-click="$log.log(message + ' log') ">log</button> 
<button ng-click="$log.warn(message + ' warn') ">warn</button> 
<button ng-click="$log.info(message + ' info') ">info</button> 
<button ng-click="$log.error(message + ' error') ">error</button> 
</div> 
</form> 
</body> 
</html> 

Now run the above logging example as an HTML file and check the output, which will look like this:

Reload this page with open console, enter text and hit the log button...

Message:
Logging in AngularJS Applications Made Simple

Clicking the buttons accordingly will give the console information as: 

Hello World! log 

Hello World! warn (in brown font with warning icon) 

Hello World! info 

Hello World! error (in red font with error icon) 

The output snapshot: Logging in AngularJS Applications Made Simple

What Is Application Logging? 

For a long time, logs have been an essential part of troubleshooting application and infrastructure performance. They help in providing visibility of how our applications are running on each of the various infrastructure components. Log data contains information such as out of memory exception or hard disk errors or even simple divide by zero error. Within software development, application logging plays a vital role; as much as we’d like our software to be perfect, issues will always arise within a production environment. When they do, a good logging strategy becomes very crucial. 

An application log usually contains errors, warning, events and non-critical information when compared to an error log that usually contains only errors and critical warnings. The application log should contain all the information necessary for audit. 

Put in simple words, an application log is a file that contains information about events that have occurred or errors and warnings that may occur due to some malfunctioning within a software application. These events are logged out by the application and written into a file, console or Web APIOnce logged, the events can be handled accordingly as they include errors and warnings as well as informational events. 

The types of information and format of messages found in an application log file will vary between applicationsThese variables aren’t determined by external guidelines or by the operating system we are working on, rather they are determined by  the developers of the software application who control what goes into the log file. They’re the ones making decisions about what events and information would be useful to log and how logging should be done. Many events will be specific to the source application and many others would require timestamp. Thus, it is common for logged events to contain information such as timestamp, source, etc. to make them more useful. Here is some common information that you will generally get in application log messages: 

  • Context information: Context information is the background information that provides an insight into the state of the application at the time of the message. 
  • Timestamp: A timestamp is a specific piece of contextual information for tracking and correlating issues that relate to the time aspect. 
  • Log levels: Log labels help you calculate the level of importance for the information entries in your log file. Some of the frequently used levels include INFO, WARN, ERROR, MESSAGE, and LOG. 

Once you are familiar with logged messages you will find it easier to use them when you’re trying to analyze bugs and unexpected events. 

When developers use the word “logging,” they usually refer to application logging. However, there are other types of logging as well. To further clarify what application logging is, let us briefly look at other types of logs to understand the differences. 

  • System Logs: System logs are written by the operating system. They contain information about System Processes and Drivers. On a Windows machine, System log is stored in the event log while in Linux machine this is the syslog service. 
  • Server Logs: Server logs provide information on the state of a web application, web API, web Server or application server. The web server or application server is responsible for creating and maintaining server log files. 
  • GC Logs: Garbage collector logs assist with memory management of Java Programming Language by tracking objects within a JVM (Java Virtual Machine) and removing those that are unused. They are deactivated by default, however with simple switches, they can be switched on. 

Thus, application logging involves recording information about your application’s runtime behavior to a more persistent medium like a file or a database or even simple console. 

By reading the log entries wherever they are stored, you go back in time to analyze the application’s behavior, understanding the sequence of events that happened to it. You could even repeat the actions taken by a user, in order to recreate and fix whatever problem you are struggling with.  

We need to log so that we can retroactively debug and analyze our application as if we are running it in the current moment. 

AngularJS Logging: The Improved Approach 

It is very easy to log all of the client-side messages to the server using AngularJS logging services. The biggest benefit is that it makes it easier to find application errors once in production phase and accelerate bug finding at deployment stage. 

Client-side logging can also help you identify the frequency of errors so that hotfixes can be prioritized in the order of importance as they can be labeled, helping you further to improve your AngularJS application for your clients. 

In AngularJS we have the different categories of logging as : $log.log()$log.warn()$log.info()$log.error() and $log.debug(). These help the programmer and debugger to understand and classify different information as simple log, warning, information, error or debug information. 

Logging with AngularJS - extending the built-in logger 

Showing the correct line numbers 

You can tell AngularJS to show the correct line numbers by binding the $log.* functions to the console.* functions. For Example: 

    $log.debug = console.debug.bind(console); 

You will have to do that for each one of the 5 $log methods separately. 

For Example: 

<!DOCTYPE html> 
<html> 
<head> 
<title>Logging Example in AngularJS</title> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"> 
</script> 
<script> 
var app = angular.module('myApp', []) 
app.controller("myController", ['$scope', '$log', function($scope, $log) { 
$log.debug = console.debug.bind(console); 
$log.info = console.info.bind(console); 
$log.log = console.log.bind(console); 
$log.warn = console.warn.bind(console); 
$log.error = console.error.bind(console); 
console.debug("Calling console.debug"); 
console.info("Calling console.info"); 
console.log("Calling console.log"); 
console.warn("Calling console.warn"); 
console.error("Calling console.error"); 
$scope.$log = $log; 
$scope.message = 'Hello World!'; 
}]); 
</script> 
</head> 
<body ng-app="myApp"> 
<form id="form1"> 
<div ng-controller="myController"> 
<p>Reload this page with open console, enter text and hit the log button...</p> 
  <label>Message: 
<input type="text" ng-model="message" /> 
</label> 
<br/> 
<br/> 
<br/> 
<button ng-click="$log.log(message + ' log') ">log</button> 
<button ng-click="$log.warn(message + ' warn') ">warn</button> 
<button ng-click="$log.info(message + ' info') ">info</button> 
<button ng-click="$log.error(message + ' error') ">error</button> 
<button ng-click="$log.debug(message + ' debug') ">debug</button> 
</div> 
</form> 
</body> 
</html> 

Output is: 

All the console messages are shown in line numbers. 

Logging in AngularJS Applications Made Simple

Showing the  $exceptionHandler as Factory  

As per https://cmatskas.com/logging-with-angularjs-extending-the-built-in-logger/  site:  

AngularJs has an impressive and robust logging mechanism through the $logService and $log injection. However, Angular logs everything to the console, which is neither a robust or scalable solution. Sometimes, you need to be able to intercept the exceptions and do something extra. This could be as simple as adding extra information or sending all logs to the server/database. 

The example below is simple and allows you to hook into the $exceptionHandler and pass a logger in the form of an AngularJS factory. The factory contains only one method => log(). This method first calls the base $log.error() method and after that point we have all the data we need to do as we want. The only limitation is that this custom logger deals only with errors and exceptions. 

Example: 

var mod = angular.module("LogDemo2", [] );
mod.provider('$exceptionHandler', { 
    $get: function( errorLogService ) { 
        return( errorLogService ); 
    } 
}); 
mod.factory('errorLogService', ['$log', '$window', function($log, $window) { 
      function log( exception ) { 
          $log.error.apply( $log, arguments ); 
          try { 
            var args = []; 
            if (typeof arguments === 'object') { 
                for(var i = 0; i < arguments.lengthi++ ) { 
                  arg = arguments[i]; 
                  var exceptionItem = {}; 
                  exceptionItem.message = arg.message; 
                  exceptionItem.stack = arg.stack; 
                  args.push(JSON.stringify(exception)); 
                } 
              } 
              // Phone home and log the error to the server. 
              /*$.ajax({ 
                  type: "POST", 
                  url: "./javascript-errors", 
                  contentType: "application/json", 
                  data: angular.toJson({ 
                      errorUrl: $window.location.href, 
                      errorMessageerrorMessage, 
                      stackTracestackTrace, 
                      cause: ( cause || "" ) 
                  }) 
              });*/ 
              console.log('from inside the log method ' + args.join('\n') ); 
          } catch ( loggingError ) { 
              // For Developers - log the log-failure. 
              $log.warn( "Error logging failed" ); 
              $log.log( loggingError ); 
          } 
      } 
      return( log ); 
  } 
]); 
 mod.controller('LogController2', function($scope) { 
  $scope.throwError = function(){ 
    throw {message: 'error message'}; 
  }; 
   $scope.throwException = function(){ 
    var a = b; 
  }; 
    $scope.throwNestedExceptions = function() { 
    try { 
      var a = b; 
    } catch (e) { 
      try { 
        var c = d; 
      } catch (ex) { 
        $log.error(e, ex); 
      } 
    } 
  }; 
}); 

Citation. 

Turn off logging in AngularJS 

$log.debug can be turned on or off depending on the requirement from an application. 

The only advantage of $log.debug over console.debug is the ability to turn off the debugging printouts. You can do that through the $logProvider provider in the config directive of AngularJS by adding the following statement: 

.config(['$logProvider', function($logProvider) { 
    $logProvider.debugEnabled(false); // turns off the calls to $log.debug only 
}]); 

Or simply, 

app.config(function($logProvider){ 
  $logProvider.debugEnabled(false); 
}); 

This turns off the $log.debug calls. However, $log.info(), $log.error(), $log.warn(), $log.log() is not turned off. Thus, your code will still print out any of the info, log, warn, and error messages.  

To see the Debug messages, in Chrome, we need to view the sidebar of the Console in Inspect window. 

In others, enable it from browser consoleGo to the console of the browser and set the level to verbose.  

Complete Example with debug: 

<!DOCTYPE html> 
<html> 
<head> 
<title>Logging Example in AngularJS</title> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"> 
</script> 
<script> 
var app = angular.module('myApp', []) 
app.config(function($logProvider){ 
$logProvider.debugEnabled(false); 
}); 
app.controller("myController", ['$scope', '$log', function($scope, $log) { 
$scope.$log = $log; 
$scope.message = 'Hello World!'; 
}]); 
</script> 
</head> 
<body ng-app="myApp"> 
<form id="form1"> 
<div ng-controller="myController"> 
<p>Reload this page with open console, enter text and hit the log button...</p> 
<label>Message: 
<input type="text" ng-model="message" /> 
</label>  
<br/> <br/> <br/> 
<button ng-click="$log.log(message + ' log') ">log</button> 
<button ng-click="$log.warn(message + ' warn') ">warn</button> 
<button ng-click="$log.info(message + ' info') ">info</button> 
<button ng-click="$log.error(message + ' error') ">error</button> 
<button ng-click="$log.debug(message + ' debug') ">debug</button> 
</div> 
</form> 
</body> 
</html> 
Case 1: 
With :  
app.config(function($logProvider){ 
$logProvider.debugEnabled(false); 
}); 

Output: 

We can see that if we open the “See Console Sidebar”, we get 1 error, 1 warning and 2 info(1 for log function, other one for info function). Here Debug() is missing as it is turned off by our application. Logging in AngularJS Applications Made SimpleIf we hide the Console Sidebar, we can still see all the messages displayed in the Console as:

Logging in AngularJS Applications Made Simple

Case 2: 

With :  

app.config(function($logProvider){ 
$logProvider.debugEnabled(true); 
}); 

Or we can skip the entire code for app.config(){….}); as by default debug is turned on. 

Output: 

We can see that if we open the “See Console Sidebar”, we get 1 debug, 1 error, 1 warning and 2 info(1 for log function, other one for info function). Here Debug() is seen as it is turned on by our application or by default. 

Logging in AngularJS Applications Made Simple

If we hide the Console Sidebar, we can see all the messages displayed in the Console except the debug message since it can be seen only in the verbose of the console, as:

Logging in AngularJS Applications Made Simple

Conclusion: logging in AngularJS 

In this post, we started with logging in AngularJS. AngularJS comes with a service called $log for logging. $log is a simple wrapper around the console.log facilities. We understood the difference between $log.info, $log.warn, $log.error, $log.log and $log.debug. We learned how to extend $log through AngularJS application and even work with extended features of the same. We also saw how to switch off debugging in AngularJS logging. 


Note: Angular is a version upgrade to AngularJS. Therefore, Angular refers to AngularJS in this article.

Monica

Monica Gupta

Author

I am Monica Gupta with 19+ years of experience in the field of Training and Development. I have done over 500 Corporate Trainings. I am currently working as a freelancer for several years. My core area of work is Java, C++, Angular, PHP, Python, VBA.

Join the Discussion

Your email address will not be published. Required fields are marked *

Suggested Blogs

Learn Nodemailer Module in Node.js

In this tutorial, we will learn how to send email in Node.js using the nodemailer npm package.For the email provider, we are going to use Sendinblue. Prerequisites Node.js (>v6.0.0 for nodemailer module) Code Editor (For Ex. VS Code, Atom) An account in SendinblueStart by creating a free account in Sendinblue. A Sendinblue free account offers 300 mails/day. Its setup is easy and straightforward. An introduction to Nodemailer Nodemailer, an open source project started in 2010, is annpm module for Node.js applications to send emails. Today, nodemailer is a de facto to send an email in Node.js. Highlights of Nodemailer It is a single module with zero dependencies  It supports HTML Content  Allows you to easily add attachments to messages Supports SMTP as default transport method; other supported transport methods are SES, Sendmail, Stream. OAuth2 authenticationGetting Started For this tutorial, I am using Nodejs v12.16.1 and VS Code as the Code Editor. Create a new directory nodemailer-example.  Open the terminal or cmd inside the directory and run  $ npminit --yes It will initialize a new npm package. Install dependencies Following different npm packages, we are going to use in this project. nodemailer – To send the mail express – To create APIs cors – To resolve the cross originresource sharing body-parser – To extract the body from the API request dotenv – To access the environment variables $ npm install --save nodemailer express cors body-parser dotenv This command will install all the dependencies. Now, we can start the coding. Project Structure Open the nodemailer-example in the code editor and create the following folders and files in it; not to worry, I will be explaining all the files and commands involved.  nodemailer-example    |- routes      |- mail-api.js    |- src      |- send-mail.js    |- template      |- mail.html    |- .env    |- index.js Sendinmail Setup Login to your Sendinmail account. From the top-left menu, select SMTP & API. Select the SMTP tab. Click on Create a new SMTP key. Copy the key at some safe place.  You can deactivate the SMTP key anytime. Now, open the .env file and create 2 key-value pair. USER=YOUREMAILADDRESS  PASS=xxxxxxx-xxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxx USER: The email address using which you created the sendinmail account. PASS:SMTP Key By using .env file we are not exposing the credentials to the web.  Using environment variables in the project is an industrial standard.  Source Code Open the send-mail.js in the editor. Copy and paste the below code in it."use strict";  require("dotenv").config();  constnodemailer = require("nodemailer");  /**   * sendEmail   * @param{Object}mailObj - Email information   * @param{String}from- Email address of the sender   * @param{Array}to- Array of recipients email address   * @param{String}subject - Subject of the email   * @param{String}text - Email body   */  constsendEmail = async (mailObj) => {  const{ from, to, subject, text } = mailObj;  try {  // Create a transporter  lettransporter = nodemailer.createTransport({  host:"smtp-relay.sendinblue.com",  port:587,  auth: {  user:process.env.USER,  pass:process.env.PASS,        },      });  // send mail with defined transport object  letinfo = awaittransporter.sendMail({  from:from, // sender address  to:to, // list of receivers  subject:subject, // subject line  text:text, // plain text body      });  console.log(`Message sent: ${info.messageId}`);  return`Message sent: ${info.messageId}`;    } catch (error) {  console.error(error);  thrownewError(  `Something went wrong in the sendmail method. Error: ${error.message}`      );    }  };  module.exports = sendEmail; Code Walk Through In the beginning, we are importing dotenv to get the environment variables from the .env file and nodemailer to send the email. The sendEmailfunction accepts an object. This object has from, to, subject, text fields. Please note that, from and USER must be same. The nodemailer.createTransportreturns a mail object. The transporter variable is storing the mail object.  let transporter = nodemailer.createTransport({       host: "smtp-relay.sendinblue.com",       port: 587,       auth: {         user: process.env.USER,         pass: process.env.PASS,       },     });Open SMTP tab in your sendinmail account and cross check the host and port.In the auth object, we are passing the user and password from the environment variable.Send the mail using sendMail method.// send mail with defined transport object     let info = await transporter.sendMail({       from: from, // sender address       to: to, // list of receivers       subject: subject, // Subject line       text: text, // plain text body     });It returns a Promise of Send Message Info. In the end, it is returning the message id.  Express Route The sendEmail method is ready.  Let’s create an express route for it. This is the API endpoint using which we can access the sendEmail function. Open the mail-api.js in the code editor and paste the below code. constexpress = require("express");  constrouter = express.Router();  constsendMailMethod = require("../src/send-mail");  // Post request to send an email  router.post("/sendmail", async (req, res) => {  try {  constresult = awaitsendMailMethod(req.body);  // send the response  res.json({  status:true,  payload:result          });      } catch (error) {  console.error(error.message);  res.json({  status:false,  payload:"Something went wrong in Sendmail Route."          })      }  }) module.exports = router; The express framework provides a Router method to create different HTTP methods. Here, we have created a POST method to send the mail.  Instead of extracting the req.body parameters, we passed it as it is. The benefit of this approach is that if there is a change in argument or position, then we would not have to change it in all the places.  In the end, we are exporting the router. Now, this can be used in the server side. Express Server Now, it’s time to create a server and expose the routes on it. Open the index.js and paste the below code in it. "use strict";  constexpress = require("express");  constbodyParser = require("body-parser");  constcors = require("cors");  constapp = express();  constmailAPI = require("./routes/mail-api.js");  // Express body parser  app.use(cors());  app.use(bodyParser.json());  app.use(  bodyParser.urlencoded({  limit:"50mb",  extended:false,  parameterLimit:50000    })  );  // use the routes specified in route folder  app.use("/api/v1", mailAPI);  constport = process.env.PORT || 4444;  //listen to the server  app.listen(port, function () {  console.log(`listening to the port ${port} .....`);  }); The route is available on /api/v1/sendmail. Run the server. $ node index.js  listening to the port 4444 ..... Send an Email using API There are couple of methods to test the API. Using the Postmanor using the Curl command. Using Postman Install Postman on your machine if it is not installed. Create a POST request. URL: http://localhost:4444/api/v1/sendmail Content Type: JSON – Body tab > select JSON from dropdown Request Body:  {  "from": "hello@schadokar.dev",  "to": ["shubham@schadokar.dev"],  "subject": "Mail from Nodemailer",  "text": "Sending an email using nodemailer package."  } Hit Send. Make sure the server is running. On Success, the response returns the message id. Now, check your mailbox. If you are unable to find the mail in your Inbox, check the promotional mail folder. Using Curl CommandOpen the terminal or cmd.In the below curl command, change the parameters and enter.curl -X POST http://localhost:4444/api/v1/sendmail -H "Content-Type:application/json" -d '{"from": "hello@schadokar.dev","to": ["shubham@schadokar.dev"],"subject": "Mail from Nodemailer", "text": "Sending an email using nodemailer package."}'In this example, we have sent a simple text message to the recipient.  Nodemailer also gives you an option to send the message in HTML format. Mail template Open the mail.html in the code editor and paste the below code. 
6796
Learn Nodemailer Module in Node.js

In this tutorial, we will learn how to send email ... Read More

Full Stack Development – the Hottest Developer Skill for the Digital Age

With over 1.7 billion websites worldwide and 4.54 billion people using the internet actively, the need for heightened customer experience is on the rise. This is one of the major reasons why professionals who are adept at handling both the client-side and server-side interfaces of an application/website have become more important than ever. It has been estimated that by the next decade, there will be 300,000 new developer jobs in US. The Full Stack developer role is the No.1 position to be filled in 2020 according to 38% of hiring managers. This is closely followed by the role of a back-end developer.Handsome pay packagesThe average annual salary for a full-stack developer is about $110,737 per annum. Even beginners are offered about $58,000 per year and on the other hand, experienced professionals would earn up to $188,253 per year.These professionals are paid handsomely because enterprises are aware that a full stack developer does the job of two professionals (back-end and front-end developer).Plenty of growth opportunitiesAs per reports by The United States Bureau of Labor Statistics, full-stack development job opportunities will increase from 135,000 to 853,000 by the year 2024. This is quite promising for aspiring full stack developers as an ocean of opportunities will be available for them in both startups as well as in multi-national organizations.Skills to become a Full Stack developerBecoming a full-fledged full stack developer is not child’s play. It takes a wide range of skills to become a good full stack developer. Below are the mandatory skills:Front-end skills: They should be well-versed with basic front-end technologies like HTML5, CSS3, and JavaScript. They should also be comfortable working with front-end frameworks or third-party libraries such as JQuery, SASS, and AngularJS.Programming languages: They should be aces in at least one server-side coding language like Java, Python, Ruby or .Net.Databases: They should be efficient at handling data from databases like MySQL, MongoDB, Redis, Oracle and SQLServer.Version control systems (VCS): Full stack developers must be aware of Git so that they can make appropriate changes to the codebase.Basic design skills: Awareness about the basic prototype design and UI/UX design is essential to become a successful full stack developer.Server and API: They should have adequate exposure to Apache or Linux servers as well as web services.The way forward for Full Stack developersThe growing demand for full-stack developers is due to the ample benefits they offer to organizations. With technology evolving at a rapid pace, foresighted companies will keep adding them to their workforces. Full stack development became the No.1 developer skill because these developers are trained to multi-task various technologies and products. For aspiring full stack developers out there, now is the best time to make the most of these opportunities.Real products require real challenges. Check out our live online workshops and build your portfolio of projects.
4858
Full Stack Development – the Hottest Develop...

With over 1.7 billion websites worldwide and 4.54 ... Read More

What are React Component Lifecycle Methods

React is the most popular JavaScript library used to create interactive UI for web applications. It is a component-based library where different parts of a webpage can be encapsulated by components which are quite easy to create, manage and update. React allows us to create Single Page Applications which maintain the state of individual components on an app without having to reload it.  What are React Components? Developers who are new to JavaScript libraries and frameworks like React and Angular might ask the question, “What is a component?” Well, in very simple words, a component is a unit of code which includes JavaScript and HTML to build a part of a web page. It acts like a custom HTML element. It is reusable and can be as complex as you want it to be. For example, imagine that you are creating a very basic application with header, footer, and body. The header can be a component; the footer can be another component and the body can be yet another one or even might consist of multiple components.One of the most useful characteristics of React is its ability to integrate reusable components in a project. Reusability is the characteristic of a component which allows it to be used again, thereby reducing the amount of code a developer has to write. In our example here, the header can be a reusable component and can be used on all the pages of the application, which makes it easy to maintain and update. What does a component look like? Here is a simple example of a react component which contains a simple form. This is a class-based component. React also supports function-based components. As you can see in the code below, App is a user-defined class which inherit from React’s Component class and it has a render method which returns HTML code. As the name suggests, the render method returns and renders HTML to our browser. Every component has to return HTML which is rendered to the user’s browser by render method.import React, { Component } from 'react';  class App extends Component {    handleChange(event) {      this.setState({value: event.target.value});    }    render() {      return (                              Username:                                            Password:                                              );    }  }    export default App; In the above example, we have created a login form where there are 2 input boxes for the user to enter their username and password and then submit the form. We have assigned an event handler to form which will handle the login event in component.We have exported our component (using export default App) so that it can be rendered inside other components.This is a very basic example of component, but this can be as complex as you want it to be. But it is always advised to make your component independent and it should represent only a part of your page which can be reusable as well. It can return complex HTML included with JavaScript to handle complex features in your application.Component as a class React allows us to create component in the form of class as well as functions. While creating component as class you need to define a class which extends React.Component class. Component class has many features which the deriving class can use to maintain the state throughout the lifecycle. In case you want to have more custom features, you can create your own base component class which derives from Component class, and then your component classes can derive from your base component class. What do we mean by Component Lifecycle?Lifecycle of a component is the set of different stages (also known as lifecycle hooks) a component goes through while it is active. Stages could be when a component is created or when any changes are made to the component and many others. There are different methods executed by React at different points of time between when a component is created and at the end when it is destroyed and not in use. One such hook or method we have already seen in the code above, which is render(), and it is executed by React to render the component. We can override these methods and perform certain tasks in those methods, but every lifecycle serves a different purpose and it can be a nightmare if we ask them to do something that they aren’t supposed to or are not very good at. As a developer we should be aware of what those different stages are, what happens in those stages, in what order they execute and how we can make the best use of it. Understanding the lifecycle of components also helps us predict behavior of a component at different stages, which makes it easier to work with them. Managing a large set of components in an application can get you in trouble if you do not know how they work behind the scenes.Props and State Before we start with lifecycle hooks, lets understand what props and state are as they are most commonly used properties in component classes. Props It is a keyword which means properties. Props are used by callers of components to pass properties to the called component in a uni-directional flow. For example, if Parent component renders child component, it can define props and pass them to the child component which is then available and accessible by this.props. Another thing to note here is that props is a ready-only attribute which means data which is passed by parent should not be changed by client components. State State is a plan JavaScript object which defines the current state of any component. It is user defined and can be changed by lifecycle hooks. Ideally state should contain only data which is going to be rendered on DOM. State has getter and setter methods this.getState() and this.setState() which as the names suggest are used to access and update State. It is good practice to use setState method to update State and treat State as an immutable JavaScript object.Since there are many lifecycle hooks a component goes through, it would easier to understand if we start with the hooks which are executed when a component is created.Lifecycle hooks while Mounting [These lifecycle hooks are executed in order as listed, when a component is created]constructor(props) This is not a component lifecycle hook, but it is important to mention here and to be aware that Constructor is executed before it is mounted. Constructor receives props(properties of a component) as an argument which then can be passed to base class using super keyword if we define the constructor.  It is not mandatory to define constructor in component class, but if you do to perform any logic, then you need to call base constructor using super keyword.  Mainly constructors are used: To Setup local state of component with this.state To bind event handler methods. This is what a simple constructor would look like.import React, { Component } from 'react';  class App extends Component {    constructor(props) {      super(props);      this.state = { value: 0 };      this.handleClick = this.handleClick.bind(this);    }  } this.state should be called only inside constructor, to update the state in other methods use this.setState() method.  If constructor is required to do any heavy tasks, it will impact the performance of component, and you should be aware of this fact.  getDerivedStateFromProps(props, state) After constructor, this lifecycle hook is called before render method is executed. It is called while mounting as well as whenever props have changed. This is not very commonly used, only in cases where props can change, and you need to update state of the component. This is the only use case where you should implement this lifecycle hook.This method is executed on every render and cannot access component instance.import React, { Component } from 'react';  class App extends Component {    getDerivedStateFromProps(props, state) {      if (props.value !== state.prevValue) {        return {          prevValue: props.value        };      }      return null;    }    }render() This is the method which is required to be implemented in component class. It can access props and state. This is where you can write your html and jsx code. You can also render child components in this method which will then be rendered as well. Before completing the lifecycle of parent, lifecycle of all child components will be finished. All this html and jsx is then converted to pure html and outputs in DOM. JSX is a JavaScript extension which creates React elements. It looks more like template language but it is empowered by JavaScript which allows it to do a lot more. It can embed expressions . JSX has different set of attributes than what we have in html. For example, while creating html using JSX you need to use attribute “className” instead of class. This is what a typical render method looks like:import React, { Component } from 'react';   class App extends Component {   render() {         return (        Click to go Home { this.state.home }       Go to Home         );   } } Alternatively you can also use React.createElement() method to create html using JSX.const element = React.createElement(       'h1',       {className: 'hello'},       'Hello, world!'     );componentDidMount() As the name suggests, componentDidMount() is invoked after the component is mounted, which means html has been added to DOM tree. It is a very commonly used lifecycle hook, as it allows you to do a lot of things including causing side-effects, setting up any subscriptions, or loading data from external endpoints. If you setup any subscription using this method, make sure to unsubscribe them in componentWillUnmount() lifecycle hook. You shouldn’t update state in this method using this.State() as it may cause performance issues. For assigning initial state you should use constructor(). import React, { Component } from 'react';  class App extends Component {    componentDidMount(){    // Component is rendered and now external calls can be made.      this.getDataAfterTimeOut();    }    getDataAfterTimeOut(){      setTimeout(() => {        this.setState({          data: 'Data is fetched'        })      }, 1000)    }  } Lifecycle hooks while Updating [Next set of lifecycle hooks are executed while a component is updating which can be caused by changes to props(properties) or state of component. These are invoked in order as listed below.] getDerivedStateFromProps(props, state) We have already talked about this. This is invoked every time a component is changed or updated. Any changes in properties or state which causes the component to be changed will invoke this method. shouldComponentUpdate(nextProps, nextState) shouldComponentUpdate() is invoked before rendering (not on initial rendering) but only when props or state has been changed. Even though it is not recommended you can use this lifecycle hook to control the re-rendering. This can lead to performance issues as well as bugs, so be careful while doing that.  In this method nextProps can be compared with this.props and nextState can be compared with this.state. This method can return true or false depending on whether you want to continue rendering by skipping the next lifecycle hooks. In either case it can’t prevent re-rendering of child components. Note that this method defaults to true which will not skip rendering and next lifecycle hooks and continue with execution. import React, { Component } from 'react';  class App extends Component {    shouldComponentUpdate(nextProps, nextState) {  // This value will determine if lifecycle execution is to be skipped or continued.      return nextProps.value != this.props.value;    }  } render() After shouldComponentUpdate lifecycle hook render is called, which we have already talked about, it prepares html and jsx code which then outputs to DOM. getSnapshotBeforeUpdate() getSnapshotBeforeUpdate() is invoked right before the recent changes are added to DOM. This lifecycle hook gives us an opportunity to capture any details we need from the DOM before it is updated with new content. For example, if you want to know the scrolling position of the user, which should be restored after the DOM has changed. Use cases for this lifecycle, while rare, can be of great value at times. The snapshot value which is captured and returned by this hook is passed as a parameter to another lifecycle hook componentDidUpdate() which we will talk about next. import React, { Component } from 'react';  class App extends Component {    getSnapshotBeforeUpdate (prevProps, prevState) {  // implementing this method here allows us to capture the snapshot of current dom tree.      if (this.state.value != prevState.value) {        return table.scrollHeight - table.scrollTop      }      return null    }  }componentDIdUpdate(prevProps, prevState, snapshot) componentDidUpdate is invoked when DOM is updated. It is only called on update, not on initial rendering. You can use this method to make data requests after checking if props have changed. You can also call setSatate() in this method, but make sure to wrap that in a condition else it will cause an infinite loop forcing re-rendering and affecting performance issues. Also it should be noted that value for snapshot will only be available if you have implemented getSnapshotBeforeUpdate() in your component; else value for snapshot will be undefined. Here is an example of componentDidUpdate. This is a very basic example where we have captured snapshot by implementing get Snapshot Before Update lifecycle hook. After that componentDidUpdate is invoked and content is overwritten with new dataimport React, { Component } from 'react';  class App extends Component {    getSnapshotBeforeUpdate(prevProps, prevState) {  // implementing this method here allows us to capture the snapshot of current dom tree.      document.getElementById("divContent").innerHTML =      "Before the update content is " + prevState.content;    }    componentDidUpdate(prevProps, prevState, snapshot) {  // You can access snapshot here to get data from dom before it was updated.      document.getElementById("divContent").innerHTML =      "New content updated " + this.state.content;    }  } import React, { Component } from 'react';  class App extends Component {    getSnapshotBeforeUpdate(prevProps, prevState) {  // implementing this method here allows us to capture the snapshot of current dom tree.      document.getElementById("divContent").innerHTML =      "Before the update content is " + prevState.content;    }    componentDidUpdate(prevProps, prevState, snapshot) {  // You can access snapshot here to get data from dom before it was updated.      document.getElementById("divContent").innerHTML =      "New content updated " + this.state.content;    }  } UnMounting [This is where lifecycle of a component ends when component is destroyed and removed from DOM. While Unmounting React gives us an opportunity to do something before component is destroyed, it can include clearing objects which have occupied memory to avoid memory leaks.] componentWillUnMount() componentWIllUnMount() is executed right after component is unmounted which means it is removed from DOM and destroyed. But before it is removed and destroyed, React gives us an opportunity to perform any cleanup we want to. For example, you might have setup subscriptions initially in componentDidMount() which you should unsubscribe when component is destroyed to avoid memory leaks in your application. You can also remove event listeners which were subscribed before. In this lifecycle hooks you should not update state of your component because component is not going to re-render now.import React, { Component } from 'react';  class App extends Component {    componentWillUnmount() {  // Component will be removed from DOM now.        // Unscubscribe subscriptions and events here.  document.removeEventListener("click", this.handleSubmit);    }  }Conclusion In this article we talked about React, its components and its different lifecycles. It is very crucial to understand the different opportunities that React provides through these lifecycle methods. There are many rules we need to follow while working with these hooks. Making them do something they can’t handle can cause performance issues or even infinite loops at times.  These lifecycle hooks work with props and state which are the most used properties of component class. Changes in state and props trigger different lifecycle hooks and even re-render the dom which is something you should be aware of. These lifecycle hooks are provided to intercept the different stages a component goes through and make the best use of it, but without understanding how they work it can break your application by causing performance issues or memory leaks. Hope this has been helpful. 
9273
What are React Component Lifecycle Methods

React is the most popular JavaScript library us... Read More