Error handling and stack traces are not as I expect

[JoachimKoenigslieb]

Summary

We are building an app and are having issues where whenever we write a bug (happens hourly!), the resulting stack trace is "wrong" and not consistent between refreshes. The stack trace that appears seems to be related to React native internals. Eg. we get a stack trace on line 43 of setUpReactRefresh.js, and not our clearly malformed function call in StupidComponent.tsx.

Looking at the docs, https://docs.expo.dev/get-started/errors/, the error handling is beautiful and I wish I had that!

In our app, we get errors that look like:

The error that appears in Render Error seems to always be correct, but the Source is almost always wrong to great frustration of our team.

I tried init'ing a fresh expo project at the stack track issues also appears here. I pushed a repo to Github which can be viewed here: https://github.com/JoachimKoenigslieb/clean-expo-stacktrace-issue.

We've tried searching the web but can't seem to find anything related.

We are ready to go to great lengths to resolve this issue!

Environment

expo-env-info 1.0.2 environment info:
System:
OS: macOS 12.0.1
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
Yarn: 1.22.17 - /opt/homebrew/bin/yarn
npm: 8.3.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
IDEs:
Xcode: /undefined - /usr/bin/xcodebuild
npmPackages:
expo: ~44.0.0 => 44.0.6
react: 17.0.1 => 17.0.1
react-dom: 17.0.1 => 17.0.1
react-native: 0.64.3 => 0.64.3
react-native-web: 0.17.1 => 0.17.1
npmGlobalPackages:
expo-cli: 5.2.0
Expo Workflow: managed

Please specify your device/emulator/simulator platform, model and version

Running on a Mac M1 view on a (physical) iOS device. Issue happen on all tested combinations of host and device.

Error output

No response

Reproducible demo or steps to reproduce from a blank project

expo init
write some code that crashes the app
observe the call stack in the expo GO app

[gustavbang]

Need this!!! +1 big brain

[EvanBacon]

This is a fundamental issue with React Native and more directly a drawback of Fast Refresh (React Refresh). Even in the browser, web tools using React Refresh, like Next.js have a similar issue.

Fast Refresh effectively receives a string of JS when your code changes and injects it into the runtime using eval(), because of this, the JS engine is unable to create a useful stack trace. This is why the tip of the trace points to ReactRefreshRuntime. If you were to fully reload your app every time (pressing r in the terminal or simulator) then the stack trace would be much more helpful as the JS engine would have better context.