@@ -386,105 +386,6 @@ export default function App() {
386386
387387</Sandpack >
388388
389- ### Expanding error stacks {/* expanding-error-stacks* /}
390-
391- In addition to the <CodeStep step ={1} >stack trace of the error</CodeStep > itself, you can use <CodeStep step ={2} >` captureOwnerStack ` </CodeStep > to append the Owner Stack.
392- This can help trace the error especially when the error is caused by props. The Owner Stack helps trace the flow of props.
393-
394-
395- ``` js src/index.js [[1, 8, "error.stack"], [2, 7, "captureOwnerStack()"]]
396- import {captureOwnerStack } from ' react' ;
397- import {createRoot } from ' react-dom/client' ;
398-
399- const root = createRoot (document .getElementById (' root' ), {
400- onUncaughtError : (error , errorInfo ) => {
401- if (process .env .NODE_ENV !== ' production' ) {
402- const ownerStack = captureOwnerStack ();
403- error .stack += ownerStack;
404- }
405-
406- console .error (' Uncaught' , error);
407- },
408- }).render (< App / > );
409- ```
410-
411- <Sandpack >
412-
413- ``` js
414- function useCustomHook () {
415- throw new Error (' Boom!' );
416- }
417-
418- function Component () {
419- useCustomHook ();
420- }
421-
422- export default function App () {
423- return < Component / > ;
424- }
425- ```
426-
427- ``` js src/index.js
428- import {captureOwnerStack } from ' react' ;
429- import {createRoot } from ' react-dom/client' ;
430- import App from ' ./App.js' ;
431- import ' ./styles.css' ;
432-
433- const root = createRoot (document .getElementById (' root' ), {
434- onUncaughtError : (error , errorInfo ) => {
435- if (process .env .NODE_ENV !== ' production' ) {
436- const ownerStack = captureOwnerStack ();
437- error .stack =
438- // The stack is only split because these sandboxes don't implement
439- // ignore-listing 3rd party frames via sourcemaps.
440- // A framework would ignore-list stackframes from React via sourcemaps
441- // and then you could just `error.stack += ownerStack`.
442- // To learn more about ignore-listing see https://developer.chrome.com/docs/devtools/x-google-ignore-list
443- error .stack .split (' \n at react-stack-bottom-frame' )[0 ] + ownerStack;
444- }
445-
446- // The stacks are logged instead of showing them in the UI directly to
447- // highlight that browsers will apply sourcemaps to the logged stacks.
448- // Note that sourcemapping is only applied in the real browser console not
449- // in the fake one displayed on this page.
450- console .error (' Uncaught' , error);
451- },
452- }).render (< App / > );
453- ```
454-
455- ``` json package.json hidden
456- {
457- "dependencies" : {
458- "react" : " experimental" ,
459- "react-dom" : " experimental" ,
460- "react-scripts" : " latest"
461- },
462- "scripts" : {
463- "start" : " react-scripts start" ,
464- "build" : " react-scripts build" ,
465- "test" : " react-scripts test --env=jsdom" ,
466- "eject" : " react-scripts eject"
467- }
468- }
469- ```
470-
471- ``` html public/index.html hidden
472- <!DOCTYPE html>
473- <html lang =" en" >
474- <head >
475- <meta charset =" UTF-8" />
476- <meta name =" viewport" content =" width=device-width, initial-scale=1.0" />
477- <title >Document</title >
478- </head >
479- <body >
480- <p >Check the console output.</p >
481- <div id =" root" ></div >
482- </body >
483- </html >
484- ```
485-
486- </Sandpack >
487-
488389## Troubleshooting {/* troubleshooting* /}
489390
490391### The Owner Stack is ` null ` {/* the-owner-stack-is-null* /}
0 commit comments