How to report console.error with Sentry?

Question

I have application where some critical issues are reported with console.error but are not thrown so application might continue to run - possibly in cri

Answer 1

Found a little hacky solution:

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

It just wraps console.error and report each of error logs in console to Raven (Sentry).

If someone have nicer approach (maybe some hidden feature of Sentry) please feel free to share!

Answer 2

As user @kumar303 mentioned in his comment to the question ... you can use the JS console integration Sentry.Integrations.CaptureConsole.

See https://docs.sentry.io/platforms/javascript/?platform=browsernpm#captureconsole for documentation.

At the end you JS code to setup Sentry looks as follows:

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

If then someone calls console.error a new event will sent to sentry.

Answer 3

Based on @Marc Schmid's solution I came up with the following working example, if you link to the Sentry CDN files.

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

Answer 4

Here's a more robust override solution

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

Answer 5

I wrote a library that is going this using your Sentry instance. https://github.com/aneldev/dyna-sentry