@@ -386,105 +386,6 @@ export default function App() {
386
386
387
387
</Sandpack >
388
388
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
-
488
389
## Troubleshooting {/* troubleshooting* /}
489
390
490
391
### The Owner Stack is ` null ` {/* the-owner-stack-is-null* /}
0 commit comments