How to collect all console outputs or access current content of console in frontend

user_8524732 0
Viewed 476

I am using angular and I would like to implement a bug report function in my app. For that I want to send the content of the browsers console for debugging. But how can I reach out to it.

Not every error is thrown manually with console.log(... so that I could save it at the same time, some errors are thrown from angular itself or thrown Exceptions from httpservice.

Is it possible to access the content of the frontend console?

Thank you.

angular node.js javascript
3 Answers

This approach is not dependent on any JS framework. It's vanilla javascript.

What I can understand by your question is that you want to access the uncaught error messages thrown to the console and you've also mentioned that you are working on some bug report function. Sometimes you may also need to capture console.log/warn/info you can override the behavior like shown below to capture errors/messages because console is handled by the browser. So the only way to achieve that behavior is to override.

Attaching a snippet to give you an idea to capture browser console data and handle errors

// Add this file to app.component maybe 

let logStatements = [];

(() => {
  window.addEventListener("error", ev => {
    reportError(ev);
  })
  // Capturing console logs
  var oldLog = console.log;
  console.log = function (message) {
    oldLog.apply(console, arguments);
    logStatements.push({
      type: "console.log",
      data: message,
    });
  };
})(logStatements);

console.log('hello');
console.log('world');

// Array of captured console.logs
console.info(logStatements)

// Here you can send this to any backend or something
function reportError(ev) {
  console.log(`${ev.message} was caught in ${ev.filename}`);
}

// logging 'user' variable which is not defined to check if it gets caught 
console.log(user);

user_91388500

It's a better approach, if you do not rely on the console. It's up to you, but I say that letting an error reaching the console is not a best practice. You can catch the errors before they arrive on the console anyway.

user_34866910

Here's a solution that I put together from different sources. It captures most things that shows up in the console (some cannot be captured).

It makes it available in console.everything as an array with type, timestamp, and the data that was sent to the console.

It's best to include this in the header as the first script in its own <script> tag, to make sure it runs before anything else and not affected by code that runs later.

if (console.everything === undefined) {
  console.everything = [];
  function TS(){
    return (new Date).toLocaleString("sv", { timeZone: 'UTC' }) + "Z"
  }
  window.onerror = function (error, url, line) {
    console.everything.push({
      type: "exception",
      timeStamp: TS(),
      value: { error, url, line }
    })
    return false;
  }
  window.onunhandledrejection = function (e) {
    console.everything.push({
      type: "promiseRejection",
      timeStamp: TS(),
      value: e.reason
    })
  } 

  function hookLogType(logType) {
    const original= console[logType].bind(console)
    return function(){
      console.everything.push({ 
        type: logType, 
        timeStamp: TS(), 
        value: Array.from(arguments) 
      })
      original.apply(console, arguments)
    }
  }

  ['log', 'error', 'warn', 'debug'].forEach(logType=>{
    console[logType] = hookLogType(logType)
  })
}
user_106281390
Related