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

Question

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.

If you want to get those errors, you could also implement your own global error handler. See for example [Global Error Handling with Angular2+](https://medium.com/@amcdnl/global-error-handling-with-angular2-6b992bdfb59c#:~:text=Error%20handling%20is%20one%20of,it%20and%20handle%20custom%20logic.): — Silvermind, Sep 14 '20 at 15:17
Does this answer your question? [Intercept calls to console.log in Chrome](https://stackoverflow.com/questions/9216441/intercept-calls-to-console-log-in-chrome) — Silvermind, Sep 14 '20 at 15:18

Mohammad Basit · Answer 1 · 2020-09-14T16:02:44.280

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);

score 1 · Accepted Answer · answered Sep 14 '20 at 15:21

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.

For HTTPClient errors, you can use an error Iterceptor
For Angular "code" errors, I recommend using a Global Error Handler

score 0 · Answer 3 · answered May 10 '21 at 06:34

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)
  })
}

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

3 Answers3