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
Leave a comment