SPFx – A Simple Logging and Exception Handling Mechanism in SharePoint Framework

Sometime back, we saw the Logging using the Azure App Insights here. In this article, let us see how to implement the logging and Exception using the SharePoint List in a simpler way.

Create the below classes.

ICustomLogger.ts

import ICustomLogMessage from './ICustomLogMessage';

interface ICustomLogger {
    Log(logMessage: ICustomLogMessage): void;
    Warn(logMessage: ICustomLogMessage): void;
    Verbose(logMessage: ICustomLogMessage): void;
    Error(logMessage: ICustomLogMessage): void;
}

export default ICustomLogger;

CustomLogger.ts

import ICustomLogger from './ICustomLogger'
import ICustomLogMessage from './ICustomLogMessage'
import { sp } from '@pnp/sp/presets/all';
import * as moment from 'moment';

export class CustomLogger implements ICustomLogger {

    public Log = async (logMessage: ICustomLogMessage) => {
        try {
            this.saveLogs(logMessage, "Log");
        } catch (error) {
            //Can't do anything
            console.error(error.Message);
        }
    }

    public Warn = async (logMessage: ICustomLogMessage) => {
        try {
            this.saveLogs(logMessage, "Warn");
        } catch (error) {
            //Can't do anything
            console.error(error.Message);
        }
    }

    public Verbose = async (logMessage: ICustomLogMessage) => {
        try {
            this.saveLogs(logMessage, "Verbose");
        } catch (error) {
            //Can't do anything
            console.error(error.Message);
        }
    }

    public Error = async (logMessage: ICustomLogMessage) => {
        try {
            console.error(logMessage.Message);
            this.saveLogs(logMessage, "Error");
        } catch (error) {
            //Can't do anything
            console.error(error.Message);
        }
    }

    private saveLogs = async (logMessage: ICustomLogMessage, logType: string) => {
        sp.web.lists.getByTitle('ExceptionLogs').items.add({
            WebPartName: logMessage.WebPartName,
            ComponentName: logMessage.ComponentName,
            MethodName: logMessage.MethodName,
            Message: logMessage.Message,

            LogType: logType,
            Date: moment(new Date()).format("MMDDYYYY")
        });
    }
}

const customLogger = new CustomLogger();
export default customLogger;

ICustomLogMessage.ts

interface ICustomLogMessage {
    WebPartName: string,
    ComponentName: string,
    MethodName: string,
    Message: string
}

export default ICustomLogMessage;

I have two interfaces and one implementation class. Now, on the component or any other webpart.ts file, we are going to call the Logging method.

public myMethod = async (): Promise => {
    try {

        customLogger.Log({
            WebPartName: "MyWebPart",
            ComponentName: "MyComponent",
            MethodName: "MyMethod",
            Message: `Entering into the method and the ID is ${Id} and the Country ${country}`
        });

    }
    catch (error) {
        customLogger.Error({
            WebPartName: "MyWebPart",
            ComponentName: "MyComponent",
            MethodName: "MyMethod",
            Message: "Exception Occurred : " + error.message
        });
    }
}

The Log List will be something like,

Happy Coding
Sathish Nadarajan