errorlogger/public/app.js

processTStoDate = (inTS) => {
    if (!inTS || inTS === 'undefined') return '';

    let workTS = inTS.valueOf();

    workTS = (workTS > 9999999999999) ? Math.floor(workTS / 1000) : workTS;

    const workDate = new Date(workTS);

    return fecha.format(workDate, 'YYYY-MM-DD HH:mm:ss.SSS')

}

const processContent = (data) => {

    let workData;

    console.log('data length', data.length);
    const table = document.getElementById('logs');

    // const fields = ['eid', 'loggedts', 'server', 'timestamp', 'content', 'method'];

    if (data && data.length > 0) {

        workData = JSON.parse(data);

    }

    if (workData.length > 0) {

        // const tbody = document.createElement('tbody');

        const tbody = document.getElementById('logs');

        for (const item of workData) {

            const itemId = `i${item[ 'eid' ]}`;

            const existing = document.getElementById(itemId);

            if (!existing) {
                const tr = document.createElement('tr');

                let errorContent;

                tr.id = itemId;

                if (item[ 'content' ]) {
                    errorContent = item[ 'content' ];
                } else {
                    errorContent = '';
                }

                const tdLTS = document.createElement('td');
                const tdServer = document.createElement('td');
                const tdSTS = document.createElement('td');
                const tdContent = document.createElement('td');

                const preContent = document.createElement('pre');

                tdLTS.classList.add('align-top');
                tdServer.classList.add('align-top');
                tdSTS.classList.add('align-top');
                tdContent.classList.add('align-top');


                tdLTS.textContent = processTStoDate(item[ 'loggedts' ]);
                tdServer.textContent = item[ 'server' ];
                tdSTS.textContent = processTStoDate(item[ 'timestamp' ]);

                preContent.append(formatShortError(errorContent, item[ 'eid' ]));

                tdContent.appendChild(preContent);

                tr.append(tdLTS, tdServer, tdSTS, tdContent);

                tbody.appendChild(tr);
            }

        }

        table.replaceChildren(...tbody.childNodes);

    }

}

const formatShortError = (json, entryid) => {

    const containerDiv = document.createElement('div');

    try {
        const workBlob = JSON.parse(json);

        if (workBlob.hasOwnProperty('_meta')) {
            const {logLevelId, logLevelName} = workBlob[ '_meta' ];

            const logStyle = (logLevelId >= 4) ? 'text-danger' : 'text-primary'

            const firstSpan = document.createElement('span');
            const syntaxDiv = document.createElement('div');

            firstSpan.setAttribute('data-entry', entryid);
            firstSpan.addEventListener('click', clickHandler);
            firstSpan.innerHTML = `<span class="closed" id="r${entryid}"> </span><span class='${logStyle}'>${logLevelName}</span>:<span>${workBlob[ 0 ]}</span>`;

            syntaxDiv.setAttribute('class', 'preSyntax');
            syntaxDiv.id = `s${entryid}`;
            syntaxDiv.style.display = 'none';

            const newJsonText = JSON.stringify(workBlob, undefined, 4)
            syntaxDiv.innerHTML = syntaxHighlight(newJsonText);

            containerDiv.append(firstSpan, syntaxDiv);

        } else {

            const outputSpan = document.createElement('span');

            outputSpan.textContent = json.substring(0, 30);
            containerDiv.append(outputSpan);

        }

    } catch (e) {
        const outputSpan = document.createElement('span');

        outputSpan.textContent = json.substring(0, 30);
        containerDiv.append(outputSpan);

    }

    return containerDiv;
}

const syntaxHighlight = (json) => {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

const loadContent = () => {

    let xhr = new XMLHttpRequest();

    xhr.open('GET', '/all');

    xhr.onload = function () {
        if (xhr.status !== 200) {
            console.error(`Error ${xhr.status}: ${xhr.statusText}`)
        } else {

            const d = xhr.response;

            // console.log(d);

            if (d) processContent(d);

        }

    }

    xhr.onprogress = function (event) {
        if (event.lengthComputable) {
            console.log(`Received ${event.loaded} of ${event.total} bytes`);
        } else {
            console.log(`Received ${event.loaded} bytes`); // no Content-Length
        }

    };

    xhr.onerror = function () {
        console.error("Request failed");
    };

    xhr.send();

}

const clickHandler = (event) => {

    const rval = findRVal(event.target);

    if (rval && rval > -1) {
        toggle(rval);
    }

}

findRVal = (elm) => {

    if (elm[ 'nodeName' ] === 'BODY') return -1;

    try {
        const attrs = elm.getAttribute('data-entry')

        return attrs ? attrs : findRVal(elm.parentNode);
    } catch (e) {

        return findRVal(elm.parentNode);
    }

}

toggle = (id) => {

    const syntaxDiv = document.getElementById(`s${id}`);

    const triIcon = document.getElementById(`r${id}`);

    if (syntaxDiv.style.display === 'none')
        syntaxDiv.style.display = ''
    else
        syntaxDiv.style.display = 'none';

    if (triIcon.classList.contains('closed')) {
        triIcon.classList.add('open');
        triIcon.classList.remove('closed');
    } else {
        triIcon.classList.add('closed');
        triIcon.classList.remove('open');

    }

}

(function () {

    console.log('GO!');

    loadContent();

    const t = setInterval(() => {
        loadContent()
    }, 30000);

})();