Skip to content

Latest commit

 

History

History
70 lines (37 loc) · 4.8 KB

devtools-framework-ignore-list-fix-for-sentry.io-wrong-console-log-source.md

File metadata and controls

70 lines (37 loc) · 4.8 KB
Raw

[DevTools] - Framework Ignore List - Fix for Sentry.io wrong console log source

Background

Messages in the Chrome console always show their source: the exact file and line of code that triggered the message is shown on the right side of the console panel (for LTR languages at least). The format is filename.extension:line#

image

If you're investigating something, you may log a few different messages to the console. It's nice not having to also include information about the message source. It's easy to take that basic feature for granted.

Until you install Sentry.io. 😅

Sentry is a very useful tool that captures all errors and user behavior, network logs, console logs, etc. It's great for troubleshooting.

Except it eats your console.log statements and poops them out of its own source file. That's right: you've lost access that basic feature you took for granted. Now you won't know the true source of any of your messages. Here's an example below. The console.log() actually came from saga.ts:25 but is being misreported as coming from instrument.ts:124. This is a Sentry file with the path http://localhost:3000/node_modules/@sentry/instrument.ts.

old

Authorized solution from Sentry

❗️ Click Here for a solution that seems more elegant.

The solution recommended in the Sentry docs is to add /@sentry/ to Chrome's Framework Ignore List.

If instrument.js displays in your console while debugging, add Sentry to your framework blackboxing* settings like: /@sentry/ so Chrome ignores the SDK stackframes when debugging.

Instructions

  1. Open Dev Tools. If you're messing around with Sentry you should already know how. If not, see my keyboard shortcuts for Mac and Windows.

  2. Open the Dev Tool Settings.

    image

  3. Select the Ignore List option.

    image

  4. Click the Add pattern...

    image

  5. Add /@sentry/ OR the wrong Sentry source filename listed in the console. In my case that was instrument.ts. Or add both if you feel adventurous.

    image

  6. Celebrate that Sentry decided to allow you to get your precious console message sourceinfo back 🎉

    new

Questions

Since I'm new to Sentry and the Ignore List feature, I don't know if this fix has any caveats. It came from Sentry's docs so it should be legit. But the docs page it came from is using the old term Blackboxing instead of Ignore List. Their link to the Chrome Dev Docs is broken but has a cached version from 2015, thanks to the Wayback Machine. I could only find this Ignore List stub on the Chrome Devs Docs.

The Downside

# This solution has to be manually implemented on each browser of each machine used for development 😥

The solution seems like a blunt instrument. It may cause you to miss all Sentry console messages even if they're important.

A slightly better idea?

According to this GitHub issue comment, adding instrument.ts to the Ignore List also works. I prefer this method because it seems like a more targeted approach than ignoring the entire Sentry framework.

Still, it seems like a bit of a hack because I'm not familiar with instrument.ts, its role, and any caveats. It does seem like it would have fewer downsides than a blanket block of the entire framework but unfortunately, I don't have time to investigate now, so 🤷‍♂️

Next Steps?

In the sentry-react-native repo issue #794 suggests other options that might work, but those could be specific to the React Native version.