Blog

How to integrate PnP JS Core and SharePoint Framework logging systems

image

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.

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 se an example how it works, imagine we have this code in which we are querying a library selecting a non-existing column called “assdafa”.

image

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

image

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!

Enjoy!

@jquintozamora

2 Thoughts on “How to integrate PnP JS Core and SharePoint Framework logging systems

  1. Pingback: Newsletter – Episode 96 – Belarus SharePoint Community Blog

  2. Pingback: SharePoint Patterns & Practices – May 2017 release – CleverShare.nl

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

Post Navigation