How to integrate PnP JS Core and SharePoint Framework logging systems


Recently, I was playing with PnP JS Core library, which basically is a wrapper of SharePoint Rest API that allows us to easily use it.

I discovered some cool Features in this library which I really like them! For example, we are able to easily cache queries, do batches, and the library has a good Logging system, which actually is the main topic of this post.

Integrate Logging

So, this post is intended to show how to integrate two different logging systems when developing a SharePoint Framework web part.

Let´s share few documentation links to be aware which logging systems I am talking about:

After creating our SPFx web part, and installing sp-pnp-js, then let´s import both logging systems classes:

If we are using React to build our SPFx webpart, then we could use the following code in our React Component´s constructor:

We can see the comments as self-explanation how the integration have been done. So, basically we enable PnP JS Core Logging at Info level and we create a special FunctionListener to pass every message through SPFx Log system using the right method (verbose, info, warn or error).


Let´s see an example how it works, imagine we have this code in which we are querying a library selecting a non-existing column called “assdafa”.


PnP JS will provide an internal error giving more detail, we can see it on the following image:

error log


Note that the source of the error is sp-loader instead of pnp-js, that is because we are using the FunctionListener to pass all the errors thru SPFx logger.

I created a SPFx webpart sample to demonstrate this PnP JS functionality. Please check it out and any feedback is welcome!


Author: José Quinto
Copyright Notice: All articles in this blog are licensed under CC BY-SA 4.0 unless stating additionally.