SharePoint Framework Nuggets: logging like a pro

Tags: SharePoint Framework, SharePoint

I guess that almost every application or solution you ever built has contained some portions of a logging mechanism. And how many of you have written your own - yup, all of you! But what about the SharePoint Framework - yes, it has built-in logging!

SharePoint Framework Nuggets - logging like a pro

How to log in the SharePoint Framework

Logging is a very convenient and easy way to keep track of events happening, instead of having breakpoints, or in JavaScript even worse - alerts. The SharePoint Framework (SPFx) has as all decent frameworks a built-in logging mechanism, albeit very simple, but still yet valuable. It's contained in the @microsoft/sp-client-base module and the class is called Log. To use it in your SharePoint Framework solutions you need to import it as follows:

import {
  Log
} from '@microsoft/sp-client-base';

The Log class contains four static methods for logging:

  • info
  • warn
  • error
  • verbose

The names are exactly what you expect, the info is used for information, warn for warnings, error for errors and verbose for when you just have to much on your mind and want to spit it out.

In the SharePoint Framework implementation all logging is done to the JavaScript console and you can see the logging using the developer tools of your favorite browser. It can take some searching to find them as SPFx spits out quite a lot of logging by itself.

All static methods have the same signature, except the error method - they take three arguments:

  • source: the source of the logging information (max 20 characters), such as method or class name
  • message: the actual message to log (max 100 characters)
  • scope: an optional service scope (more on this one later)

The error method takes an Error object instead of the message string, otherwise they are the same.

This is how it could be used in client side web part:

public render(): void {
  this.context.statusRenderer.clearError(this.domElement);
  this.context.statusRenderer.displayLoadingIndicator(this.domElement, strings.Loading);
  Log.verbose('SpFxNuggets', 'Invoking render');

  this._webInfoProvider.getWebInfo().then((webInfo: IWebInfo) => {
    if (this.properties.fail) {
      throw new Error('Mayday');
    }
    Log.info('SpFxNuggets', 'Service OK', this.context.serviceScope);
    this.context.statusRenderer.clearLoadingIndicator(this.domElement);
    this.context.domElement.innerHTML = `<h1>${webInfo.title}</h1>`;

  }).catch((err) => {
    Log.error('SpFxNuggets', err);
    this.context.statusRenderer.clearLoadingIndicator(this.domElement);
    this.context.statusRenderer.renderError(this.domElement, err);
  });
}

In the example above I use the verbose method to log that we're in the render method. Just verbose information. I also added logging to when the service returns (the promise is fulfilled) to log information that it has returned. In that info method I use the service scope of the web part, and when using the service scope, it replaces my source with the real name (JavaScript name) of the web part. Finally I log the error in the catch method. The image below shows the console output.

Console output

As usual you can find all the source code in this repository: https://github.com/wictorwilen/spfx-nuggets

Happy logging!

18 Comments

  • Patrick Abel said

    This is really cool – thanks for sharing! This might be a good touchpoint for integrating Application Insights as well.

  • Personal Statement Service Review said

    The SharePoint Framework comprises a logging API which is used to log messages during the development of web part. Thanks for sharing here SharePoint Framework solutions which is become helpful for IT students who are looking for decent frameworks method to built-in logging mechanism, and usually taking help on writing UCAS personal statement from me as I am personal statement writer and providing attractive personal statement services to UK students at Personal Statement Folks with full-proof chance to get admission into the college of their choice and study a subject in which they are interested in.

  • Assignment help online said

    It is a well-maintained site where people can learn about various topics. I am looking forward to read more blogs from here. Students finding it tough to write an assignment can try our online assignment help and can get their coursework written by assignment experts.

  • Assignment help online said

    Truly, this article is really one of the very best in the history of articles. I am a antique ’Article’ collector and I sometimes read some new articles if I find them interesting. https://www.allassignmenthelp.com

  • Jack said

    Thanks for explaining How to log in the SharePoint Framework and the static methods for logging for those students who are in search of such kind of information and need academic writing help from the at Quality Dissertation, a one of the top <a href="http://www.qualitydissertation.co.uk">best dissertation writing companies UK</a> and providing dissertation writing help to students. So I will sure share with them this article, hope they will find useful information related to their education.

  • professional tutor for dissertation said

    Thanks for explaining How to log in the SharePoint Framework and the static methods for logging for those students who are in search of such kind of information and need academic writing help from the at Quality Dissertation, a one of the top dissertation writing companies UK and providing dissertation writing help to students. So I will sure share with them this article, hope they will find useful information related to their education.

  • Academic Assignments Help said

    It’s really informative blog on how to log in the SharePoint Framework which are very useful for those students who are worried about their assignments and find such kind of information at Secure Assignment Help. So I ma recommend this blog to them & hope they would like it.

  • Assignment help online said

    Lots of people could take your website as an example when it comes to the maintenance and content. At times, students could not be able to work on their academic assignments. Our online assignment writing help could come handy to you in such circumstances and you can get your assignment written from qualified experts. https://www.allassignmenthelp.com

Add a Comment

About Wictor...

Wictor Wilén is the Nordic Digital Workplace Lead working at Avanade. Wictor has achieved the Microsoft Certified Architect (MCA) - SharePoint 2010, Microsoft Certified Solutions Master (MCSM) - SharePoint  and Microsoft Certified Master (MCM) - SharePoint 2010 certifications. He has also been awarded Microsoft Most Valuable Professional (MVP) for seven consecutive years.

And a word from our sponsors...