New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Log JavaScript errors / stack traces? #2

Open
corymsmith opened this Issue Jan 22, 2016 · 29 comments

Comments

Projects
None yet
@corymsmith
Owner

corymsmith commented Jan 22, 2016

No description provided.

@lrettig

This comment has been minimized.

@corymsmith

This comment has been minimized.

Owner

corymsmith commented Mar 14, 2016

This should be covered by #14

corymsmith pushed a commit that referenced this issue Mar 16, 2016

@alvaromb

This comment has been minimized.

alvaromb commented Mar 30, 2016

Just to clarify, we have to follow the article posted by @lrettig in order to catch JS errors with this library, am I right?

@lrettig

This comment has been minimized.

Contributor

lrettig commented Mar 30, 2016

Yes. This library adds the ability to pass user info (username, etc.) to Crashlytics from JS, to test crashing from JS, and to record non-fatal JS errors using Crashlytics. @corymsmith the main README should probably be updated to reflect this, what do you think?

@quincycs

This comment has been minimized.

quincycs commented Apr 21, 2016

Any update on this? This is the only reason I want this library- to get the stack trace, and line of the JavaScript error.

@lrettig

This comment has been minimized.

Contributor

lrettig commented Apr 22, 2016

Hi @quincycs -- as outlined in this issue, the library should already support what you need. Just make sure you follow the steps in the blog post mentioned above (https://medium.com/delivery-com-engineering/add-crashlytics-to-your-react-native-ios-app-69a983a9062a) as well (still to be documented properly here, I think). Let me know if I'm missing something.

@quincycs

This comment has been minimized.

quincycs commented Apr 22, 2016

@lrettig thx! But how about fatal JS errors? It really gives the JS line number? (If so that is awesomeee)

@quincycs

This comment has been minimized.

quincycs commented Apr 22, 2016

Seems the only missing piece to the puzzle is the last part of the blog where all the crash groups just one.
I don't really understand that if we are logging the fatal crash from JS. I see it as ... Here's the complete data of the crash generated at crash time...library send this to crashlytics

@lrettig

This comment has been minimized.

Contributor

lrettig commented Apr 24, 2016

@quincycs yes, you get the line number (screenshot here: #8 (comment)), but keep in mind that when running in production mode, you'll get minified code and line numbers corresponding to the minified code. You can run this through a source map script to map back to the original code--I think that's outlined the comments for the blog post discussed here.

The crashes all get grouped together since Crashlytics shows the place in the native code where the crash happened, which is always going to be the same when trapping JS errors. I don't yet know of a workaround for this; in my apps it's not a big issue since Crashlytics will continue to report new errors even after you mark one as complete (they'll appear as "issue regression" in future releases).

You can use this library to trap fatal JS errors. In my case, I just wrap all sensitive code in a try... catch block (actually, I use promises). There's more discussion of a way to do this globally here: facebook/react-native#1194

@ColCh

This comment has been minimized.

ColCh commented May 7, 2016

@lrettig did you managed to get sourcemap working? RN Packager bundles sourcemap as separate file - and we don't have filesystem access in RN by default. So sourcemap should be inlined via base64.

I tried to use https://github.com/evanw/node-source-map-support , but no luck. I tried with separate sourcemap file and inlined one

I used this self-written script for inlining sourcemap:

#!/usr/bin/env node

var fs    = require('fs');
var path  = require('path');

var convert = require('convert-source-map');

function embedSourceMap (file) {

  var source = fs.readFileSync(file, 'utf8');

  var sourcemapComment = convert
    .fromMapFileComment(source, path.dirname(file))
    .toComment();

  var patched = source.replace(convert.mapFileCommentRegex, sourcemapComment);

  fs.writeFileSync(file + '.bak', source);
  fs.writeFileSync(file, patched);

}

process.argv.slice(2).forEach(embedSourceMap);

I also checked source maps in Google Chrome, loading my script in html. Os course, it's failing to work, but I can see sources with separate source map file and inlined one. So, source map is working.

But error stack... Everything I've got in adb logcat is : index.android.bundle:32 or <unknown>@11:32, which is unhelpful

I really need to see full error stack :(

@lrettig

This comment has been minimized.

Contributor

lrettig commented May 7, 2016

I did, after a fashion. I followed How to added sourcemap in React Native for Production? and wrote a separate script that, on a one-off basis, allows me to convert the unmapped code location to a mapped location. But this is far short of remapping an entire stack trace. I don't think that would be terribly hard to do; it would be awesome if this library could automatically remap the stack trace for you.

@corymsmith

This comment has been minimized.

Owner

corymsmith commented May 7, 2016

I haven't look into that at all but agree it's something that would be ideal in this lib!

On May 7, 2016, 10:57 AM -0600, Lane Rettignotifications@github.com, wrote:

I did, after a fashion. I followedHow to added sourcemap in React Native for Production?(http://stackoverflow.com/questions/34715106/how-to-added-sourcemap-in-react-native-for-production/34733906#34733906)and wrote a separate script that, on a one-off basis, allows me to convert the unmapped code location to a mapped location. But this is far short of remapping an entire stack trace. I don't think that would be terribly hard to do; it would be awesome if this library could automatically remap the stack trace for you.


You are receiving this because you were mentioned.
Reply to this email directly orview it on GitHub(#2 (comment))

@ashleydw

This comment has been minimized.

ashleydw commented May 10, 2016

What about android? The article posted is iOS only.

@corymsmith

This comment has been minimized.

Owner

corymsmith commented May 10, 2016

@ashleydw Check the StackOverflow link that @lrettig posted above

@ColCh

This comment has been minimized.

ColCh commented May 10, 2016

@lrettig thanks. Work with sourcemap - this means this lib should read script file, read separate sourcemap, consume it, and only then you will be able to get mapped stack trace to real code.

This means:

  1. You should have file read permission on RN (of course, we don't have any. fs module for RN is separate project, which is maintained by community. RN moves fast, so may be it will be hard to keep it up to date with latest version
  2. You should upload your sourcemap with production version of the app. Yes, anybody can apktool d your .apk, get .js and .js.map files out and "unobfuscate" your app to working js source. Not everyone will like this!

So, I read your message twice and decided, that the best approach will be:

  1. (this is for deploy builds : test [ like Alpha, Beta and TestFlight] and prod [App Store, Google Play]
  2. Generate .js with .js.map
  3. Copy and organize it (you have build number 123 and build version 1.0.0 for each deploy version of the app)
  4. Remove .js.map file to prevent it dropping into deploy app archive

When you experience an error in Crashlytics, you:

  1. Get your unmapped stacktrace (<unknown>:32:23 and so on)
  2. Find corresponding .js with .js.map for crashed app version (app versions are on Crashlytics)
  3. Use self-written script to locate "source-mapped" sources

Pretty overwhelming, but it will work... Any another ideas on this? It's will be great to see something on this point.

Of course, Github Issue is not approtiate place for duscussion on this (or not?), but I haven't found any place on the internet. I don't like chats - I know, that some day, some dev will face this trouble like I and will found our discussion to find answers.

@ashleydw

This comment has been minimized.

ashleydw commented May 10, 2016

@corymsmith I can't see a relevant stackoverflow post.

I have android fully working with crashlytics, but I can't see a way of overriding the logging functions as done in the medium post regarding ios.

@lrettig

This comment has been minimized.

Contributor

lrettig commented May 24, 2016

@ashleydw I think he was referring to this one: http://stackoverflow.com/questions/34715106/how-to-added-sourcemap-in-react-native-for-production/34733906#34733906

@ColCh I haven't had time to think about this in great depth, but I agree in principle with your proposed approach. I think it would be very cool if this library supported that. Much better than doing it by hand as I've been doing!

@ashleydw

This comment has been minimized.

ashleydw commented May 25, 2016

@lrettig right, but it's ios only

@tianjianchn

This comment has been minimized.

tianjianchn commented Jul 6, 2016

Hi, guys. I'm using a wrapper based on this lib to create issue, capture un-handled error, log, and set user info and attributes. see the gist Error Report with fabric/crashlytics and react-native
Hopes that help someone!

@wootwoot1234

This comment has been minimized.

Contributor

wootwoot1234 commented Sep 20, 2016

@kiliwalk Thanks! But, how do I use it?

@sibelius

This comment has been minimized.

Collaborator

sibelius commented Jan 27, 2017

@kiliwalk could u please send a PR to enable this?

@ColCh

This comment has been minimized.

ColCh commented Feb 11, 2017

For people searching for a tool to translate error stacks:
https://github.com/SoftwareMansion/stack-beautifier

example:

2017-02-11 15:13:06.477 foo-project[26049:3497670] *** Terminating app due to uncaught exception 'RCTFatalException: Unhandled JS Exception: TEST', reason: 'Unhandled JS Exception: TEST, stack:
<unknown>@476:1189
n@2:545
<unknown>@365:567
n@2:545
<unknown>@12:38
n@2:545
i@2:266
global code@481:9
'

to translate it, source map file should be provided

➜  foo-project stack-beautifier ios/main.jsbundle.map <<EOF
Unhandled JS Exception: TEST', reason: 'Unhandled JS Exception: TEST, stack:
<unknown>@476:1189
n@2:545
<unknown>@365:567
n@2:545
<unknown>@12:38
n@2:545
i@2:266
global code@481:9
EOF
Unhandled JS Exception: TEST', reason: 'Unhandled JS Exception: TEST, stack:
at /foo-project/src/utils/log.js:56:16
at global (/foo-project/node_modules/react-native/packager/react-packager/src/Resolver/polyfills/require.js:171:12)
at /foo-project/src/app.js:45:10
at global (/foo-project/node_modules/react-native/packager/react-packager/src/Resolver/polyfills/require.js:171:12)
at /foo-project/index.ios.js:10:0
at global (/foo-project/node_modules/react-native/packager/react-packager/src/Resolver/polyfills/require.js:171:12)
at moduleId (/foo-project/node_modules/react-native/packager/react-packager/src/Resolver/polyfills/require.js:116:45)
at require-0.js:1:0

and /foo-project/src/utils/log.js:56:16 is throw new Error("TEST");

@onpaws

This comment has been minimized.

onpaws commented Mar 11, 2017

@tianjianchn your link above is dead
I need to see un-minified stack trace. can someone please share?

@tianjianchn

This comment has been minimized.

tianjianchn commented Mar 11, 2017

@onpaws Sorry. Updated the link in my previous comment, or see here.
Currently I'm trying to use another bug tracker(snag-react-native)

@antoinerousseau

This comment has been minimized.

Contributor

antoinerousseau commented Mar 12, 2017

How is Bugsnag working for you?

@wootwoot1234

This comment has been minimized.

Contributor

wootwoot1234 commented Mar 12, 2017

I just set it up. I couldn't get it to work quite right in development mode but in production mode with all the asset files uploaded it seems to work pretty well. Check back with me in a week if you want an update.

@kelset

This comment has been minimized.

kelset commented Aug 3, 2017

I know it's been a bit more than a week 😉 but @wootwoot1234 any update on @tianjianchn proposed solution? Are you still using it?

@wootwoot1234

This comment has been minimized.

Contributor

wootwoot1234 commented Aug 3, 2017

@kelset after using it for a while fabric didn't work for me. I ended up switching to BugSnag. When I switched over, the support for react native was much better and their tech support is really good too.

@igorarkhipenko

This comment has been minimized.

igorarkhipenko commented Jan 22, 2018

So there's no official solution for this issue yet?
What workaround do you guys use (if you do for sure) for handling error with stack trace?
@ColCh's method works pretty good but built-in solution would be much better instead of this for sure. What about building stack trace map in root component and using it as translator for following error report to crashlytics?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment