Console integration: get number of errors/warnings thrown?

Question

So if you open up the inspector, you get this (if you're unlucky):

I'm building a tiny JS component which displays debugging information - is there any way to read the number of encountered errors and warnings so far?

A hacky solution I could come up with involves a bit of trickery by replacing the console.(error|log|warn) functions with my own, but I'm yet to test if it works for all cases (e.g. outside of code I own).

Is there a better way to do this?

Answer 1

As noted in this answer, it's generally not a good idea to change the behavior of native objects/methods. However, the following code should get you what you need in a fairly innocuous manner:

// Add this IIFE to your codebase:
(() => {
	// Get all of the property names of the console:
	const methodsToTrack = Object.keys(window.console);
	// Create an object to collect total usage tallies in:
	const usageRegistry = {};
	for (let i = 0, j = methodsToTrack.length; i < j; i++) {
		let methodName = methodsToTrack[i];
		// If the property is not a method, don't touch it:
		if(typeof window.console[methodName] !== 'function') {
			continue;
		}
		// Cache the original console method here:
		let consoleMethod = window.console[methodName];
		// Overwrite console's method to increment the counter:
		window.console[methodName] = function () {
			// Defining registry properties here, so the registry only contains values for methods that were accessed:
			usageRegistry[methodName] = usageRegistry[methodName] || 0;
			// Execute the original method's behavior, capturing the returned value (if any) in a var, to return it at the end:
			const returnedValue = consoleMethod(...arguments);
			// Increment the usage registry for the executed method:
			usageRegistry[methodName]++;
			// Return the value the console's method would have returned, so the new method has the same signature as the old.
			return returnedValue;
		};

	}
	// Define a funciton to output the totals to a console log, then clean up after itself:
	window.showConsoleTallies = function () {
		window.console.log(usageRegistry);
		usageRegistry['log']--;
	}
})();

// Examples:
showConsoleTallies();
console.log('log 1');
console.error('error 1');
console.log('log 2');
console.warn('warn 1');
console.error('error 2');
console.log('log 3');
showConsoleTallies();

PS: That's the ECMA6 version, but feel free to run it through Babel if you'd like it to be compiled for use in older browsers.