Basics of PnP Logging in SPFx

This article explains the PnP Logging module in SharePoint Framework (SPFx) — a lightweight and extensible logging framework that allows you to record logs, warnings, and errors from SPFx components.
It also explains how to use various listeners to route logs to the console or other systems.

⚙️ Install PnP Logging Dependency

Run the following command:

npm install @pnp/logging --save

🧩 Logger and Listeners Overview

The Logger acts as a mediator that distributes log entries to all subscribed listeners.
Listeners handle what happens when a log entry is written (e.g., show in console, send to Azure, etc.).

Listener Type	Description
`ConsoleListener`	Logs messages directly to the browser console.
`FunctionListener`	Allows custom handling of log entries using a callback function.
`CustomListener`	A class-based listener giving full control over log handling logic.

🧠 Add Logger Configuration

`SpfxPnpLoggingWebPart.ts`

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import SpfxPnpLogging from './components/SpfxPnpLogging';
import {
  Logger,
  ConsoleListener,
  FunctionListener,
  LogLevel,
  ILogEntry,
  ILogListener
} from "@pnp/logging";

const functionListener = new FunctionListener((entry: ILogEntry) => {
  console.log(`%c [Function Listener]: ${entry.message}`, "color: #0078D4");
});

class CustomListener implements ILogListener {
  log(entry: ILogEntry): void {
    console.log(`%c [Custom Listener]: ${entry.message}`, "color: #C239B3");
  }
}

export default class SpfxPnpLoggingWebPart extends BaseClientSideWebPart<{}> {
  public onInit(): Promise<void> {
    Logger.activeLogLevel = LogLevel.Info;
    Logger.subscribe(new ConsoleListener());
    Logger.subscribe(functionListener);
    Logger.subscribe(new CustomListener());
    return Promise.resolve<void>();
  }

  public render(): void {
    const element: React.ReactElement<{}> = React.createElement(SpfxPnpLogging);
    ReactDom.render(element, this.domElement);
  }
}

⚡ React Component to Trigger Logs

`SpfxPnpLogging.tsx`

import * as React from 'react';
import styles from './SpfxPnpLogging.module.scss';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { Logger, LogLevel } from "@pnp/logging";

export default class SpfxPnpLogging extends React.Component<{}, {}> {
  public render(): React.ReactElement<{}> {
    return (
      <div className={styles.spfxPnpLogging}>
        <PrimaryButton onClick={this.btnclicked} text="Trigger Logs" />
      </div>
    );
  }

  private btnclicked() {
    Logger.write("This information triggered from React component");
    Logger.write("This warning triggered from React component", LogLevel.Warning);
    Logger.write("This error triggered from React component", LogLevel.Error);
    Logger.writeJSON({ FirstName: "Ravichandran", LastName: "Krishnasamy" }, LogLevel.Info);
  }
}

🧾 How It Works

The Logger receives messages from SPFx components.
Each Listener receives and processes those messages independently.
You can add multiple listeners for various targets (console, Azure, or custom APIs).

🚀 Build and Deploy

Run the following commands to build and package the web part:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the .sppkg file from the sharepoint/solution folder to your App Catalog and deploy the solution.

📂 GitHub Sample Project

View full SPFx project on GitHub:Basics of PnP Logging in SPFx

GitHub

✅ Summary

PnP Logging offers a clean and modular approach to handle logging within SPFx solutions.
By using different listeners, you can easily route logs to multiple destinations — from console debugging to Azure monitoring.