@@ -188,105 +188,6 @@ Check out the following example to see how to use `captureOwnerStack` to improve
188
188
- [ createRoot usage: Displaying Error Boundary errors] ( /reference/react-dom/client/createRoot#show-a-dialog-for-uncaught-errors )
189
189
- [ createRoot usage: Displaying a dialog for recoverable errors] ( /reference/react-dom/client/createRoot#displaying-a-dialog-for-recoverable-errors )
190
190
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
-
290
191
## Troubleshooting {/* troubleshooting* /}
291
192
292
193
### The Owner Stack is ` null ` {/* the-owner-stack-is-null* /}
0 commit comments