cargdev/Component-Library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

A small lightweight logging hook with some basic styling

Browse Source
This commit is contained in:
saman
2021-12-03 18:21:18 -05:00
parent 3a3a6eab00
commit d4c9466a54
2 changed files with 45 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/hooks/useLogging.ts
View File

@ -1,13 +1,13 @@
import { useRef } from 'react';
import Logging from '../library/Logging';
import Logging, { ILoggingOptions } from '../library/Logging';
/**
* A hook for a simple logging library.
* @param namespace string that will be displayed after the timestamp and before the log level as [namespace].
* @returns object of type Logging
*/
export const useLogging = (namespace?: string): [Logging] => {
const { current: logging } = useRef(new Logging(namespace));
export const useLogging = (options?: ILoggingOptions): [Logging] => {
const { current: logging } = useRef(new Logging(options));
return [logging];
};

62
src/library/Logging.ts
View File

@ -1,31 +1,53 @@
const DEBUG = 'DEBUG';
const INFO = 'INFO';
const WARN = 'WARN';
const ERROR = 'ERROR';
export const DEBUG = 'DEBUG';
export const INFO = 'INFO';
export const WARN = 'WARN';
export const ERROR = 'ERROR';
export interface ILoggingOptions {
namespace?: string;
debug?: boolean;
applyStyles?: boolean;
styles?: { [key: string]: string };
}
export class Logging {
private namespace = 'Default';
private namespace: string;
private applyStyles: boolean;
private environment: string;
constructor(namespace?: string) {
if (namespace) this.namespace = namespace;
private styles: { [key: string]: string } = {
DEBUG: 'display: inline-block; background-color: Blue; color: white; font-weight: bold; padding: 3px 7px 3px 7px; border-radius: 3px;',
INFO: 'display: inline-block; background-color: Green; color: black; font-weight: bold; padding: 3px 7px 3px 7px; border-radius: 3px;',
WARN: 'display: inline-block; background-color: gold; color: black; font-weight: bold; padding: 3px 7px 3px 7px; border-radius: 3px;',
ERROR: 'display: inline-block; background-color: Red; color: black; font-weight: bold; padding: 3px 7px 3px 7px; border-radius: 3px;'
};
constructor(options?: ILoggingOptions) {
this.namespace = options?.namespace || 'Default';
this.applyStyles = options?.applyStyles || false;
this.environment = process.env.NODE_ENV || 'development';
if (options?.styles && this.applyStyles) {
for (let key in options.styles) {
if (this.styles[key]) this.styles[key] = options.styles[key];
}
}
}
public log = (key: string, obj: any, ...objs: any[]) => {
console.info(`[${this.getDate()}] [${this.namespace}] [${key}] %c${obj}`, ...objs);
if (this.environment === 'production') return;
if (this.applyStyles) {
console.log(`[${new Date().toISOString()}] [${this.namespace}] %c[${key}] ${obj}`, this.styles[key], ...objs);
} else {
console.log(`[${new Date().toISOString()}] [${this.namespace}] [${key}] ${obj}`, ...objs);
}
};
public debug = (obj: any, ...objs: any[]) => this.log(DEBUG, obj, objs);
public info = (obj: any, ...objs: any[]) => this.log(INFO, obj, objs);
public warn = (obj: any, ...objs: any[]) => this.log(WARN, obj, objs);
public error = (obj: any, ...objs: any[]) => this.log(ERROR, obj, objs);
public getDate = () => {
return new Date().toISOString();
};
public setNamespace = (namespace: string) => {
this.namespace = namespace;
};
public debug = (obj: any, ...objs: any[]) => this.log(DEBUG, obj, ...objs);
public info = (obj: any, ...objs: any[]) => this.log(INFO, obj, ...objs);
public warn = (obj: any, ...objs: any[]) => this.log(WARN, obj, ...objs);
public error = (obj: any, ...objs: any[]) => this.log(ERROR, obj, ...objs);
}
export default Logging;