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

Sathish Nadarajan
 
Solution Architect
August 14, 2021
 
Rate this article
 
Views
3155

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

Author Info

Sathish Nadarajan
 
Solution Architect
 
Rate this article
 
Sathish is a Microsoft MVP for SharePoint (Office Servers and Services) having 15+ years of experience in Microsoft Technologies. He holds a Masters Degree in Computer Aided Design and Business ...read more
 

Leave a comment