Improve "native" component stacks host component frames
Nessuno ha ancora preso questa issue.
- Lingua principale
- JavaScript
- Stelle
- 251k
- Fork
- 51.4k
- Merge medio
- 2g 4h
- PR unite (30g)
- 53
Descrizione
React and React DevTools generate component stacks in the same format as native Error stacks. For user components (class and function components) this is done by intentionally causing the component's render method to throw an Error, and then stitching the error stack frames together:
https://github.com/facebook/react/blob/5fa4d79b00988f354073bc27313363dd5cce9cd3/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js#L62-L203
This results in a component stack like this:

But for "host components" (e.g. HTMLDivElement or View) when we have no source location to show, we fall back to showing just "at div" or "at View".
We could probably more closely mirror what JavaScript engines do by appending a "location" like (native) or (unknown location) (as the v8 docs suggest) or (anonymous) as v8 seems to actually do in testing.
The trick would be matching the specific browser/engine's behavior for this. For example, running the following code in Chrome or Node...
JSON.stringify({}, () => console.log(new Error('')));
...will show the stack frame:
at JSON.stringify (<anonymous>)
while Firefox will show:
Error:
<anonymous> file:///path/to/script:7
Improving this format so that host components more closely mirror native Error stacks will help simplify things like React Native's error parsing.
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Inizia da packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js, in particolare dalle righe 62-203, e confronta il relativo fallback per i componenti host con gli esempi V8 e Firefox nell’issue. Verifica come lo stack risultante viene utilizzato dal parsing degli errori di React Native. Il lavoro è completo quando i frame host usano un formato di posizione appropriato per il motore senza modificare il comportamento dello stack dei componenti utente.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript, react
- Ambito
- frontend
- Tipo di issue
- Funzionalità
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 38/100