browser to server logging

Signed-off-by: Vladimir Mandic <mandic00@live.com>
This commit is contained in:
Vladimir Mandic
2024-11-23 10:47:06 -05:00
parent 6bd25a6f90
commit 8a1eaedc82
14 changed files with 120 additions and 86 deletions
+1 -14
View File
@@ -3,19 +3,6 @@ let sortVal = -1;
// helpers
const requestGet = (url, data, handler) => {
const xhr = new XMLHttpRequest();
const args = Object.keys(data).map((k) => `${encodeURIComponent(k)}=${encodeURIComponent(data[k])}`).join('&');
xhr.open('GET', `${url}?${args}`, true);
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) handler(JSON.parse(xhr.responseText));
else console.error(`Request: url=${url} status=${xhr.status} err`);
}
};
xhr.send(JSON.stringify(data));
};
const getENActiveTab = () => {
let tabName = '';
if (gradioApp().getElementById('tab_txt2img').style.display === 'block') tabName = 'txt2img';
@@ -98,7 +85,7 @@ function readCardTags(el, tags) {
}
function readCardDescription(page, item) {
requestGet('/sd_extra_networks/description', { page, item }, (data) => {
xhrGet('/sd_extra_networks/description', { page, item }, (data) => {
const tabname = getENActiveTab();
const description = gradioApp().querySelector(`#${tabname}_description > label > textarea`);
description.value = data?.description?.trim() || '';
+2 -2
View File
@@ -94,14 +94,14 @@ async function delayFetchThumb(fn) {
outstanding++;
const res = await fetch(`/sdapi/v1/browser/thumb?file=${encodeURI(fn)}`, { priority: 'low' });
if (!res.ok) {
console.error(res.statusText);
error(`fetchThumb: ${res.statusText}`);
outstanding--;
return undefined;
}
const json = await res.json();
outstanding--;
if (!res || !json || json.error || Object.keys(json).length === 0) {
if (json.error) console.error(json.error);
if (json.error) error(`fetchThumb: ${json.error}`);
return undefined;
}
return json;
+5 -3
View File
@@ -20,7 +20,7 @@ async function preloadImages() {
try {
await Promise.all(imagePromises);
} catch (error) {
console.error('Error preloading images:', error);
error(`preloadImages: ${error}`);
}
}
@@ -43,14 +43,16 @@ async function createSplash() {
const motdEl = document.getElementById('motd');
if (motdEl) motdEl.innerHTML = text.replace(/["]+/g, '');
})
.catch((err) => console.error('getMOTD:', err));
.catch((err) => error(`getMOTD: ${err}`));
}
async function removeSplash() {
const splash = document.getElementById('splash');
if (splash) splash.remove();
log('removeSplash');
log('startupTime', Math.round(performance.now() - appStartTime) / 1000);
const t = Math.round(performance.now() - appStartTime) / 1000;
log('startupTime', t);
xhrPost('/sdapi/v1/log', { message: `ready time=${t}` });
}
window.onload = createSplash;
+11 -4
View File
@@ -2,6 +2,7 @@ let logMonitorEl = null;
let logMonitorStatus = true;
let logWarnings = 0;
let logErrors = 0;
let logConnected = false;
function dateToStr(ts) {
const dt = new Date(1000 * ts);
@@ -29,8 +30,7 @@ async function logMonitor() {
row.innerHTML = `<td>${dateToStr(l.created)}</td>${level}<td>${l.facility}</td>${module}<td>${l.msg}</td>`;
logMonitorEl.appendChild(row);
} catch (e) {
// console.log('logMonitor', e);
console.error('logMonitor line', line);
error(`logMonitor: ${line}`);
}
};
@@ -46,6 +46,7 @@ async function logMonitor() {
if (logMonitorStatus) setTimeout(logMonitor, opts.logmonitor_refresh_period);
else setTimeout(logMonitor, 10 * 1000); // on failure try to reconnect every 10sec
if (!opts.logmonitor_show) return;
logMonitorStatus = false;
if (!logMonitorEl) {
@@ -64,14 +65,20 @@ async function logMonitor() {
const lines = await res.json();
if (logMonitorEl && lines?.length > 0) logMonitorEl.parentElement.parentElement.style.display = opts.logmonitor_show ? 'block' : 'none';
for (const line of lines) addLogLine(line);
if (!logConnected) {
logConnected = true;
xhrPost('/sdapi/v1/log', { debug: 'connected' });
}
} else {
addLogLine(`{ "created": ${Date.now()}, "level":"ERROR", "module":"logMonitor", "facility":"ui", "msg":"Failed to fetch log: ${res?.status} ${res?.statusText}" }`);
logConnected = false;
logErrors++;
addLogLine(`{ "created": ${Date.now()}, "level":"ERROR", "module":"logMonitor", "facility":"ui", "msg":"Failed to fetch log: ${res?.status} ${res?.statusText}" }`);
}
cleanupLog(atBottom);
} catch (err) {
addLogLine(`{ "created": ${Date.now()}, "level":"ERROR", "module":"logMonitor", "facility":"ui", "msg":"Failed to fetch log: server unreachable" }`);
logConnected = false;
logErrors++;
addLogLine(`{ "created": ${Date.now()}, "level":"ERROR", "module":"logMonitor", "facility":"ui", "msg":"Failed to fetch log: server unreachable" }`);
cleanupLog(atBottom);
}
}
+67
View File
@@ -0,0 +1,67 @@
const serverTimeout = 5000;
const log = async (...msg) => {
const dt = new Date();
const ts = `${dt.getHours().toString().padStart(2, '0')}:${dt.getMinutes().toString().padStart(2, '0')}:${dt.getSeconds().toString().padStart(2, '0')}.${dt.getMilliseconds().toString().padStart(3, '0')}`;
if (window.logger) window.logger.innerHTML += window.logPrettyPrint(...msg);
console.log(ts, ...msg); // eslint-disable-line no-console
};
const debug = async (...msg) => {
const dt = new Date();
const ts = `${dt.getHours().toString().padStart(2, '0')}:${dt.getMinutes().toString().padStart(2, '0')}:${dt.getSeconds().toString().padStart(2, '0')}.${dt.getMilliseconds().toString().padStart(3, '0')}`;
if (window.logger) window.logger.innerHTML += window.logPrettyPrint(...msg);
console.debug(ts, ...msg); // eslint-disable-line no-console
};
const error = async (...msg) => {
const dt = new Date();
const ts = `${dt.getHours().toString().padStart(2, '0')}:${dt.getMinutes().toString().padStart(2, '0')}:${dt.getSeconds().toString().padStart(2, '0')}.${dt.getMilliseconds().toString().padStart(3, '0')}`;
if (window.logger) window.logger.innerHTML += window.logPrettyPrint(...msg);
console.error(ts, ...msg); // eslint-disable-line no-console
xhrPost('/sdapi/v1/log', { error: msg.join(' ') }); // eslint-disable-line no-use-before-define
};
const xhrInternal = (xhrObj, data, handler = undefined, errorHandler = undefined, ignore = false) => {
const err = (msg) => {
if (!ignore) {
error(`${msg}: state=${xhrObj.readyState} status=${xhrObj.status} response=${xhrObj.responseText}`);
if (errorHandler) errorHandler();
}
};
xhrObj.setRequestHeader('Content-Type', 'application/json');
xhrObj.timeout = serverTimeout;
xhrObj.ontimeout = () => err('xhr.ontimeout');
xhrObj.onerror = () => err('xhr.onerror');
xhrObj.onabort = () => err('xhr.onabort');
xhrObj.onreadystatechange = () => {
if (xhrObj.readyState === 4) {
if (xhrObj.status === 200) {
try {
const json = JSON.parse(xhrObj.responseText);
if (handler) handler(json);
} catch (e) {
error(`xhr.onreadystatechange: ${e}`);
}
} else {
err(`xhr.onreadystatechange: state=${xhrObj.readyState} status=${xhrObj.status} response=${xhrObj.responseText}`);
}
}
};
const req = JSON.stringify(data);
xhrObj.send(req);
};
const xhrGet = (url, data, handler = undefined, errorHandler = undefined, ignore = false) => {
const xhr = new XMLHttpRequest();
const args = Object.keys(data).map((k) => `${encodeURIComponent(k)}=${encodeURIComponent(data[k])}`).join('&');
xhr.open('GET', `${url}?${args}`, true);
xhrInternal(xhr, data, handler, errorHandler, ignore);
};
function xhrPost(url, data, handler = undefined, errorHandler = undefined, ignore = false) {
const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhrInternal(xhr, data, handler, errorHandler, ignore);
}
+2 -39
View File
@@ -1,42 +1,5 @@
let lastState = {};
function request(url, data, handler, errorHandler) {
const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.timeout = 5000;
xhr.ontimeout = () => {
console.error('xhr.ontimeout', xhr);
errorHandler();
};
xhr.onerror = () => {
console.error('xhr.onerror', xhr);
errorHandler();
};
xhr.onabort = () => {
console.error('xhr.onabort', xhr);
errorHandler();
};
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
try {
const json = JSON.parse(xhr.responseText);
handler(json);
} catch (err) {
console.error('xhr.onreadystatechange', xhr, err);
errorHandler();
}
} else {
console.error('xhr.onreadystatechange', xhr);
errorHandler();
}
}
};
const req = JSON.stringify(data);
xhr.send(req);
}
function pad2(x) {
return x < 10 ? `0${x}` : x;
}
@@ -151,11 +114,11 @@ function requestProgress(id_task, progressEl, galleryEl, atEnd = null, onProgres
};
const onProgressErrorHandler = (err) => {
console.error('onProgressError', err);
error(`onProgressError: ${err}`);
done();
};
request('./internal/progress', { id_task, id_live_preview }, onProgressHandler, onProgressErrorHandler);
xhrPost('./internal/progress', { id_task, id_live_preview }, onProgressHandler, onProgressErrorHandler);
};
start(id_task, 0);
}
+1 -15
View File
@@ -1,17 +1,3 @@
const log = (...msg) => {
const dt = new Date();
const ts = `${dt.getHours().toString().padStart(2, '0')}:${dt.getMinutes().toString().padStart(2, '0')}:${dt.getSeconds().toString().padStart(2, '0')}.${dt.getMilliseconds().toString().padStart(3, '0')}`;
if (window.logger) window.logger.innerHTML += window.logPrettyPrint(...msg);
console.log(ts, ...msg); // eslint-disable-line no-console
};
const debug = (...msg) => {
const dt = new Date();
const ts = `${dt.getHours().toString().padStart(2, '0')}:${dt.getMinutes().toString().padStart(2, '0')}:${dt.getSeconds().toString().padStart(2, '0')}.${dt.getMilliseconds().toString().padStart(3, '0')}`;
if (window.logger) window.logger.innerHTML += window.logPrettyPrint(...msg);
console.debug(ts, ...msg); // eslint-disable-line no-console
};
async function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms)); // eslint-disable-line no-promise-executor-return
}
@@ -82,7 +68,7 @@ function executeCallbacks(queue, arg) {
try {
callback(arg);
} catch (e) {
console.error('error running callback', callback, ':', e);
error(`executeCallbacks: ${callback} ${e}`);
}
}
}
+3 -3
View File
@@ -28,7 +28,7 @@ function clip_gallery_urls(gallery) {
const files = gallery.map((v) => v.data);
navigator.clipboard.writeText(JSON.stringify(files)).then(
() => log('clipboard:', files),
(err) => console.error('clipboard:', files, err),
(err) => error(`clipboard: ${files} ${err}`),
);
}
@@ -493,9 +493,9 @@ function previewTheme() {
el.src = `/file=html/${name}.jpg`;
}
})
.catch((e) => console.error('previewTheme:', e));
.catch((e) => error(`previewTheme: ${e}`));
})
.catch((e) => console.error('previewTheme:', e));
.catch((e) => error(`previewTheme: ${e}`));
}
async function browseFolder() {