experimental -> Canary

Author: eps1lon

src/components/MDX/MDXComponents.tsx

@@ -120,20 +120,6 @@ const CanaryBadge = ({title}: {title: string}) => (
   </span>
 );
 
-const ExperimentalBadge = ({title}: {title: string}) => (
-  <span
-    title={title}
-    className={
-      'text-base font-display px-1 py-0.5 font-bold bg-gray-10 dark:bg-gray-60 text-gray-60 dark:text-gray-10 rounded'
-    }>
-    <IconCanary
-      size="s"
-      className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'}
-    />
-    Experimental only
-  </span>
-);
-
 const NextMajorBadge = ({title}: {title: string}) => (
   <span
     title={title}
@@ -523,7 +509,6 @@ export const MDXComponents = {
   Note,
   Canary,
   CanaryBadge,
-  ExperimentalBadge,
   NextMajor,
   NextMajorBadge,
   RSC,

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

@@ -349,7 +349,7 @@ It is uncommon to call `render` multiple times. Usually, your components will [u
 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:
 
 ```js [[1, 8, "onUncaughtError"], [2, 8, "error", 1], [3, 8, "errorInfo"], [4, 12, "componentStack"], [5, 13, "captureOwnerStack()"]]
-// captureOwnerStack is only available in react@experimental.
+// captureOwnerStack is only available in react@canary.
 import { captureOwnerStack } from 'react';
 import { createRoot } from 'react-dom/client';
 
@@ -374,7 +374,7 @@ The <CodeStep step={1}>onUncaughtError</CodeStep> option is a function called wi
 1. The <CodeStep step={2}>error</CodeStep> that was thrown.
 2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
 
-<ExperimentalBadge /> With <CodeStep step={5}>[`captureOwnerStack`](/reference/react/captureOwnerStack)</CodeStep> you can include the Owner Stack during development.
+<CanaryBadge /> With <CodeStep step={5}>[`captureOwnerStack`](/reference/react/captureOwnerStack)</CodeStep> you can include the Owner Stack during development.
 
 You can use the `onUncaughtError` root option to display error dialogs:
 
@@ -543,7 +543,7 @@ export function reportRecoverableError({error, cause, componentStack, ownerStack
 ```
 
 ```js src/index.js active
-// captureOwnerStack is only available in react@experimental.
+// captureOwnerStack is only available in react@canary.
 import { captureOwnerStack } from 'react';
 import { createRoot } from "react-dom/client";
 import App from "./App.js";
@@ -613,7 +613,7 @@ export default function App() {
 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):
 
 ```js [[1, 8, "onCaughtError"], [2, 8, "error", 1], [3, 8, "errorInfo"], [4, 12, "componentStack"], [5, 13, "captureOwnerStack()"]]
-// captureOwnerStack is only available in react@experimental.
+// captureOwnerStack is only available in react@canary.
 import { captureOwnerStack } from 'react';
 import { createRoot } from 'react-dom/client';
 
@@ -638,7 +638,7 @@ The <CodeStep step={1}>onCaughtError</CodeStep> option is a function called with
 1. The <CodeStep step={2}>error</CodeStep> that was caught by the boundary.
 2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
 
-<ExperimentalBadge /> With <CodeStep step={5}>[`captureOwnerStack`](/reference/react/captureOwnerStack)</CodeStep> you can include the Owner Stack during development.
+<CanaryBadge /> With <CodeStep step={5}>[`captureOwnerStack`](/reference/react/captureOwnerStack)</CodeStep> you can include the Owner Stack during development.
 
 You can use the `onCaughtError` root option to display error dialogs or filter known errors from logging:
 
@@ -807,7 +807,7 @@ export function reportRecoverableError({error, cause, componentStack, ownerStack
 ```
 
 ```js src/index.js active
-// captureOwnerStack is only available in react@experimental.
+// captureOwnerStack is only available in react@canary.
 import {captureOwnerStack} from 'react';
 import { createRoot } from "react-dom/client";
 import App from "./App.js";
@@ -904,7 +904,7 @@ function Throw({error}) {
 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:
 
 ```js [[1, 8, "onRecoverableError"], [2, 8, "error", 1], [3, 12, "error.cause"], [4, 8, "errorInfo"], [5, 13, "componentStack"], [6, 14, "captureOwnerStack()"]]
-// captureOwnerStack is only available in react@experimental.
+// captureOwnerStack is only available in react@canary.
 import { captureOwnerStack } from 'react';
 import { createRoot } from 'react-dom/client';
 
@@ -930,7 +930,7 @@ The <CodeStep step={1}>onRecoverableError</CodeStep> option is a function called
 1. The <CodeStep step={2}>error</CodeStep> that React throws. Some errors may include the original cause as <CodeStep step={3}>error.cause</CodeStep>. 
 2. An <CodeStep step={4}>errorInfo</CodeStep> object that contains the <CodeStep step={5}>componentStack</CodeStep> of the error.
 
-<ExperimentalBadge /> With <CodeStep step={6}>[`captureOwnerStack`](/reference/react/captureOwnerStack)</CodeStep> you can include the Owner Stack during development.
+<CanaryBadge /> With <CodeStep step={6}>[`captureOwnerStack`](/reference/react/captureOwnerStack)</CodeStep> you can include the Owner Stack during development.
 
 You can use the `onRecoverableError` root option to display error dialogs:
 
@@ -1099,7 +1099,7 @@ export function reportRecoverableError({error, cause, componentStack, ownerStack
 ```
 
 ```js src/index.js active
-// captureOwnerStack is only available in react@experimental.
+// captureOwnerStack is only available in react@canary.
 import {captureOwnerStack} from 'react'
 import { createRoot } from "react-dom/client";
 import App from "./App.js";

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

@@ -379,7 +379,7 @@ It is uncommon to call [`root.render`](#root-render) on a hydrated root. Usually
 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:
 
 ```js [[1, 9, "onUncaughtError"], [2, 9, "error", 1], [3, 9, "errorInfo"], [4, 13, "componentStack"], [5, 14, "captureOwnerStack()"]]
-// captureOwnerStack is only available in react@experimental.
+// captureOwnerStack is only available in react@canary.
 import { captureOwnerStack } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 
@@ -404,7 +404,7 @@ The <CodeStep step={1}>onUncaughtError</CodeStep> option is a function called wi
 1. The <CodeStep step={2}>error</CodeStep> that was thrown.
 2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
 
-<ExperimentalBadge /> With <CodeStep step={5}>[`captureOwnerStack`](/reference/react/captureOwnerStack)</CodeStep> you can include the Owner Stack during development.
+<CanaryBadge /> With <CodeStep step={5}>[`captureOwnerStack`](/reference/react/captureOwnerStack)</CodeStep> you can include the Owner Stack during development.
 
 You can use the `onUncaughtError` root option to display error dialogs:
 
@@ -576,7 +576,7 @@ export function reportRecoverableError({error, cause, componentStack, ownerStack
 ```
 
 ```js src/index.js active
-// captureOwnerStack is only available in react@experimental.
+// captureOwnerStack is only available in react@canary.
 import { captureOwnerStack } from 'react';
 import { hydrateRoot } from "react-dom/client";
 import App from "./App.js";
@@ -646,7 +646,7 @@ export default function App() {
 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):
 
 ```js [[1, 9, "onCaughtError"], [2, 9, "error", 1], [3, 9, "errorInfo"], [4, 13, "componentStack"], [5, 14, "captureOwnerStack()"]]
-// captureOwnerStack is only available in react@experimental.
+// captureOwnerStack is only available in react@canary.
 import { captureOwnerStack } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 
@@ -671,7 +671,7 @@ The <CodeStep step={1}>onCaughtError</CodeStep> option is a function called with
 1. The <CodeStep step={2}>error</CodeStep> that was caught by the boundary.
 2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
 
-<ExperimentalBadge /> With <CodeStep step={5}>[`captureOwnerStack`](/reference/react/captureOwnerStack)</CodeStep> you can include the Owner Stack during development.
+<CanaryBadge /> With <CodeStep step={5}>[`captureOwnerStack`](/reference/react/captureOwnerStack)</CodeStep> you can include the Owner Stack during development.
 
 You can use the `onCaughtError` root option to display error dialogs or filter known errors from logging:
 
@@ -843,7 +843,7 @@ export function reportRecoverableError({error, cause, componentStack}) {
 ```
 
 ```js src/index.js active
-// captureOwnerStack is only available in react@experimental.
+// captureOwnerStack is only available in react@canary.
 import {captureOwnerStack} from 'react';
 import { hydrateRoot } from "react-dom/client";
 import App from "./App.js";
@@ -939,7 +939,7 @@ function Throw({error}) {
 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:
 
 ```js [[1, 9, "onRecoverableError"], [2, 9, "error", 1], [3, 13, "error.cause", 1], [4, 9, "errorInfo"], [5, 14, "componentStack"], [6, 15, "captureOwnerStack()"]]
-// captureOwnerStack is only available in react@experimental.
+// captureOwnerStack is only available in react@canary.
 import { captureOwnerStack } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 
@@ -965,7 +965,7 @@ The <CodeStep step={1}>onRecoverableError</CodeStep> option is a function called
 1. The <CodeStep step={2}>error</CodeStep> React throws. Some errors may include the original cause as <CodeStep step={3}>error.cause</CodeStep>.
 2. An <CodeStep step={4}>errorInfo</CodeStep> object that contains the <CodeStep step={5}>componentStack</CodeStep> of the error.
 
-<ExperimentalBadge /> With <CodeStep step={6}>[`captureOwnerStack`](/reference/react/captureOwnerStack)</CodeStep> you can include the Owner Stack during development.
+<CanaryBadge /> With <CodeStep step={6}>[`captureOwnerStack`](/reference/react/captureOwnerStack)</CodeStep> you can include the Owner Stack during development.
 
 You can use the `onRecoverableError` root option to display error dialogs for hydration mismatches:
 
@@ -1137,7 +1137,7 @@ export function reportRecoverableError({error, cause, componentStack, ownerStack
 ```
 
 ```js src/index.js active
-// captureOwnerStack is only available in react@experimental.
+// captureOwnerStack is only available in react@canary.
 import {captureOwnerStack} from 'react'
 import { hydrateRoot } from "react-dom/client";
 import App from "./App.js";

src/content/reference/react/Component.md

@@ -1273,7 +1273,7 @@ By default, if your application throws an error during rendering, React will rem
 
 To implement an error boundary component, you need to provide [`static getDerivedStateFromError`](#static-getderivedstatefromerror) which lets you update state in response to an error and display an error message to the user. You can also optionally implement [`componentDidCatch`](#componentdidcatch) to add some extra logic, for example, to log the error to an analytics service.
 
-<ExperimentalBadge /> With [`captureOwnerStack`](/reference/react/captureOwnerStack) you can include the Owner Stack during development.
+<CanaryBadge /> With [`captureOwnerStack`](/reference/react/captureOwnerStack) you can include the Owner Stack during development.
 
 ```js {9-12,14-27}
 import * as React from 'react';
@@ -1298,7 +1298,7 @@ class ErrorBoundary extends React.Component {
       //   in div (created by App)
       //   in App
       info.componentStack,
-      // Only available in react@experimental.
+      // Only available in react@canary.
       // Warning: Owner Stack is not available in production.
       React.captureOwnerStack(),
     );

src/content/reference/react/captureOwnerStack.md

@@ -2,17 +2,11 @@
 title: captureOwnerStack
 ---
 
-<Wip>
+<Canary>
 
-**This API is experimental and is not available in a stable version of React yet.**
+The `captureOwnerStack` API is currently only available in React's Canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
 
-You can try it by upgrading React packages to the most recent experimental version:
-
-- `react@experimental`
-
-Experimental versions of React may contain bugs. Don't use them in production.
-
-</Wip>
+</Canary>
 
 <Intro>