Suggest an editImprove this articleRefine the answer for “Types of errors in a React application”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Errors in a React application** fall into 5 categories: render errors, effect and lifecycle errors, event handler errors, asynchronous errors, and configuration/infrastructure errors. **Key point:** React by itself only catches errors that happen during render - everything else needs to be handled manually via try/catch and monitoring.Shown above the full answer for quick recall.Answer (EN)Image## All types of errors in a React application can be split into 5 categories: | Category | Where it happens | Example | |---|---|---| | 1. Render errors | while building JSX (during render) | Cannot read property 'name' of undefined | | 2. Effect and lifecycle errors | inside useEffect, useLayoutEffect, componentDidMount, etc. | an error calling an API, accessing an unmounted element | | 3. Errors in events and callbacks | on clicks, submits, inputs, etc. | onClick calls a function that throws | | 4. Asynchronous errors | in fetch, setTimeout, Promise, async/await | TypeError: Failed to fetch, UnhandledPromiseRejection | | 5. Infrastructure / configuration errors | during build, rendering, hydration, or server interaction | SSR hydration mismatch, module not found, import error, invalid props | --- ## 1. Render errors These occur during the render phase, when React calls a component (functional or class) to build the virtual tree. ### Code examples: ```javascript // data is undefined return <div>{data.name}</div>; // mapping over null return data.map(item => <p>{item}</p>); ``` ### Consequences: - render() is interrupted. - React "crashes" up to the nearest Error Boundary. - If there isn't one, the entire app unmounts (white screen of death). Solution: - Checks before rendering (if (!data) return null;) - Memoization and skeleton components. - Error Boundary around large sections. --- ## 2. Errors in effects (side effects) Errors that occur: - in useEffect() and useLayoutEffect() - in lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount) ### Code examples: ```javascript useEffect(() => { fetch("/api/data") .then(res => res.json()) .then(setData) .catch(() => setError(true)); // without catch - UnhandledPromiseRejection }, []); ``` ### Consequences: - The error doesn't break all of React, but it can stop the effect. - If the error isn't caught, it will show up in the console or in window.onunhandledrejection. Solution: - Always wrap asynchronous calls in try/catch. - Cancel effects on unmount (cleanup). - Use AbortController for network requests. --- ## 3. Errors in event handlers These occur on clicks, data entry, submits, and so on. ### Example: ```javascript <button onClick={() => doSomething(undefined.value)}>Click</button> ``` ### Behavior: - The error doesn't affect other components (React handles events through its synthetic system). - But the user can lose UI interaction. Solution: - try/catch inside handlers. - Logging (Sentry, GlitchTip, console.error). --- ## 4. Asynchronous errors Errors outside the React cycle: in Promise, fetch, async/await, timers, and so on. ### Code examples: ```javascript async function loadData() { const res = await fetch("/api/wrong-url"); // 404 → error const data = await res.json(); // throws an exception } ``` ### Behavior: - They're not caught by Error Boundary. - If not caught, you get an UnhandledPromiseRejection and the app crashes in production (especially with SSR). Solution: - try/catch around await. - .catch() on the Promise. - A global handler: ```javascript window.addEventListener("unhandledrejection", e => logError(e.reason)); ``` --- ## 5. Configuration / infrastructure errors Errors at the level of the build, routing, SSR, and dependencies. ### Code examples: - An incorrect route path (<Route path> doesn't match the URL) - An import error (Cannot find module) - A hydration mismatch with SSR (Warning: Text content did not match) - A build error in Webpack/Vite (Unexpected token) Solution: - Environment setup (env variables, paths, aliases) - Logging and monitoring - Tests for routes and SSR --- ## Additionally: logical errors Not always exceptions, but they lead to incorrect logic: - incorrect state during an update; - infinite loops due to incorrect dependencies in useEffect; - memory leaks (setState after unmounting); - incorrect keys in lists (key). Solution: - ESLint + React Hooks plugin - TypeScript (strict typing) - React DevTools + Profiler --- ## Ways to protect against errors | Tool | What it's for | |---|---| | Error Boundary | Catching render and lifecycle errors | | try/catch | Handling errors in events and async code | | window.onerror / onunhandledrejection | Global error catching | | Sentry / GlitchTip / LogRocket | Monitoring errors in production | | TypeScript + ESLint | Preventing logical errors | | React Testing Library / Jest | Testing edge cases | --- ## Summary: > A React application can have 5 main types of errors: > > 1. Render errors (JSX / undefined) > 2. Effect and lifecycle errors > 3. Event handler errors > 4. Asynchronous errors (fetch, Promise, async/await) > 5. Configuration and infrastructure errors (SSR, routing, build) React by itself doesn't catch every error, only those that happen during render. That's why protection is a combination of Error Boundaries, try/catch, and solid monitoring.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.