Logging in SharePoint Framework Solutions

Hi Friends, today I will be discussing about how logging should be done in SharePoint Framework of SPFx solutions. Logging plays a very important role when we need to debug the code in the production for any error and improper or no logging makes it really hard to find the root cause of the issue.


While logging we need to take care of the following pointers

  • What information needs to be logged
  • Where to log
  • How long it should be maintained
  • etc...

To take on this burden, Microsoft has given a dedicated class for the logging which can be utilized well to make the purpose.

@microsoft/sp-core-library

This library holds the solution. In sp-core-library Microsoft has exported a class name "LOG" which contains the static methods to write the logs

Below the how you can import the class into your solution

import { Log } from '@microsoft/sp-core-library';

In this class, you'll get 4 static methods
  1. Error
  2. Verbose
  3. Info
  4. Warn

Let's have a look on how to use each of the methods

Error Logging

In this method, there are 3 parameters
  • Log Source: This is the parameter with help of which you'll find your application/component logs
  • Error object: Error object which holds the details of the error
  • Service Scope(optional): can be skipped

Definition

static error(source: string, error: Error, scope?: ServiceScope): void;

Usage

Log.error("YOUR_COMPONENT_NAME", error);

Verbose Logging

In this method, there are 3 parameters
  • Log Source: This is the parameter with help of which you'll find your application/component logs
  • message: Message that needs to be printed in the log
  • Service Scope(optional): can be skipped

Definition

static verbose(source: string, message: string, scope?: ServiceScope): void;

Usage

Log.verbose("YOUR_COMPONENT_NAME", "SOME_MESSAGE");

Info Logging

In this method, there are 3 parameters
  • Log Source: This is the parameter with help of which you'll find your application/component logs
  • message: Message that needs to be printed in the log
  • Service Scope(optional): can be skipped

Definition

static info(source: string, message: string, scope?: ServiceScope): void;

Usage

Log.info("YOUR_COMPONENT_NAME", "SOME_MESSAGE");

Warn Logging

In this method, there are 3 parameters
  • Log Source: This is the parameter with help of which you'll find your application/component logs
  • message: Message that needs to be printed in the log
  • Service Scope(optional): can be skipped

Definition

static warn(source: string, message: string, scope?: ServiceScope): void;

Usage

Log.warn("YOUR_COMPONENT_NAME", "SOME_MESSAGE");


How to read the logs?

Now, the most important this is how to read the logs. To read the log navigate to the SharePoint Page and press Cntrl + F12. A new window will be opened at the bottom of the browser that will hold all the logs written using the SPFx Log class.

How to read Logs in SPFx Solution


Under Source, you can filter to see only the logs generated under your Component. This the name which you have passed under the Source parameter to the Log class.

Now you can ask for the export of the Logs while troubleshooting and can resolve the error more efficiently.

Hope this article will help you to implement the logging in SPFx solutions


Happy Coding..!
#Microsoft #SPFx #SharePointWidgets

Comments

Popular posts from this blog

SharePoint Framework (SPFx) : Cascade dropdown in webpart properties

SharePoint Image Gallery

Checking user permission in SharePoint Framework (SPFx) webpart