@@ -188,105 +188,6 @@ Check out the following example to see how to use `captureOwnerStack` to improve
188188- [ createRoot usage: Displaying Error Boundary errors] ( /reference/react-dom/client/createRoot#show-a-dialog-for-uncaught-errors )
189189- [ createRoot usage: Displaying a dialog for recoverable errors] ( /reference/react-dom/client/createRoot#displaying-a-dialog-for-recoverable-errors )
190190
191- ### Expanding error stacks {/* expanding-error-stacks* /}
192-
193- 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.
194- This can help trace the error especially when the error is caused by props. The Owner Stack helps trace the flow of props.
195-
196-
197- ``` js src/index.js [[1, 8, "error.stack"], [2, 7, "captureOwnerStack()"]]
198- import {captureOwnerStack } from ' react' ;
199- import {createRoot } from ' react-dom/client' ;
200-
201- const root = createRoot (document .getElementById (' root' ), {
202- onUncaughtError : (error , errorInfo ) => {
203- if (process .env .NODE_ENV !== ' production' ) {
204- const ownerStack = captureOwnerStack ();
205- error .stack += ownerStack;
206- }
207-
208- console .error (' Uncaught' , error);
209- },
210- }).render (< App / > );
211- ```
212-
213- <Sandpack >
214-
215- ``` js
216- function useCustomHook () {
217- throw new Error (' Boom!' );
218- }
219-
220- function Component () {
221- useCustomHook ();
222- }
223-
224- export default function App () {
225- return < Component / > ;
226- }
227- ```
228-
229- ``` js src/index.js
230- import {captureOwnerStack } from ' react' ;
231- import {createRoot } from ' react-dom/client' ;
232- import App from ' ./App.js' ;
233- import ' ./styles.css' ;
234-
235- const root = createRoot (document .getElementById (' root' ), {
236- onUncaughtError : (error , errorInfo ) => {
237- if (process .env .NODE_ENV !== ' production' ) {
238- const ownerStack = captureOwnerStack ();
239- error .stack =
240- // The stack is only split because these sandboxes don't implement
241- // ignore-listing 3rd party frames via sourcemaps.
242- // A framework would ignore-list stackframes from React via sourcemaps
243- // and then you could just `error.stack += ownerStack`.
244- // To learn more about ignore-listing see https://developer.chrome.com/docs/devtools/x-google-ignore-list
245- error .stack .split (' \n at react-stack-bottom-frame' )[0 ] + ownerStack;
246- }
247-
248- // The stacks are logged instead of showing them in the UI directly to
249- // highlight that browsers will apply sourcemaps to the logged stacks.
250- // Note that sourcemapping is only applied in the real browser console not
251- // in the fake one displayed on this page.
252- console .error (' Uncaught' , error);
253- },
254- }).render (< App / > );
255- ```
256-
257- ``` json package.json hidden
258- {
259- "dependencies" : {
260- "react" : " experimental" ,
261- "react-dom" : " experimental" ,
262- "react-scripts" : " latest"
263- },
264- "scripts" : {
265- "start" : " react-scripts start" ,
266- "build" : " react-scripts build" ,
267- "test" : " react-scripts test --env=jsdom" ,
268- "eject" : " react-scripts eject"
269- }
270- }
271- ```
272-
273- ``` html public/index.html hidden
274- <!DOCTYPE html>
275- <html lang =" en" >
276- <head >
277- <meta charset =" UTF-8" />
278- <meta name =" viewport" content =" width=device-width, initial-scale=1.0" />
279- <title >Document</title >
280- </head >
281- <body >
282- <p >Check the console output.</p >
283- <div id =" root" ></div >
284- </body >
285- </html >
286- ```
287-
288- </Sandpack >
289-
290191## Troubleshooting {/* troubleshooting* /}
291192
292193### The Owner Stack is ` null ` {/* the-owner-stack-is-null* /}
0 commit comments