¿Cuándo debemos usar los componentes de límite de error? ¿Solo por falta de accesorios y cosas así?
Por ejemplo, imagine este gancho de obtención de API:
const useFetch = () => { ... const [error, setError] = useState(null); const method = async () => { try { await api.fetchData(); } catch(err) { setError(err); } }; useEffect(() => { method(); },[]); return { ..., error }; }Ahora, en un componente, solo hago:
const MyComponent = () => { const { error } = useFetch(); if (error) return <FallbackUI />; return <MainUI />; }¿Puedo usar un componente ErrorBoundary para manejar esta situación (errores de llamada de API) en lugar de renderizar condicionalmente?
¿Y si solo quiero mostrar una interfaz de usuario alternativa cuando falla mi método de obtención de datos y se recuperaron datos anteriormente?
Algo como:
const { data, getMoreData, error } = useFetchPosts(); // data is stateful inside the hook if (error && !data) return <FallbackUI />; return <MainUI data={data} />;He seguido el siguiente enfoque en mis proyectos que son todos ganchos/implementaciones de componentes funcionales.
estoy usando https://github.com/bvaughn/react-error-boundary
import { ErrorBoundary } from "react-error-boundary"; <ErrorBoundary FallbackComponent={ErrorFallback}> <MyComponent /> </ErrorBoundary> //reject the promise so it gets bubbled up const useFetch = () => { ... const [error, setError] = useState(null); const method = async () => { try { await api.fetchData(); } catch(err) { // setError(err); return Promise.reject(err); } }; useEffect(() => { method(); },[]); return { ..., error }; } function ErrorFallback({ error }: { error: any }) { return ( <> // you custom ui you'd like to return </> ); }EDITAR:
Por lo general, tengo esto en el nivel superior, por lo que suele ser una captura general para todas las excepciones no controladas. En otras palabras, envuelvo mi App.tsx en el archivo raíz index.tsx en un ErrorBoundary . Entonces, mi código se parece más a esto
... <ErrorBoundary FallbackComponent={ErrorFallback}> <SWRConfig ...> <React.StrictMode> <ScrollToTop></ScrollToTop> <App ... /> </React.StrictMode> </SWRConfig> </ErrorBoundary>