Logbox warnings/errors raised during component render don't have useful content

Description

If a Logbox error or warning is raised during component render there is no information about which component raised the error, its stack, or its position in the view hierarchy. Information printed is just a stack of the call to addLog(log: LogData) inside LogBoxData.js:197 instead of information about the component that logged the warn/error.

Screenshots illustrate better from a fresh react-native-init with a console.warn added to a function component:

It’s all internal info, nothing very useful.

React Native version:

$ C:\dev\LogBoxStackError\node_modules\.bin\react-native info
info Fetching system and libraries information...
System:
    OS: Windows 10 10.0.20161
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 10.06 GB / 31.93 GB
  Binaries:
    Node: 10.18.1 - ~\AppData\Local\Temp\yarn--1595094823239-0.10804363425476082\node.CMD
    Yarn: 1.22.4 - ~\AppData\Local\Temp\yarn--1595094823239-0.10804363425476082\yarn.CMD
    npm: 6.13.4 - C:\dev\tools\nodejs\npm.CMD
    Watchman: 4.9.4 - C:\dev\tools\watchman\watchman.EXE
  SDKs:
    Android SDK:
      Android NDK: 21.0.6113669
  IDEs:
    Android Studio: Not Found
  Languages:
    Java: 11.0.8
    Python: 3.8.4
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: 0.63.1 => 0.63.1
  npmGlobalPackages:
    *react-native*: Not Found
Done in 1.21s.

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. react-native init TestProject
2. Add console.warn("something") anywhere in App.js
3. Run project on Android emulator then tap on LogBox warning

Expected Results

Expected to see information about the component where the error or warning was logged.

Snack, code example, screenshot, or link to a repository:

Repo created with exactly the above steps: https://github.com/AndrewMorsillo/LogBoxStackError

[Javi]

I keep coming back to this ticket every year or so. It’s amazing it hasn’t made more noise, the logbox is pretty core functionality for developers and it’s been useless since its inception!

[slytter]

Evan Bacon (expo developer) commented on the issue a couple of months ago:

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.

https://github.com/expo/expo-cli/issues/4236