javascript - 如何收集所有控制台输出或访问前端控制台的当前内容

Question

我正在使用 Angular，我想在我的应用程序中实现错误报告功能。为此，我想发送浏览器控制台的内容进行调试。但我怎样才能接触到它。

并非每个错误都是用 console.log(... 以便我可以同时保存它，一些错误是从 Angular 本身抛出的，或者是从 httpservice 抛出的异常。

是否可以访问前端控制台的内容？

谢谢。

Answer 1

这种方式不依赖于任何JS框架。这是普通的 JavaScript。

我对你的问题的理解是，你想要访问抛出到控制台的未捕获的错误消息，并且你还提到你正在处理一些错误报告功能。有时您可能还需要捕获console.log/warn/info，您可以覆盖如下所示的行为以捕获错误/消息，因为控制台是由浏览器处理的。因此，实现该行为的唯一方法是重写。

附加一个代码片段，让您了解如何捕获浏览器控制台数据并处理错误

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