feat(react): Document Sentry.captureReactException (#13108)

Co-authored-by: Alex Krawiec <[email protected]>

Author: AbhiPrasad

docs/platforms/javascript/common/usage/index.mdx

@@ -13,7 +13,7 @@ Key terms:
 - An _event_ is one instance of sending data to Sentry. Generally, this data is an error or exception.
 - An _issue_ is a grouping of similar events.
 - The reporting of an event is called _capturing_.
-  When an event is captured, it’s sent to Sentry.
+  When an event is captured, it's sent to Sentry.
 
 </Alert>
 

docs/platforms/javascript/guides/react/features/error-boundary.mdx

@@ -199,6 +199,24 @@ function App({ props }) {
 export default App;
 ```
 
+## Manually Capturing Errors
+
+If you don't want to use the Sentry Error Boundary component, you can use the `captureReactException` function to capture errors manually with your own Error Boundary. This will still ensure that the `componentStack` is linked to the error as detailed in the [Linked Errors](#linked-errors) section. The `Sentry.captureReactException` function requires React SDK `v9.8.0` or above.
+
+```javascript
+import * as Sentry from "@sentry/react";
+
+class ErrorBoundary extends React.Component {
+  componentDidCatch(error, info) {
+    Sentry.captureReactException(error, info);
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
+```
+
 ## Next Steps:
 
 - [Return to **Getting Started**](../../)

docs/platforms/javascript/guides/react/index.mdx

@@ -23,7 +23,9 @@ Select which Sentry features you'd like to install in addition to Error Monitori
 
 ## Install
 
-<OnboardingOptionButtons options={["error-monitoring", "performance", "session-replay"]} />
+<OnboardingOptionButtons
+  options={["error-monitoring", "performance", "session-replay"]}
+/>
 
 Sentry captures data by using an SDK within your application’s runtime.
 
@@ -45,7 +47,6 @@ Sentry supports multiple versions of React Router. To learn how to configure the
 
 Sentry should be initialized as early as possible in your application. We recommend putting the Sentry initialization code into its own file and including that file as the first import in your application entry point as shown in the example below:
 
-
 ```javascript {filename:instrument.js} {"onboardingOptions": {"performance": "3-8, 13-21, 24-30", "session-replay": "22, 33-39"}}
 import { useEffect } from "react";
 import * as Sentry from "@sentry/react";

platform-includes/capture-error/javascript.react.mdx

@@ -29,3 +29,42 @@ function App() {
   // ...
 }
 ```
+
+The React SDK exports an error boundary component that leverages [React component APIs](https://reactjs.org/docs/error-boundaries.html) to automatically catch and send JavaScript errors from inside a React component tree to Sentry. See the [React Error Boundary](/platforms/javascript/guides/react/features/error-boundary/) guide for more information.
+
+If you don't want to use the error boundary component, you can use the `captureReactException` function to capture errors manually. The `Sentry.captureReactException` function requires Sentry React SDK `v9.8.0` or above.
+
+```javascript
+import * as Sentry from "@sentry/react";
+
+class ErrorBoundary extends React.Component {
+  componentDidCatch(error, info) {
+    Sentry.captureReactException(error, info);
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
+```
+
+Starting with React 19, the `createRoot` and `hydrateRoot` methods from `react-dom` will expose error hooks that are used to capture errors automatically. To customize how errors are handled in specific error hooks, use the `Sentry.reactErrorHandler` method. The `Sentry.reactErrorHandler` method requires `v8.6.0` or above.
+
+```javascript
+import { createRoot } from "react-dom/client";
+
+const container = document.getElementById(“app”);
+const root = createRoot(container, {
+  // Callback called when an error is thrown and not caught by an ErrorBoundary.
+  onUncaughtError: Sentry.reactErrorHandler((error, errorInfo) => {
+    console.warn('Uncaught error', error, errorInfo.componentStack);
+  }),
+  // Callback called when React catches an error in an ErrorBoundary.
+  onCaughtError: Sentry.reactErrorHandler(),
+  // Callback called when React automatically recovers from errors.
+  onRecoverableError: Sentry.reactErrorHandler(),
+});
+root.render();
+```
+
+These hooks apply to all React components that are mounted to the container which is passed onto `createRoot`/`hydrateRoot`. For more precise control over error handling, we recommend adding an `ErrorBoundary` component to your application.