logo
Published on

Track SPFx Logs using PnP Logging and Azure Application Insights

This article demonstrates how to implement logging functionality using the PnP Logging module and Azure Application Insights in the SharePoint Framework (SPFx) web part.
This integration helps track errors, warnings, and custom log entries from SPFx components into Azure for better diagnostics and monitoring.

⚙️ Install Required Dependencies

Install the required PnP and Azure Application Insights libraries:

npm install @pnp/logging --save
npm install @microsoft/applicationinsights-web --save
npm install @microsoft/applicationinsights-react-js --save

🧩 Implement Custom Logging Listener

We’ll create a Custom Listener to send logs from PnP Logging to Azure Application Insights.

Create CustomListener.ts

import { SeverityLevel } from '@microsoft/applicationinsights-web';
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { ReactPlugin } from '@microsoft/applicationinsights-react-js';
import { globalHistory } from "@reach/router";
import { ILogEntry, ILogListener, LogLevel } from "@pnp/logging";

class CustomListener implements ILogListener {
  private appInsights: ApplicationInsights;

  constructor() {
    this.appInsights = this.getApplicationInsights();
  }

  log(entry: ILogEntry): void {
    if (entry.level === LogLevel.Error)
      this.appInsights.trackException({ error: new Error(entry.message), severityLevel: SeverityLevel.Error });
    else if (entry.level === LogLevel.Warning)
      this.appInsights.trackException({ error: new Error(entry.message), severityLevel: SeverityLevel.Warning });
    else if (entry.level === LogLevel.Info)
      this.appInsights.trackException({ error: new Error(entry.message), severityLevel: SeverityLevel.Information });
    else
      this.appInsights.trackException({ error: new Error(entry.message), severityLevel: SeverityLevel.Verbose });
  }

  private getApplicationInsights(): ApplicationInsights {
    const reactPlugin = new ReactPlugin();
    const applicationInsights = new ApplicationInsights({
      config: {
        instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE',
        extensions: [reactPlugin],
        extensionConfig: {
          [reactPlugin.identifier]: { history: globalHistory }
        }
      }
    });
    applicationInsights.loadAppInsights();
    return applicationInsights;
  }
}

export default CustomListener;

🧠 Integrate with SPFx Web Part

Next, import the listener in your main web part class and subscribe to both ConsoleListener and CustomListener.

Update SpfxPnpLoggingAzureWebPart.ts

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

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

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

⚡ Create a Sample React Component

Now let’s create a simple React component to trigger logs of different severity levels.

SpfxPnpLoggingAzure.tsx

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

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

  private btnclicked() {
    Logger.write("Information log from React component");
    Logger.write("Warning log from React component", LogLevel.Warning);
    Logger.write("Error log from React component", LogLevel.Error);
    Logger.writeJSON({ FirstName: "Ravichandran", LastName: "Krishnasamy" }, LogLevel.Info);
  }
}

🧾 How It Works

  • The PnP Logger writes messages to multiple listeners.
  • The ConsoleListener shows them in the browser console.
  • The CustomListener sends them to Azure Application Insights with the configured instrumentation key.

You can now monitor SPFx activities and errors directly in the Azure Portal under Application Insights > Logs (Analytics).

🚀 Build and Deploy

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

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

Upload the .sppkg file to your App Catalog and deploy the solution across the tenant.

📂 GitHub Sample Project

View full SPFx project on GitHub:Track SPFx Logs using PnP Logging and Azure Application Insights

GitHub

✅ Summary

This integration enables real-time monitoring and error tracking for SPFx components using Azure Application Insights.
It’s a reliable way to gain visibility into your SharePoint solutions with centralized, cloud-based logging.

Author

Tags

SPFxPnP-LoggingAzure-Application-InsightsReact
Calendar IconBook a demo