Popular posts

you would need to override the window.console object.

window.oldConsole = windows.console;

   var newConsole = {
    element: document.querySelector('#mydiv'); 
         assert = function() {
          console.assert(arguments); // w3schools.com/js/js_function_parameters.asp parameter overloading
        },
    clear = function() {
          ....
          console.clear();
        }
    count = function() {},
    count​Reset = function() {},
    debug = function() {},
    dir = function() {},
    dirxml = function() {},
    error = function() {},
    group = function() {},
    group​Collapsed = function() {},
    groupEnd = function() {},
    info = function() {},
    log = function() {},
    profile = function() {},
    profileEnd = function() {},
    table = function() {},
    time = function() {},
    timeEnd = function() {},
    timeLog = function() {},
    time​Stamp = function() {},
    trace = function() {},
    warn = function() {},
    }

    windows.console = newConsole;

besides that I don't think it's possible. They don't 'emit' error events hence you cannot intercept and suppress or propagate them.

I am agnostic if that's a good or bad thing but to my knowledge some javascript developers argue strongly against overriding global libraries.

addendum:

as Marco Alka mentioned in his response

It is not necessary to overwrite the whole object. Only overwrite the methods you need:

// store ref to original method in variable
const originalConsoleError = console.error;

// overwrite ref to method with custom function
console.error = function(...args) {
  // get your out-div
  const myDiv = document.querySelector('#error');

  // write error to div
  if (myDiv) {
    myDiv.innerText += args.join(' ');
    myDiv.innerHTML += '<br>';
  }

  // call original method
  return originalConsoleError.apply(this, args);
};

one side note the ... operator needs a transpiler since it's not supported everywhere developer.mozilla.org/en-US/docs/Web/JavaScript/R…