Skip to content

Commit

Permalink
Fix double-formatting client-side
Browse files Browse the repository at this point in the history
This is an alternative attempt (after
#22) at fixing the
"double formatting" situation brought by
canalplus/rx-player#1469 that may be made much
more frequent by canalplus/rx-player#1625.

This solution fixes it client-side instead, which could be seen as
arguably less ugly.

The idea is to rely on the fact that the RxPlayer does full formatting
by calling log functions with at least three arguments:
  1. The timestamp in a string format with always numbers after a comma
  2. A "namespace" (e.g. "[warn]")
  3-n. The log message's arguments

By considering this, we can very easily detect client-side a probable
case of full formatting.
  • Loading branch information
peaBerberian committed Jan 9, 2025
1 parent c405d9a commit 8900b1f
Showing 1 changed file with 24 additions and 16 deletions.
40 changes: 24 additions & 16 deletions client/src/client.js
Original file line number Diff line number Diff line change
Expand Up @@ -68,10 +68,10 @@ function init(currentScriptSrc, playerClass) {
logQueue.push(log);
};

function formatAndSendLog(namespace, log) {
function sendNetworkLog(namespace, log) {
const time = performance.now().toFixed(2);
const logText = `${time} [${namespace}] ${log}`;
sendLog(logText);
const logText = `${time} [Network] ${log}`;
return sendLog(logText);
}

function processArg(arg) {
Expand Down Expand Up @@ -117,9 +117,22 @@ function init(currentScriptSrc, playerClass) {

const spyRemovers = ["log", "error", "info", "warn", "debug"].map((meth) => {
const oldConsoleFn = console[meth];
const namespace = `[${meth}]`;
console[meth] = function (...args) {
const argStr = args.map(processArg).join(" ");
formatAndSendLog(meth, argStr);

// The RxPlayer might already have added a timestamp + namespace format
if (
args.length >= 3 &&
args[1] === namespace &&
/^\d+\.\d+$/.test(args[0])
) {
sendLog(argStr);
} else {
// Else, add it now
const time = performance.now().toFixed(2);
sendLog(`${time} ${namespace} ${argStr}`);
}
return oldConsoleFn.apply(this, args);
};
return function () {
Expand All @@ -136,20 +149,19 @@ function init(currentScriptSrc, playerClass) {
return originalXhrOpen.apply(this, arguments);
}
this.addEventListener("load", function () {
formatAndSendLog(
"Network",
sendNetworkLog(
`Loaded ${method} XHR from: ${url} ` + `(status: ${this.status})`,
);
});
this.addEventListener("error", function () {
formatAndSendLog("Network", `Errored ${method} XHR from: ${url}`);
sendNetworkLog(`Errored ${method} XHR from: ${url}`);
});
this.abort = function () {
formatAndSendLog("Network", `Aborted ${method} XHR from: ${url}`);
sendNetworkLog(`Aborted ${method} XHR from: ${url}`);
return XMLHttpRequest.prototype.abort.apply(this, arguments);
};
this.send = function () {
formatAndSendLog("Network", `Sending ${method} XHR to: ${url}`);
sendNetworkLog(`Sending ${method} XHR to: ${url}`);
return XMLHttpRequest.prototype.send.apply(this, arguments);
};
return originalXhrOpen.apply(this, arguments);
Expand Down Expand Up @@ -187,21 +199,17 @@ function init(currentScriptSrc, playerClass) {
} else {
method = "GET";
}
formatAndSendLog("Network", `Sending ${method} fetch to: ${url}`);
sendNetworkLog(`Sending ${method} fetch to: ${url}`);
const realFetch = originalFetch.apply(this, arguments);
return realFetch.then(
(res) => {
formatAndSendLog(
"Network",
sendNetworkLog(
`Loaded ${method} fetch from: ${url} ` + `(status: ${res.status})`,
);
return res;
},
(err) => {
formatAndSendLog(
"Network",
`Errored/Aborted ${method} fetch from: ${url}`,
);
sendNetworkLog(`Errored/Aborted ${method} fetch from: ${url}`);
throw err;
},
);
Expand Down

0 comments on commit 8900b1f

Please sign in to comment.