Skip to content

Commit ab1b189

Browse files
eps1loneps1lon
committed
Align codestep previews with sandboxes
1 parent cd9a906 commit ab1b189

File tree

2 files changed

+83
-90
lines changed

2 files changed

+83
-90
lines changed

‎src/content/reference/react-dom/client/createRoot.md

Lines changed: 41 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -348,25 +348,24 @@ It is uncommon to call `render` multiple times. Usually, your components will [u
348348
349349
By default, React will log all uncaught errors to the console. To implement your own error reporting, you can provide the optional `onUncaughtError` root option:
350350
351-
```js [[1, 8, "onUncaughtError"], [2, 8, "error", 1], [3, 8, "errorInfo"], [4, 12, "componentStack"], [5, 13, "captureOwnerStack()"]]
351+
```js [[1, 8, "onUncaughtError"], [2, 8, "error", 1], [3, 8, "errorInfo"], [4, 12, "componentStack", 15], [5, 13, "captureOwnerStack()"]]
352352
// captureOwnerStack is only available in react@canary.
353-
import { captureOwnerStack } from 'react';
354-
import { createRoot } from 'react-dom/client';
353+
import { captureOwnerStack } from "react";
354+
import { createRoot } from "react-dom/client";
355+
import { reportUncaughtError } from "./reportError";
355356

356-
const root = createRoot(
357-
document.getElementById('root'),
358-
{
359-
onUncaughtError: (error, errorInfo) => {
360-
console.error(
361-
'Uncaught error',
357+
const container = document.getElementById("root");
358+
const root = createRoot(container, {
359+
onUncaughtError: (error, errorInfo) => {
360+
if (error.message !== "Known error") {
361+
reportUncaughtError({
362362
error,
363-
errorInfo.componentStack,
364-
captureOwnerStack()
365-
);
363+
componentStack: errorInfo.componentStack,
364+
ownerStack: captureOwnerStack(),
365+
});
366366
}
367-
}
368-
);
369-
root.render(<App />);
367+
},
368+
});
370369
```
371370
372371
The <CodeStep step={1}>onUncaughtError</CodeStep> option is a function called with two arguments:
@@ -612,25 +611,24 @@ export default function App() {
612611
613612
By default, React will log all errors caught by an Error Boundary to `console.error`. To override this behavior, you can provide the optional `onCaughtError` root option to handle errors caught by an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary):
614613
615-
```js [[1, 8, "onCaughtError"], [2, 8, "error", 1], [3, 8, "errorInfo"], [4, 12, "componentStack"], [5, 13, "captureOwnerStack()"]]
614+
```js [[1, 8, "onCaughtError"], [2, 8, "error", 1], [3, 8, "errorInfo"], [4, 12, "componentStack", 15], [5, 13, "captureOwnerStack()"]]
616615
// captureOwnerStack is only available in react@canary.
617-
import { captureOwnerStack } from 'react';
618-
import { createRoot } from 'react-dom/client';
616+
import {captureOwnerStack} from 'react';
617+
import { createRoot } from "react-dom/client";
618+
import {reportCaughtError} from "./reportError";
619619

620-
const root = createRoot(
621-
document.getElementById('root'),
622-
{
623-
onCaughtError: (error, errorInfo) => {
624-
console.error(
625-
'Caught error',
626-
error,
627-
errorInfo.componentStack,
620+
const container = document.getElementById("root");
621+
const root = createRoot(container, {
622+
onCaughtError: (error, errorInfo) => {
623+
if (error.message !== 'Known error') {
624+
reportCaughtError({
625+
error,
626+
componentStack: errorInfo.componentStack,
628627
ownerStack: captureOwnerStack()
629-
);
628+
});
630629
}
631630
}
632-
);
633-
root.render(<App />);
631+
});
634632
```
635633
636634
The <CodeStep step={1}>onCaughtError</CodeStep> option is a function called with two arguments:
@@ -903,26 +901,23 @@ function Throw({error}) {
903901
904902
React may automatically render a component a second time to attempt to recover from an error thrown in render. If successful, React will log a recoverable error to the console to notify the developer. To override this behavior, you can provide the optional `onRecoverableError` root option:
905903
906-
```js [[1, 8, "onRecoverableError"], [2, 8, "error", 1], [3, 12, "error.cause"], [4, 8, "errorInfo"], [5, 13, "componentStack"], [6, 14, "captureOwnerStack()"]]
904+
```js [[1, 8, "onRecoverableError"], [2, 8, "error", 1], [3, 11, "error.cause"], [4, 8, "errorInfo"], [5, 12, "componentStack", 15], [6, 13, "captureOwnerStack()"]]
907905
// captureOwnerStack is only available in react@canary.
908-
import { captureOwnerStack } from 'react';
909-
import { createRoot } from 'react-dom/client';
906+
import {captureOwnerStack} from 'react'
907+
import { createRoot } from "react-dom/client";
908+
import {reportRecoverableError} from "./reportError";
910909

911-
const root = createRoot(
912-
document.getElementById('root'),
913-
{
914-
onRecoverableError: (error, errorInfo) => {
915-
console.error(
916-
'Recoverable error',
917-
error,
918-
error.cause,
919-
errorInfo.componentStack,
920-
captureOwnerStack(),
921-
);
922-
}
910+
const container = document.getElementById("root");
911+
const root = createRoot(container, {
912+
onRecoverableError: (error, errorInfo) => {
913+
reportRecoverableError({
914+
error,
915+
cause: error.cause,
916+
componentStack: errorInfo.componentStack,
917+
ownerStack: captureOwnerStack(),
918+
});
923919
}
924-
);
925-
root.render(<App />);
920+
});
926921
```
927922
928923
The <CodeStep step={1}>onRecoverableError</CodeStep> option is a function called with two arguments:

‎src/content/reference/react-dom/client/hydrateRoot.md

Lines changed: 42 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -378,25 +378,25 @@ It is uncommon to call [`root.render`](#root-render) on a hydrated root. Usually
378378
379379
By default, React will log all uncaught errors to the console. To implement your own error reporting, you can provide the optional `onUncaughtError` root option:
380380
381-
```js [[1, 9, "onUncaughtError"], [2, 9, "error", 1], [3, 9, "errorInfo"], [4, 13, "componentStack"], [5, 14, "captureOwnerStack()"]]
381+
```js [[1, 9, "onUncaughtError"], [2, 9, "error", 1], [3, 9, "errorInfo"], [4, 13, "componentStack", 15], [5, 14, "captureOwnerStack()"]]
382382
// captureOwnerStack is only available in react@canary.
383383
import { captureOwnerStack } from 'react';
384-
import { hydrateRoot } from 'react-dom/client';
384+
import { hydrateRoot } from "react-dom/client";
385+
import App from "./App";
386+
import {reportUncaughtError} from "./reportError";
385387

386-
hydrateRoot(
387-
document.getElementById('root'),
388-
<App />,
389-
{
390-
onUncaughtError: (error, errorInfo) => {
391-
console.error(
392-
'Uncaught error',
388+
const container = document.getElementById("root");
389+
hydrateRoot(container, <App />, {
390+
onUncaughtError: (error, errorInfo) => {
391+
if (error.message !== 'Known error') {
392+
reportUncaughtError({
393393
error,
394-
errorInfo.componentStack,
395-
captureOwnerStack()
396-
);
394+
componentStack: errorInfo.componentStack,
395+
ownerStack: captureOwnerStack()
396+
});
397397
}
398398
}
399-
);
399+
});
400400
```
401401
402402
The <CodeStep step={1}>onUncaughtError</CodeStep> option is a function called with two arguments:
@@ -579,7 +579,7 @@ export function reportRecoverableError({error, cause, componentStack, ownerStack
579579
// captureOwnerStack is only available in react@canary.
580580
import { captureOwnerStack } from 'react';
581581
import { hydrateRoot } from "react-dom/client";
582-
import App from "./App.js";
582+
import App from "./App";
583583
import {reportUncaughtError} from "./reportError";
584584
import "./styles.css";
585585
import {renderToString} from 'react-dom/server';
@@ -645,25 +645,25 @@ export default function App() {
645645
646646
By default, React will log all errors caught by an Error Boundary to `console.error`. To override this behavior, you can provide the optional `onCaughtError` root option for errors caught by an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary):
647647
648-
```js [[1, 9, "onCaughtError"], [2, 9, "error", 1], [3, 9, "errorInfo"], [4, 13, "componentStack"], [5, 14, "captureOwnerStack()"]]
648+
```js [[1, 9, "onCaughtError"], [2, 9, "error", 1], [3, 9, "errorInfo"], [4, 13, "componentStack", 15], [5, 14, "captureOwnerStack()"]]
649649
// captureOwnerStack is only available in react@canary.
650-
import { captureOwnerStack } from 'react';
651-
import { hydrateRoot } from 'react-dom/client';
650+
import {captureOwnerStack} from 'react';
651+
import { hydrateRoot } from "react-dom/client";
652+
import App from "./App.js";
653+
import {reportCaughtError} from "./reportError";
652654

653-
hydrateRoot(
654-
document.getElementById('root'),
655-
<App />,
656-
{
657-
onCaughtError: (error, errorInfo) => {
658-
console.error(
659-
'Caught error',
655+
const container = document.getElementById("root");
656+
hydrateRoot(container, <App />, {
657+
onCaughtError: (error, errorInfo) => {
658+
if (error.message !== 'Known error') {
659+
reportCaughtError({
660660
error,
661-
errorInfo.componentStack,
661+
componentStack: errorInfo.componentStack,
662662
ownerStack: captureOwnerStack()
663-
);
663+
});
664664
}
665665
}
666-
);
666+
});
667667
```
668668
669669
The <CodeStep step={1}>onCaughtError</CodeStep> option is a function called with two arguments:
@@ -938,26 +938,24 @@ function Throw({error}) {
938938
939939
When React encounters a hydration mismatch, it will automatically attempt to recover by rendering on the client. By default, React will log hydration mismatch errors to `console.error`. To override this behavior, you can provide the optional `onRecoverableError` root option:
940940
941-
```js [[1, 9, "onRecoverableError"], [2, 9, "error", 1], [3, 13, "error.cause", 1], [4, 9, "errorInfo"], [5, 14, "componentStack"], [6, 15, "captureOwnerStack()"]]
941+
```js [[1, 9, "onRecoverableError"], [2, 9, "error", 1], [3, 12, "error.cause", 1], [4, 9, "errorInfo"], [5, 13, "componentStack", 15], [6, 14, "captureOwnerStack()"]]
942942
// captureOwnerStack is only available in react@canary.
943-
import { captureOwnerStack } from 'react';
944-
import { hydrateRoot } from 'react-dom/client';
943+
import {captureOwnerStack} from 'react'
944+
import { hydrateRoot } from "react-dom/client";
945+
import App from "./App.js";
946+
import {reportRecoverableError} from "./reportError";
945947

946-
const root = hydrateRoot(
947-
document.getElementById('root'),
948-
<App />,
949-
{
950-
onRecoverableError: (error, errorInfo) => {
951-
console.error(
952-
'Caught error',
953-
error,
954-
error.cause,
955-
errorInfo.componentStack,
956-
captureOwnerStack()
957-
);
958-
}
948+
const container = document.getElementById("root");
949+
const root = hydrateRoot(container, <App />, {
950+
onRecoverableError: (error, errorInfo) => {
951+
reportRecoverableError({
952+
error,
953+
cause: error.cause,
954+
componentStack: errorInfo.componentStack,
955+
ownerStack: captureOwnerStack()
956+
});
959957
}
960-
);
958+
});
961959
```
962960
963961
The <CodeStep step={1}>onRecoverableError</CodeStep> option is a function called with two arguments:

0 commit comments

Comments
 (0)