Overriding console.log, etc to display inside HTML view

Issue

So, I'm working on a project in which the actual production environment has access to APIs that I can't get except by loading the page inside the production environment (they are using angular.$window.external), but loading the page inside production means I can't access developer tools, console, etc. because it runs in an in-application browser instance. So I am trying to output all console log/etc statements into a div in my document to try to troubleshoot when my API calls do not work as expected.

I got it sort of working, but it misses some things and I am not sure why.

The code I am including as consoledebug.js:

// Code adapted from https://stackoverflow.com/a/5677825/12869266
// Include consoledebug.js at the end of a file, and create a div with
// the id "logs" in your html file where you want output.

var logDiv = document.getElementById('logs')

var addToLogDiv = function (type, text) {
  var node = document.createElement('p')
  node.className = type
  var content = document.createTextNode(type + ': ' + text)
  node.appendChild(content)
  logDiv.appendChild(node)
}

// define a new console
var console = (function (oldCons) {
  return {
    log: function (text) {
      oldCons.log(text)
      addToLogDiv('log', text)
    },
    info: function (text) {
      oldCons.info(text)
      addToLogDiv('info', text)
    },
    warn: function (text) {
      oldCons.warn(text)
      addToLogDiv('warn', text)
    },
    error: function (text) {
      oldCons.error(text)
      addToLogDiv('error', text)
    }
  }
})(window.console)

//Then redefine the old console
window.console = console

I put the <script src="../common/consoledebug.js"></script> tag at the end of the HTML document, right before the </body> tag.

When I run inside a regular chrome window, I get these lines in my HTML body:

log: test

error: TypeError: $window.external.SomeProprietaryAPI is not a function

But Chrome's log shows an additional error myhtml.html:35 Uncaught ReferenceError: someOtherProprietaryAPI is not defined at myhtml.html:35

Any suggestions as to why this does not get captured by my function or what I can do about it? Or an alternative way to output all console output into the HTML document itself?

I tried including the script at the top of the file, but all that did was give me 2 errors on not being able to append to null (for the 2 log entries it's capturing, but not for the third one that it isn't).

I'm pretty new to Javascript and trying to get a base of existing AngularJS code working on a new version of the production environment that has switched from using IE to Chromium for HTML display.

Edit: Put enough code to be relevant in a Plunker. As you can see the console.log('test') in the controller gets logged to the document, but the uncaught reference error in the body of the html document does not.

Edit six months later: Just wanted to note that the problem and its solution are still applicable in Angular12 using Typescript for the application (although the script that intercepts the console changes is a JS file loaded in the "scripts": array of my production configuration, not Typescript included in the project anywhere.)

Solution

Some enhancements:

1. Create a message queue array for errors that occur before full dom has loaded.
2. Use window.addEventListener('error', callback) to listen for execution errors after new console defined
3. Wait for dom to load to query for the logDiv. Before it is defined push messages into the message queue and then when dom loads check for anything in that queue

let logDiv, messageQueue =[];

window.addEventListener('load', function(){
    // assign the log element
    logDiv = document.getElementById('logs');
    if(messageQueue.length){
        // print your preload errors
        messageQueue.forEach(([type,text])=>addToLogDiv(type,text))
    }
})

var addToLogDiv = function (type, text) {
  if(logDiv){
    var node = document.createElement('p')
    node.className = type
    var content = document.createTextNode(type + ': ' + text)
    node.appendChild(content)
    logDiv.appendChild(node)
  }else{
    // before logDiv defined store any errors
    messageQueue.push([type, text]) 
  } 
}

// define a new console
var console = (function (oldCons) {
  return {
    // same as before
  }
})(window.console)

//Then redefine the old console
window.console = console
// after new console created
window.addEventListener('error', function(e){
  console.log(e.message)
})

Demo in head

Answered By - charlietfl