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

Question

我正在使用 Angular，我想在我的应用程序中实现错误报告功能。为此，我想发送浏览器控制台的内容进行调试。但是我该如何联系它。

不是每个错误都是用 console.log(... 手动抛出的，这样我可以同时保存它，一些错误是从 angular 本身抛出的或从 httpservice 抛出的异常。

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

谢谢。

Answer 1

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

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

附加一个 sn-p，让您了解如何捕获浏览器控制台数据和处理错误

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

Answer 2

如果您不依赖控制台，这是一种更好的方法。这取决于您，但我说让错误到达控制台并不是最佳实践。无论如何，您都可以在错误到达控制台之前捕获它们。

• 对于 HTTPClient 错误，您可以使用 error Iterceptor
• 对于 Angular “代码”错误，我建议使用 Global Error Handler

Answer 3

这是我从不同来源汇总的解决方案。它捕获了控制台中显示的大部分内容（有些无法捕获）。

它在console.everything 中以数组形式提供，其中包含类型、时间戳和发送到控制台的数据。

最好将其作为第一个脚本包含在其自己的 <script> 标记中，以确保它在其他任何内容之前运行并且不受稍后运行的代码的影响。

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