reactjs - instalar - react js installation

Manejo de errores en las mejores prácticas de React.

Question

Cuando se procesa un componente en React (con muchos subcomponentes) y se produce un error JS por cualquier motivo, ¿cuál es la mejor manera de manejar esto? Claro que puedo detectar el error pero, en última instancia, es posible que no pueda hacerlo porque falta la información requerida. Puede validar de antemano con .isRequired en los propTypes pero eso es solo una advertencia de la consola cuando falla.

Answer 1

Por lo general, nunca deberías tener algo que pueda causar un error js. si está esperando datos del servidor, no los renderice. Además de eso, tendrías algún tipo de notificación / mensaje que muestra que aún no se ha cargado.

Entonces, por ejemplo, si tiene un componente que va a representar, puede condicionar componentes.

alias

render(){
let {serverData} = this.props;
return (
<div className="something">
{Boolean(serverData) && serverData.length > 0
? <MyComponent data={serverData} />
: <LoadingComponent />
}
</div>
)
}

Ahora, esto es solo un ejemplo rudimentario para describir de qué estoy hablando. Las excepciones de Javascript romperán tu aplicación de una sola página y nunca deberías tener ninguna . Si algo no es válido, redirigir a una página 404. Si un componente necesita datos, espere a que los datos se procesen.

Otra cosa importante es que si intentas acceder a algo como this.props.myData.obj.something.somethingelse probable que la ruta del objeto no siempre esté allí. debe asegurarse de que cada uno de ellos no esté definido o sea nulo. Yo uso lodash que tiene una función impresionante para esta cosa exacta

_.get(this.props, ''myData.obj.something.somethingelse'')` 

que devuelve undefined si alguna de esas claves no existe o es undefined / no es un objeto

Supongo que la moraleja de la historia es que debes ser proactivo en tu código para capturar cosas que podrían romperse y nunca asumir el tipo de variable, así como sus datos estarán allí :)

Answer 2

React 16 introduce un nuevo concepto llamado "límite de error" para manejar los errores que ocurren dentro de los componentes de React sin romper toda la aplicación.

Los límites de error son componentes de React que detectan errores de JavaScript en cualquier lugar de su árbol de componentes secundario, registran esos errores y muestran una IU alternativa en lugar del árbol de componentes que se estrelló.

Los componentes de límite de error se han hecho posibles con el nuevo método de ciclo de vida componentDidCatch(error, info) . No como otros métodos de ciclo de vida, esto se llamará solo si se produjo algún error durante el procesamiento, en los métodos de ciclo de vida o en los constructores de cualquier componente secundario (incluido todos los nietos) del componente.

En el código, el componente de límite de error será algo como lo siguiente.

class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidCatch(error, info) {
// Display fallback UI
this.setState({ hasError: true });
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return <h1>Error occurred!</h1>;
}
return this.props.children;
}
}

Podemos usar este componente de límite de error como un componente normal en nuestro código.

<ErrorBoundary>
<MyComponent />
</ErrorBoundary>

Ahora, si MyComponent lanza algún error de JavaScript durante la representación, en el método del ciclo de vida o en la construcción, ¡el componentDidCatch of Error Boundary se activará y cambiará el estado para mostrar que se Error occurred! mensaje en lugar del MyComponent roto.

Esta nueva funcionalidad viene con otra implicación importante que quería saber antes de migrar a React 16. Anteriormente, si se produce un error, deja la interfaz de usuario dañada, aunque normalmente no funciona como se espera hasta que vuelva a cargar la página. Sin embargo, en React 16, si un error no se ha manejado por algún límite de error, se desmontará toda la aplicación.

Debido a esto, agregar límites de error a su aplicación de manera adecuada le dará una mejor experiencia a su usuario. Por lo tanto, los usuarios podrán interactuar con una parte de su aplicación aunque algunas áreas de la interfaz de usuario se hayan bloqueado.

Consulte la documentación oficial de React sobre los límites de error o esta publicación oficial del blog para obtener más información. Cubren casi todo lo que necesitas saber sobre esta nueva característica.