react / react/react

Improve "native" component stacks host component frames

Aperta
#22,531 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Component: Developer Tools Size: Small-Medium Type: Discussion
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:
image

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

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. 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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.