Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

219
Vistas
How to handle uncaughtException in react and render a simple "internal bug" message to the UI?

On the node side,

// Event 'uncaughtException'
process.on('uncaughtException', (error, source) => {
   fs.writeSync(process.stderr.fd, error, source);
});

What is the equivalent of the above for the frontend with ReacT?

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

The closest concept of uncoughtException in React is called "Error Boundaries":
https://reactjs.org/docs/error-boundaries.html

These elements will catch any rendering error which happen within their subtree.
Within the render method you can display some kind of "internal error" message.

about 4 years ago · Juan Pablo Isaza Denunciar

0

React 16 introduced error boundaries via a class component lifecycle method: componentDidCatch, however there are some caveats that you should read about in the documentation below.

  • https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries

componentDidCatch

/*
* Implementation
*/
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}


/*
* Usage
*/
<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

react-error-boundary

However, instead of implementing the above, I'd highly suggest using something like react-error-boundary from Brian Vaughn.

It's flexible, allows for error recovery, and doesn't outwardly rely on any React lifecycle methods.

  • https://github.com/bvaughn/react-error-boundary
import {ErrorBoundary} from 'react-error-boundary'

const ErrorFallback = () => <div>Something went wrong</div>

const myErrorHandler = (error: Error, info: {componentStack: string}) => {
  // Do something with the error
  // E.g. log to an error logging client here
}

const ui = (
  <ErrorBoundary FallbackComponent={ErrorFallback} onError={myErrorHandler}>
    <ComponentThatMayError />
  </ErrorBoundary>,
)
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda