17

I am writing a React Native app, and I find that the error messages that the iOS emulator generates never indicate the line in my code where the error occurred. In the screenshot below, I can see that this is a problem with the map() function in the Dashboard component, but since it doesn't give a line number, if there are multiple instances of map() in Dashboard, I don't know how to isolate which one is throwing the error.

So my question is: why doesn't React Native indicate the line number in this scenario? Is this an inherent property of how React Native works and it will always be impossible to identify the given line? Or is there a way I can build my app differently in order to show the line numbers of errors?

enter image description here

halfer
  • 19,824
  • 17
  • 99
  • 186
gkeenley
  • 6,088
  • 8
  • 54
  • 129
  • 1
    `SceneView.js` at line 6? Maybe it's there – Vencovsky Jun 10 '19 at 15:09
  • 1
    SceneView.js is a wrapper file that contains the Dashboard component where the map() error occurs. It's definitely in the Dashboard file. There are few enough occurrences of map() in Dashboard that I can solve the problem via trial and error; I just want to understand why it doesn't generate line numbers in case I run into a problem later that's harder to isolate on my own. – gkeenley Jun 10 '19 at 15:15
  • 1
    What you want is source maps. You can refer to https://stackoverflow.com/questions/34715106/how-to-add-sourcemap-in-react-native-for-production – Mykybo Jun 10 '19 at 15:34
  • 1
    It's also worth noting that the top file might not even contain the error, e.g. sometimes if a component calls a hook that throws an error, the stack trace might only show the file of the component and not even mention the file of the hook that contains the actual error – user56reinstatemonica8 Jan 15 '21 at 15:08
  • @gkeenley, have a look at the tool Rollbar! Link in my answer below. – anurag Jan 22 '21 at 14:47

2 Answers2

6

Answer is NO for most cases.

The screen you shared here is of very little use for knowing where error is coming from.

You can use react native debugger to get more info on state/props changes or any exceptions. Stack trace also will not be of much help. You can write your own global error handling function for dev environment. Also remember not all error are JS ones, some are thrown by native modules also.

You can also set breakpoints and do runtime debugging using sources tab or you can blackbox the whole script, whatever is suitable. Debugging is one of the major drawbacks of React Native

  • 1
    I have the same issue as the original poster, and the stack trace in React Native Debugger also does not contain the line number where the error actually occurs. – stephen.hanson Oct 27 '20 at 14:41
  • 1
    @stephen.hanson exact line number is never shown, because the code breaks inside that implementation or library. React native debugger console gives an idea where code might be breaking. Try to use console.log() statement or use breakpoint in sources tab, or you can blackbox the whole script, whatever is suitable –  Oct 28 '20 at 19:44
  • 1
    I was just pointing out that I don't get more information in React Native Debugger as your answer implies. Outside of React Native, JavaScript stack-traces do show the exact line that triggered an error, so it seems reasonable that React Native could do this as well. – stephen.hanson Oct 29 '20 at 17:01
  • 1
    @stephen.hanson thanks for feedback, have updated the answer accordingly. Regarding the second part, it make sense for react native stack traces to behave like JS, but unfortunately it does not work that way –  Oct 30 '20 at 19:20
  • 1
    Oof, this is quite the drawback... I'm glad I stayed with Swift. – aheze Jan 21 '21 at 01:00
2

The answer may be a Yes with a tool called Rollbar:

enter image description here

I do not mean to promote any tool, but, this one seems to be free thus can be adopted by the community. It does catch the line numbers for errors as well!

anurag
  • 1,715
  • 1
  • 8
  • 28