How to log exceptions (captureException) to console too

[gaastonsr]

When I'm developing locally I disable sending errors to Sentry but I still want those errors to show in my console so I can fix them.

Is there a way to disable sending exceptions/events to Sentry but still log them to the console?

[teeberg]

we wrapped captureException for that reason:

function captureException(...args) {
    if (typeof Sentry !== 'undefined') {
        Sentry.captureException(...args);
    }
    else {
        console.error(...args);
    }
}

[HazAT]

I would say the best approach would the use beforeSend

Sentry.init({
  dsn: "DSN",
  beforeSend: event => {
   if (IS_DEBUG) {
     console.error(event);
     return null; // this drops the event and nothing will be send to sentry
   }
   return event;
  }
});

[gaastonsr]

What I don't like about using beforeSend is that I don't get the original error object. But thanks for the reply.

[kamilogorek]

@gaastonsr you do as the second argument :) https://docs.sentry.io/learn/filtering/?platform=browser#before-send

Sentry.init({
  dsn: "DSN",
  beforeSend: (event, hint) => {
   if (IS_DEBUG) {
     console.error(hint.originalException || hint.syntheticException);
     return null; // this drops the event and nothing will be sent to sentry
   }
   return event;
  }
});

[gaastonsr]

Omg, this changes everything! thanks, @kamilogorek.

[teebu]

It took me 30 minutes to find why my console wasn't logging errors. This should be easier to do.

[kamilogorek]

The problem here is that if we'd log it by default, we'd also capture it as a breadcrumb by default. And we already do this for capture errors. Thus it'd create duplicate entries.
Although my ears are fully opened for the feedback and if someone has any idea how to improve this docs part, I'd be more than glad to include it :)

[vitalets]

The problem here is that if we'd log it by default, we'd also capture it as a breadcrumb by default. And we already do this for capture errors. Thus it'd create duplicate entries.
Although my ears are fully opened for the feedback and if someone has any idea how to improve this docs part, I'd be more than glad to include it :)

It's really unexpected behavior that sentry catches errors and does not show them in console!
I also spent an hour discovering why my app does not work although console is clear.
This definitely should be changed.

I think you can filter out error from breadcrumb on server side.
Or maybe log it to console in setTimeout callback, so breadcrumbs will already be captured. As I currently do:

Sentry.init({
  dsn: 'DSN',
  beforeSend: (event, hint) => {
    setTimeout(() => console.error(hint.originalException || hint.syntheticException), 0);
    return event;
  }
});

[kamilogorek]

@vitalets it has been changed in 5.9.0. You'll see errors in the console now as well.

[vitalets]

@vitalets it has been changed in 5.9.0. You'll see errors in the console now as well.

@kamilogorek
It does not work for me on sentry/browser 5.9.1 (chrome 78, osx).
Here are the code:

Sentry.init({  dsn: 'dsn' });
setTimeout(() => {throw new Error('abc')}, 3000);

The console is empty. Network tab shows that error was sent to sentry.

Without sentry error is shown:

// Sentry.init({  dsn: 'dsn' });
setTimeout(() => {throw new Error('abc')}, 3000);

[ilan-schemoul]

it logs for captureException not for capture event :
To log captureEvent and captureException we slightly modified the @kamilogorek 's solution :

Sentry.init({
  dsn: "DSN",
  beforeSend: (event, hint) => {
   if (IS_DEBUG) {
     console.error(hint.originalException || hint.syntheticException || event);
     return null; // this drops the event and nothing will be sent to sentry
   }
   return event;
  }
});

[gaastonsr]

@kamilogorek is it the default for the @sentry/node package too? I have the 5.9.0 version and I see the beforeSend function being called but I don't see anything logged in the console.

[ntomka]

I also see no errors on console with 5.10.1. Logging would be enough if debug is set to true.

[kamilogorek]

This is what happens when you don't read specs to the very end...

https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm

If special error event handling is true
If return value is true, then set event's canceled flag.
Otherwise
If return value is false, then set event's canceled flag.

And then you scroll...

There are two exceptions in the platform, for historical reasons:
The onerror handlers on global objects, where returning true cancels the event

I'll update the code accordingly

[vitalets]

This is what happens when you don't read specs

Nobody reads specs to the very end :)

Thank you for the fix!

[jminardi]

If I am reading this thread correctly then the current release of sentry should show errors in the console while also sending them to the sentry dashboard. I am not experiencing this behavior.

Here is how I am loading sentry into my page:

<script src="https://browser.sentry-cdn.com/5.20.1/bundle.min.js" integrity="sha384-O8HdAJg1h8RARFowXd2J/r5fIWuinSBtjhwQoPesfVILeXzGpJxvyY/77OaPPXUo" crossorigin="anonymous"></script>
<script src="https://browser.sentry-cdn.com/5.20.1/vue.min.js" crossorigin="anonymous"></script>

Here is my initialization call:

  Sentry.init({
    dsn: 'https://_________.ingest.sentry.io/___________',
    integrations: [new Sentry.Integrations.Vue({Vue, attachProps: true})],
  });

I've added the following error producing line:

 window.undef.undef += 1;

When I load the page and trigger the error line nothing shows up in the console, but I do see the error in the sentry dashboard. If I comment out the Sentry.init call then I see a TypeError in the js console.

I expected based off my reading of this thread that I would see the error in the js console while also logging it to the sentry dashboard. Is that not correct? Do I still need to use the beforeSend hook?

[jminardi]

I realize now that I need to pass logErrors: true to the Integrations.Vue call:

new Sentry.Integrations.Vue({Vue, attachProps: true, logErrors: true}

Sorry, I should have read the docs more closely!

[tad-lispy]

Sorry, I know it's an old one, but I got a bit confused. Unhandled exceptions are printed correctly, but this code doesn't print the error:

import * as Sentry from "@sentry/browser";

try {
  throw new Error ("Catch this")
} catch (error) {
  console.log ("Capturing exception. Will it be printed below?")

  Sentry.captureException (error)
}

The output is just:

Capturing exception. Will it be printed below?

After reading the discussion above I would expect the error to be printed in the console too.

The error including the breadcrumb is in the Sentry app. I guess an easy workaround is to call console.error right after the captureException call.

[kamilogorek]

try/catch prevents errors from being printed by the global error handler, so yes, you need to do it manually in this case.

[Codelica]

Old issue here, but seems related. Since Sentry captures unhandled errors and also passes them to console.error, is there a simple route to avoid duplicates when also sending console.error (via CaptureConsole)? It seems the behavior (years ago) would have avoided this, but now that they are passed I'm curious if there is some config or hook I'm overlooking to negate that? :)

[kamilogorek]

@Codelica in @sentry/node? For exceptions, you can override onFatalError, for rejections, you can change its mode to not print logs: https://docs.sentry.io/platforms/node/configuration/integrations/default-integrations/#onuncaughtexception

[Codelica]

@kamilogorek thanks for the info :) , but sorry to have mislead. :( I was hoping there'd be some crossover between Sentry's JS/Node options and those for React Native (which I'm using). Doesn't appear to have onFatalError or really much of any information on its default integrations. All I've been able to find is the beforeSend hook which doesn't appear to have enough info to let me determine if it's a dupe. Anyway, sorry for cluttering the JS queue here, just the only related issue I could find.

[kamilogorek]

No worries. I can try to help if you explain your setup and which SDK is that exactly. Because I think i understood you want to achieve.

[Codelica]

Well we're using Expo / React Native so technically we include "sentry-expo" which is basically a wrapper around a couple Sentry SDK -- both @sentry/browser and @sentry/react-native which are exposed. Between the sentry-expo wrapper and the fact that it's not using the "latest" Sentry SDKs (especially on the react-native side), makes it a little more interesting. Not a huge deal in the end, at least not big enough for us to want to toss sentry-expo and wire up the @sentry packages, tags, data, etc ourselves -- as they did a nice integration. Just something I was hoping to clean up. :)

[lajuffermans]

How can you manage to log to both Sentry and console with the @sentry/browser package? The vue package has a logErrors setting that does the trick.

If I do this:

beforeSend: (event, hint) => {
   if (IS_DEBUG) {
     console.error(hint.originalException || hint.syntheticException);
   }
   return event;
  }

...it will create duplicate entries at Sentry's side 🤔

[dan-dr]

try/catch prevents errors from being printed by the global error handler, so yes, you need to do it manually in this case.

Hey @kamilogorek what about Sentry.captureException(new Error('cool error')) ? not in a try/catch but an if/else where i want to report an error but not throw it for UX reaons. I still want it to appear as a console.error, do I need to call it manually?

Also, seems like this PR #2475 moved it to tracing? how are the two related?