Capturing Errors and Events

Sentry's SDK hooks into your runtime environment and automatically reports errors, uncaught exceptions, and unhandled rejections as well as other types of errors depending on the platform.

The most common form of capturing is to capture errors. What can be captured as an error varies by platform. In general, if you have something that looks like an exception, it can be captured. For some SDKs, you can also omit the argument to captureException and Sentry will attempt to capture the current exception. It is also useful for manual reporting of errors or messages to Sentry.

While capturing an event, you can also record the breadcrumbs that lead up to that event. Breadcrumbs are different from events: they will not create an event in Sentry, but will be buffered until the next event is sent. Learn more about breadcrumbs in our Breadcrumbs documentation.

Capturing Errors

By including and configuring Sentry, our React SDK automatically attaches global handlers to capture uncaught exceptions and unhandled promise rejections, as described in the official ECMAScript 6 standard. You can disable this default behavior by changing the onunhandledrejection option to false in your GlobalHandlers integration and manually hook into each event handler, then call Sentry.captureException or Sentry.captureMessage directly.

You can pass an Error object to captureException() to get it captured as an event. It's also possible to pass non-Error objects and strings, but be aware that the resulting events in Sentry may be missing a stack trace.

import * as Sentry from "@sentry/react";

try {
  aFunctionThatMightFail();
} catch (err) {
  Sentry.captureException(err);
}

Sentry calls like captureException or captureMessage are side effects, so they should be wrapped in a useEffect hook to avoid triggering them on every render.

import * as Sentry from "@sentry/react";
import { useEffect } from "react";

function App() {
  const [info, error] = useQuery("/api/info");
  useEffect(() => {
    if (error) {
      Sentry.captureException(error);
    }
  }, [error]);

  // ...
}

The React SDK exports an error boundary component that leverages React component APIs to automatically catch and send JavaScript errors from inside a React component tree to Sentry. See the React 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.

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.

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.

Capturing Messages

Another common operation is to capture a bare message. A message is textual information that should be sent to Sentry. Typically, our SDKs don't automatically capture messages, but you can capture them manually.

Messages show up as issues on your issue stream, with the message as the issue name.

Sentry.captureMessage("Something went wrong");

// optionally specify the severity level:
// "fatal" | "error" | "warning" | "log" | "debug" | "info" (default)
Sentry.captureMessage("Something went wrong", "warning");