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

[evelant]

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

[evelant]

This issue continues to irritate my team. I'm sure this isn't how LogBox was intended to operate but the above linked reproduction shows that this happens on a fresh empty project.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[Javi]

Can confirm, this keeps happening.

[brunovianarezende]

I've just updated my app to latest react-native (0.65.1) and it still happens.

[slytter]

Same problem here.

[stingerdallas]

Same problem here. It has been this way the last year of react native development, making me want to go back to java development

[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!

[evelant]

I had forgotten I even reported this ticket years ago. Agreed, logbox is and has been useless since it was introduced. Unfortunately I don't think anybody from the react-native team actively looks at issues on this repo. To me it seems they want to benefit from community contributions but don't want to assign manpower to community maintenance. Issues just go without attention unless they impact facebook or a community member fixes them 🤷

[stingerdallas]

With as big of an issue this is for me, but with as little attention this gets, I wonder if it has something to do with the overall structure of our app (functional components vs class components?). Maybe if I stop using functional components and switch to class components? The stack trace has SO much garbage. I wish it would filter down to only local components. Perhaps this just shows how much overhead react native has, and I should switch to native android

[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.

expo/expo-cli#4236

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.