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

Question

我正在使用角度，我想在我的应用程序中实现错误报告功能。为此，我想发送浏览器控制台的内容进行调试。但是我怎么能接触到它。并不是每个错误都是用 console.log(...是否可以访问前端控制台的内容？谢谢。

Answer 1

这种方法不依赖于任何 JS 框架。这是香草javascript。

我从你的问题中可以理解的是，你想访问error抛给的未捕获消息console，你还提到你正在处理一些错误报告功能。有时您可能还需要捕获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);

Answer 2

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

• 对于 HTTPClient 错误，可以使用错误 Iterceptor

• 对于 Angular“代码”错误，我建议使用全局错误处理程序

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)

  })

}