Sentry-javascript: feature/question: Console breadcrumbs line numbers suggestion

[joshribakoff]

I'm complaining about the raven.js with no line numbers associated to all console.log() calls. #723 #48

These were closed as "wont fix", the workaround given was to disable the breadcrumbs feature.

I want the breadcrumbs feature, but also to be able to see the line number which generated the console.log() call..

Why can't you just concatenate or prefix a string to the console.log() payload containing this information?

The breadcrumbs payload sent also doesn't contain line numbers so its kind of useless... Here's a screenshot of what got sent to sentry. The console.log() message was sent, but with no line numbers.

My suggestion is to add line numbers to what I see in the console, and in what gets sent to sentry. If this is a "wont fix" can you please explain why? Not having line numbers makes debugging pretty difficult. The whole point of using a library like this is to help make debugging easier.

Specifically why not just append to the .message property of that json object, a string like " - Happened on Line 111 in File xyz.js". Devtools does this out of the box & this library not only doesnt do it, but also breaks the usefulness of devtools.

[benvinegar]

My suggestion is to add line numbers to what I see in the console

@joshribakoff – do you have a working example of how to achieve this?

If this is a "wont fix" can you please explain why?

It's marked as "won't fix" because AFAIK, what people are asking for is not possible without just disabling breadcrumbs. If you're aware of a way to do this, we're all ears.

[joshribakoff]

Sure, how are you capturing the console.log calls currently? I assume you're wrapping console.log?

A simple test shows that the console.log wrapper is passed callee which shows where the console.log call originated. Assuming Raven JS is also wrapping / replacing the console.log function, it could use this info.

[benvinegar]

callee is deprecated and not available when an application is using strict mode. More here.

[benvinegar]

Additionally, it's not clear to me how you're getting line and column numbers here. Those expanded callee properties you see (e.g. [[FunctionLocation]]) do not appear to be standardized (seems like they're part of V8).

[joshribakoff]

The VM155 means that the callee was the console itself. If I just did a simple console.log() in devtools it says the same thing.

Maybe its not standardized but it does work currently. If you dont' like that method, how about this one:

(function () { console.log(new Error().stack); })();

Works for me.... Let me know if you have a problem with that & if so what is the issue? I can come up with some more ideas.

[benvinegar]

Maybe its not standardized but it does work currently

It won't work if code enables strict mode, which seems like common practice today. It also doesn't appear that this works in Firefox (with strict mode disabled). Here's the arguments object there (using your code above) – callee is present, I don't see a means of querying file or line number:

(function () { console.log(new Error().stack); })();

Yeah, I think this could work. I guess we'd need to extend the breadcrumb interface accepted by Sentry server to have first-class properties for filename and line number, then reflect that in the UI. And we'd need to apply source maps so that the source file isn't always app.min.js (example) and the line number is 1. That's a lot of work for a relatively small feature, so it's probably pretty low on our priority list.

In the meantime, you might be able to implement this yourself using the breadcrumbCallback config option, which fires every time a breadcrumb is recorded. You could inspect whether this was a console call, then throw an Error and slice off the correct number of frames to arrive at the filename/line number to attach to the breadcrumb property list. It won't look pretty in the UI (would be represented as a standard key/value property), and it wouldn't have source maps applied, but if you can go without that it should work.

[joshribakoff]

I disagree that it's trivial. This tool is intended to improve debugging
but actually obfuscates info pertinent to debugging. If it's a lot of work
as you then it doesn't sound like something I can easily add myself with
this callback. I'm not disagreeing that it's difficult to do. But the
numerous times this seems to show up on the issue tracker shows this is a
common request/problem so it's obviously not low priority to everyone. I
don't have any suggestions on the source map issues. I thought sentry
already does source maps.

On Sat, Aug 5, 2017 at 4:27 PM Ben Vinegar [e-mail] wrote:

Maybe its not standardized but it does work currently

It won't work if code enables strict mode, which seems like common
practice today. It also doesn't appear that this works in Firefox (with
strict mode disabled). Here's the arguments object there (using your code
above):

[image: image]
https://user-images.githubusercontent.com/2153/28999416-85c527b2-79fa-11e7-8fbb-67c47447b8d2.png

(function () { console.log(new Error().stack); })();

Yeah, I think this could work. I guess we'd need to extend the breadcrumb
API in Sentry server to have first-class properties for filename and line
number, then reflect that in the UI. And we'd need to apply source maps so
that the source file isn't always app.min.js (example) and the line number
is 1. That's a lot of work for a relatively small feature, so it's probably
pretty low on our priority list.

In the meantime, you might be able to implement this yourself using the
breadcrumbCallback config option, which fires every time a breadcrumb is
recorded. You could inspect whether this was a console call, then throw
an Error and slice off the correct number of frames to arrive at the
filename/line number to attach to the breadcrumb property list.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/getsentry/raven-js/issues/1003#issuecomment-320476047,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AD1cOuUCMIiBDfAKh-YboCqIRN3HBe8Kks5sVPpMgaJpZM4OnjCn
.

>

Sent from Gmail Mobile

[billyvg]

@joshribakoff I'm not sure if you can do this in other browsers, but you can blackbox @sentry (or raven-js for older SDKs) in chrome devtools:

[HazAT]

Anyone stumbling upon this issue now, if you are using our SDK version > 3 you need to add /@sentry/ instead of /raven-js/

[DerekJDev]

If anyone is using Microsoft Edge and runs into this, you need to go into DevTools --> Settings --> Library Code. Then add /@sentry/ as a library code pattern. In the dropdown, make sure the value is "Library code", not "Disabled".