Custom React-Native Logger

Logger

Hi @everyone

I have created a LoggerJs to log outputs to make debugging easy. Please have a look at it and tell if you find it useful. If not, I would be glad to know your response and your suggestions.

https://gist.github.com/ajaykumar97/d953710618f22a611b2c564f260e741d

It automatically disables the console.log if it is not the production environment.

It has different methods to log the out:

1. logger.log

Usage:
- logger.log(header, text, expandJson)

    header: The header to be shown as heading of the output
    text: The output to be shown
    expandJson: If the putput to be shown is JSON object, the JSON object would be expanded by using JSON.stringify().replace() method

- logger.log(text)

    text: The output to be shown

    If only "text" is provided, the default heading would be "LOG"
    The default value for "expandJson" is "false"


2. logger.error

Usage:
- logger.error(header, text)

    header: The header to be shown as heading of the output
    text: The output to be shown
    
- logger.error(text)

    text: The output to be shown

    if only "text" is provided, the default heading would be "ERROR"


3. logger.apiError

Usage:
- logger.apiError(header, text)

    header: The header to be shown as heading of the output
    text: The output to be shown
    
- logger.apiError(text)

    text: The output to be shown

    if only "text" is provided, the default heading would be "API ERROR"

    This method is made to log the API error for the "axios". The error details would contain the error status code, url, error response etc.


4. logger.data

Usage:
- logger.data(header, text, noJsonExpand)

    header: The header to be shown as heading of the output
    text: The output to be shown
    noJsonExpand: A boolean indicating wether to expand the JSON output into more clearer view
    
- logger.data(text)

    text: The output to be shown

    If only "text" is provided, the default heading would be "DATA"
    The default value for "noJsonExpand" is "false" i.e. the output would be expanded

Logger.js

/* eslint-disable no-param-reassign */

const logger = {
    error: (header, err) => {
        if (!__DEV__) { //to disable log in production mode
            return;
        }

        if (!err) { //single argument is passed;
            err = header;
            header = 'ERROR';
        }

        console.log('\n');

        try {
            if (!err.stack) {
                console.log(`%c ${header} `, 'background:red;color:#FFFFFF', err);
            } else {
                console.log(`%c ${header} `, 'background:red;color:#FFFFFF', err.stack);
            }
            console.log('\n');
        } catch (loggerError) {
            console.log(`%c ${header} `, 'background:red;color:#FFFFFF', err);
            console.log('\n');
        }
    },

    apiError: (header, error) => {
        if (!__DEV__) { //to disable log in production mode
            return;
        }

        console.log('\n');

        if (!error) { //single argument is passed;
            error = header;
            header = 'API ERROR';
        }

        console.log(`%c ${header} `, 'background:red;color:#FFFFFF');

        try {
            if (error.config) {
                console.log(
                    '%c URL ', 'background:orange;color:#FFFFFF',
                    error.config.url
                );
                console.log(
                    '%c DATA ', 'background:#00ffff;color:#FFFFFF',
                    error.config.data
                );
            }

            if (error.response) {
                // The request was made and the server responded with a status code
                // that falls out of the range of 2xx

                /* console.log(error.response.data);
                console.log(error.response.status);
                console.log(error.response.headers); */

                if (error.response.status) {
                    console.log(
                        '%c STATUS CODE ', 'background:orange;color:#FFFFFF',
                        error.response.status
                    );
                }

                if (error.response.data) {
                    console.log(
                        '%c RESPONSE DATA ', 'background:orange;color:#FFFFFF',
                        JSON.stringify(error.response.data, null, 4).replace(/'/g, '')
                    );
                }
            } else if (error.request) {
                // The request was made but no response was received
                // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
                // http.ClientRequest in node.js

                console.log(
                    '%c REQUEST ', 'background:orange;color:#FFFFFF',
                    error.request
                );
            } else {
                // Something happened in setting up the request that triggered an Error
                console.log(error);
            }
        } catch (err) {
            console.log('API ERROR', err);
        }

        console.log('\n');
    },
    log: (header, text, expandJson) => {
        if (!__DEV__) { //to disable log in production mode
            return;
        }
        console.log('\n');

        try {
            if (!text) {
                text = header;
                header = 'LOG';
            }

            if (expandJson) {
                console.log(
                    `%c ${header} `, 'background:green;color:#FFFFFF',
                    JSON.stringify(text, null, 4).replace(/'/g, '')
                );
            } else {
                console.log(`%c ${header} `, 'background:green;color:#FFFFFF', text);
            }

            console.log('\n');
        } catch (err) {
            console.log(`%c ${header} `, 'background:green;color:#FFFFFF', text);
            console.log('\n');
        }
    },
    data: (header, text, noJsonExpand) => {
        if (!__DEV__) { //to disable log in production mode
            return;
        }

        console.log('\n');

        try {
            if (!text) {
                text = header;
                header = 'DATA';
            }

            if (noJsonExpand) {
                console.log(`%c ${header} `, 'background:#00ffff;color:#FFFFFF', text);
            } else {
                console.log(
                    `%c ${header} `, 'background:#00ffff;color:#FFFFFF',
                    JSON.stringify(text, null, 4).replace(/\\/g, '')
                );
            }

            console.log('\n');
        } catch (err) {
            console.log(`%c ${header} `, 'background:#00ffff;color:#FFFFFF', text);
            console.log('\n');
        }
    }
};

export default logger;