Skip to content

Commit c314e2c

Browse files
committed
Remove console patching section
It's just a (bad) polyfill for what RDT is doing. Better to lean on RDT for owner stacks in console calls.
1 parent 1e261fc commit c314e2c

File tree

1 file changed

+0
-99
lines changed

1 file changed

+0
-99
lines changed

src/content/reference/react/captureOwnerStack.md

Lines changed: 0 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Comments
 (0)