如何使用 Sentry 报告 console.error？答案

【问题标题】：How to report console.error with Sentry?如何使用 Sentry 报告 console.error？
【发布时间】：2018-11-11 00:21:06
【问题描述】：

我的应用程序在 console.error 报告了一些严重问题，但不是 thrown，因此应用程序可能会继续运行 - 可能处于瘫痪状态。

还需要报告console.error 问题，但 Sentry (Raven) 库仅向服务器发送抛出的异常。

有人知道如何很好地解决这个问题吗？

（理想情况下不需要重写所有 console.error 调用，因为某些供应商库可能仍会将输出写入控制台）

【问题讨论】：

这里有某种未记录的控制台插件。 github.com/getsentry/sentry-javascript/blob/…
有更新的使用插件捕获控制台消息的文档：docs.sentry.io/platforms/javascript/…
好像已经搬到这里docs.sentry.io/platforms/javascript/configuration/integrations/…

标签： javascript error-handling sentry

【解决方案1】：

正如用户@kumar303 在他对该问题的评论中提到的那样......您可以使用JS 控制台集成Sentry.Integrations.CaptureConsole。

有关文档，请参阅 https://docs.sentry.io/platforms/javascript/configuration/integrations/plugin/#captureconsole。

最后你设置 Sentry 的 JS 代码如下所示：

import * as Sentry from '@sentry/browser';
import { CaptureConsole } from '@sentry/integrations';

Sentry.init({
  dsn: 'https://your-sentry-server-dsn',
  integrations: [
    new CaptureConsole({
      levels: ['error']
    })
  ],
  release: '1.0.0',
  environment: 'prod',
  maxBreadcrumbs: 50
})

如果有人打电话给console.error，则会向哨兵发送一个新事件。

【讨论】：

你也可以用这个方法发送堆栈跟踪吗？我查看了文档并做了一些测试，但似乎只发送了消息
尚未尝试使用“Integrations.CaptureConsole”获取堆栈跟踪。在我们的案例中，“面包屑”帮助解决了大多数问题，因为可以在哨兵中看到以前的日志消息（也包括信息和调试）。

【解决方案2】：

这是一个更强大的覆盖解决方案

// creating function declarations for better stacktraces (otherwise they'd be anonymous function expressions)
var oldConsoleError = console.error;
console.error = reportingConsoleError; // defined via function hoisting
function reportingConsoleError() {
  var args = Array.prototype.slice.call(arguments);
  Sentry.captureException(reduceConsoleArgs(args), { level: 'error' });
  return oldConsoleError.apply(console, args);
};

var oldConsoleWarn = console.warn;
console.warn = reportingConsoleWarn; // defined via function hoisting
function reportingConsoleWarn() {
  var args = Array.prototype.slice.call(arguments);
  Sentry.captureMessage(reduceConsoleArgs(args), { level: 'warning' });
  return oldConsoleWarn.apply(console, args);
}

function reduceConsoleArgs(args) {
  let errorMsg = args[0];
  // Make sure errorMsg is either an error or string.
  // It's therefore best to pass in new Error('msg') instead of just 'msg' since
  // that'll give you a stack trace leading up to the creation of that new Error
  // whereas if you just pass in a plain string 'msg', the stack trace will include
  // reportingConsoleError and reportingConsoleCall
  if (!(errorMsg instanceof Error)) {
    // stringify all args as a new Error (which creates a stack trace)
    errorMsg = new Error(
      args.reduce(function(accumulator, currentValue) {
        return accumulator.toString() + ' ' + currentValue.toString();
      }, '')
    );
  }
  return errorMsg;
}

【讨论】：

【解决方案3】：

根据@Marc Schmid 的解决方案，如果您链接到 Sentry CDN 文件，我想出了以下工作示例。

<script src="https://browser.sentry-cdn.com/5.11.1/bundle.min.js" integrity="sha384-r7/ZcDRYpWjCNXLUKk3iuyyyEcDJ+o+3M5CqXP5GUGODYbolXewNHAZLYSJ3ZHcV" crossorigin="anonymous"></script>
<!-- https://github.com/getsentry/sentry-javascript/issues/1976#issuecomment-492260648 -->
<script src="https://browser.sentry-cdn.com/5.11.1/captureconsole.min.js"></script>
<script>
    Sentry.init({
        dsn: 'https://abcdef1234567890@sentry.io/012345',
        debug: false,
        integrations: [
            new Sentry.Integrations.CaptureConsole({
                levels: ['error']
            })
        ],
    });
</script>

【讨论】：

【解决方案4】：

找到了一个小技巧：

const consoleError = console.error;
console.error = function(firstParam) {
  const response = consoleError.apply(console, arguments);
  Raven.captureException(firstParam, { level: 'error' });
  return response;
};

它只是包装console.error 并将控制台中的每个错误日志报告给Raven（Sentry）。

如果有人有更好的方法（可能是 Sentry 的一些隐藏功能），请随时分享！

【讨论】：

【解决方案5】：

我使用您的 Sentry 实例编写了一个库。 https://github.com/aneldev/dyna-sentry

【讨论】：