ErrorBoundary

src/App.jsx

@@ -1,67 +1,112 @@
-import React, { useState, useReducer, useRef, memo } from 'react'
+import React from 'react'
 
-function tasksReducer(state, action) {
+class ErrorBoundary extends React.Component {
-    switch(action.type) {
+    constructor(props) {
-        case 'ADD_TASK':
+        super(props);
-            return [...state, action.payload]
+        this.state = {hasError: false};
-        case 'TOGGLE_TASK':
+    }
-            return state.map(task => task.id === action.payload ? {...task, complite: !task.complite} : task)
+    
-        case 'REMOVE_TASK':
+    static getDerivedStateFromError(error) {
-            return state.filter(task => task.id !== action.payload)
+        return { hasError: true }
-        default:
+    }
-            return state
+    
+    componentDidCatch(error,info) {
+        console.log(error,info);
+    }
+    
+    handlerReset = () => {
+        this.setState({hasError: false});
+    }
+    
+    render() {
+        if (this.state.hasError) {
+            return (
+                <div>
+                    <h1>Что то поломалось</h1>
+                    <button onClick={this.handlerReset}>Повторить</button>
+                </div>)
+        }
+        return this.props.children;
     }
 }
 
-const TaskList = memo(function TaskList({tasks, onToggle, onRemove}) {
+class AdvancedErrorBoundary extends React.Component {
-    console.log("Rendred")
+    constructor(props) {
-    return (
+        super(props);
-        <ul>
+        this.state = {
-        {tasks.map(({id, text, complite}) => (
+            hasError: false,
-                <li key={id}
+            error: null,
-                    style={{textDecoration: complite ? 'line-through' : 'none' }}>
+            errorInfo: null
-                    <input type="checkbox" checked={complite} onChange={()=>onToggle(id)} />
-                    {text}
-                    <button onClick={()=> onRemove(id)} style={{marginLeft: 10}}>
-                        Удалить
-                    </button>
-                </li>
-            ))}
-        </ul>
-    )
-})
-
-function App() {
-    const [tasks, dispatch] = useReducer(tasksReducer,[])
-    const [input,setInput] = useState('')
-    const [error,setError] = useState('')
-    const inputRef = useRef(null)
-    
-    const addTask = () => {
-        if (input.trim() === '') {
-            setError('Пустой текст задачи')
-            return
         }
-        setError('')
-        dispatch({
-            type: 'ADD_TASK',
-            payload: {id: Date.now(), text: input.trim(), complite: false }
-        })
-        setInput('')
-        inputRef.current.focus()
     }
     
-	return (
+    static getDerivedStateFromError(error) {
-		<div style={{padding: 20}}>
+        return { hasErorr: true }
-			<h1>Список дел</h1>
+    }
-			<input ref={inputRef} value={input} onChange={e => setInput(e.target.value)} />
-			<button onClick={addTask}>Добавить</button>
-            {error && <p style={{color: 'red'}}>{error}</p>}
     
-            <TaskList tasks={tasks} 
+    componentDidCatch(error, info) {
-                onToggle={id => dispatch({type: 'TOGGLE_TASK', payload: id})}
+        this.setState({ 
-                onRemove={id => dispatch({type: 'REMOVE_TASK', payload: id})} />
+            error: error,
-		</div>
+            errorInfo: info
+        })
+    }
+    
+    handleReset = () => {
+        this.setState({
+            hasError:false,
+            error: null,
+            errorInfo:null
+        });
+    }
+    
+    render() {
+        if(this.state.hasError) {
+            console.log('Error');
+            return (
+                <div>
+                    <h2>Произошла ошибка</h2>
+                    <p>Извеняемся, работаем, исправляем. Разработчика привязали к батарее</p>
+                    <button onClick={this.handleReset}>Попробовать снова</button>
+                </div>
+            )
+        }
+        //Если ошибок нет, то рендрим дочерние объекты
+        return this.props.children
+    }
+}
+
+function ProblemComponent() {
+    const [counter,setCounter] = React.useState(0)
+    
+    const handlerClick = () => setCounter(counter + 1)
+    
+    React.useEffect(() => {
+        if (counter > 5) {
+            throw new Error("Ошибка в компоненте");
+        }
+    },[counter]);
+    return (
+        <div>
+            <h2>Счетчик: {counter}</h2>
+            <button onClick={handlerClick}>Прибавить</button>
+        </div>
+    )
+}
+
+function App() {
+	return (
+		<>
+			<h1>Обработка ошибок в компонентах</h1>
+            <ErrorBoundary>
+                <ProblemComponent />
+            </ErrorBoundary>
+            <ErrorBoundary>
+                <ProblemComponent />
+            </ErrorBoundary>
+            <ErrorBoundary>
+                <ProblemComponent />
+            </ErrorBoundary>
+		</>
 	)
 }