Error Handling

function UserProfile({ userId }) {
  const [user, setUser] = React.useState(null)
  
  React.useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data))
    // ❌ No error handling!
  }, [userId])
  
  // ❌ What if user is null or undefined?
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  )
}

// Problems:
// - App crashes if fetch fails
// - App crashes if user is null
// - User sees blank screen
// - No feedback about what went wrong

function UserProfile({ userId }) {
  const [user, setUser] = React.useState(null)
  const [loading, setLoading] = React.useState(true)
  const [error, setError] = React.useState(null)
  
  React.useEffect(() => {
    setLoading(true)
    setError(null)
    
    fetch(`/api/users/${userId}`)
      .then(res => {
        if (!res.ok) throw new Error('Failed to fetch user')
        return res.json()
      })
      .then(data => {
        setUser(data)
        setLoading(false)
      })
      .catch(err => {
        setError(err.message)
        setLoading(false)
      })
  }, [userId])
  
  if (loading) return <div>Loading...</div>
  if (error) return <div>Error: {error}</div>
  if (!user) return <div>User not found</div>
  
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  )
}

// Benefits:
// ✅ App doesn't crash
// ✅ User sees helpful messages
// ✅ Clear loading state
// ✅ Graceful degradation

import React from 'react'

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { hasError: false, error: null, errorInfo: null }
  }
  
  // Called when error is thrown
  static getDerivedStateFromError(error) {
    // Update state to show fallback UI
    return { hasError: true }
  }
  
  // Called after error is caught
  componentDidCatch(error, errorInfo) {
    // Log error to error reporting service
    console.error('Error caught by boundary:', error, errorInfo)
    
    // Store error details
    this.setState({
      error: error,
      errorInfo: errorInfo
    })
    
    // Send to error tracking service
    // logErrorToService(error, errorInfo)
  }
  
  render() {
    if (this.state.hasError) {
      // Fallback UI
      return (
        <div className="error-container">
          <h1>Something went wrong</h1>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}
            <br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      )
    }
    
    // No error, render children normally
    return this.props.children
  }
}

export default ErrorBoundary

// Usage:
function App() {
  return (
    <ErrorBoundary>
      <UserDashboard />
    </ErrorBoundary>
  )
}

// If UserDashboard or any child throws error:
// 1. Error boundary catches it
// 2. Shows fallback UI
// 3. Rest of app keeps working!

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { hasError: false, error: null }
  }
  
  static getDerivedStateFromError(error) {
    return { hasError: true, error }
  }
  
  componentDidCatch(error, errorInfo) {
    console.error('Error:', error, errorInfo)
  }
  
  // Reset error state
  resetError = () => {
    this.setState({ hasError: false, error: null })
  }
  
  render() {
    if (this.state.hasError) {
      return (
        <div className="error-boundary">
          <h2>Oops! Something went wrong</h2>
          <p>{this.state.error?.message}</p>
          <button onClick={this.resetError}>
            Try Again
          </button>
        </div>
      )
    }
    
    return this.props.children
  }
}

// With custom fallback:
function App() {
  return (
    <ErrorBoundary fallback={<CustomErrorPage />}>
      <Dashboard />
    </ErrorBoundary>
  )
}

// Catches all errors, shows full-page error
function App() {
  return (
    <ErrorBoundary fallback={<FullPageError />}>
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </Router>
    </ErrorBoundary>
  )
}

// Pros: Simple, catches everything
// Cons: Any error breaks entire app

// Each route has its own boundary
function App() {
  return (
    <Router>
      <Routes>
        <Route 
          path="/" 
          element={
            <ErrorBoundary fallback={<RouteError />}>
              <Home />
            </ErrorBoundary>
          } 
        />
        <Route 
          path="/dashboard" 
          element={
            <ErrorBoundary fallback={<RouteError />}>
              <Dashboard />
            </ErrorBoundary>
          } 
        />
      </Routes>
    </Router>
  )
}

// Pros: Errors isolated to routes
// Cons: More boundaries to manage

// Boundaries around critical features
function Dashboard() {
  return (
    <div>
      <Header />
      
      <ErrorBoundary fallback={<SectionError section="stats" />}>
        <UserStats />
      </ErrorBoundary>
      
      <ErrorBoundary fallback={<SectionError section="activity" />}>
        <RecentActivity />
      </ErrorBoundary>
      
      <ErrorBoundary fallback={<SectionError section="notifications" />}>
        <Notifications />
      </ErrorBoundary>
    </div>
  )
}

// Pros: 
// ✅ Fine-grained error isolation
// ✅ Rest of page works if one section fails
// ✅ Better UX

// Best practice: Multiple boundaries at different levels!

function UserProfile({ userId }) {
  const [user, setUser] = React.useState(null)
  const [loading, setLoading] = React.useState(false)
  const [error, setError] = React.useState(null)
  
  React.useEffect(() => {
    async function fetchUser() {
      setLoading(true)
      setError(null)
      
      try {
        const response = await fetch(`/api/users/${userId}`)
        
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`)
        }
        
        const data = await response.json()
        setUser(data)
      } catch (err) {
        setError(err.message)
        console.error('Failed to fetch user:', err)
      } finally {
        setLoading(false)
      }
    }
    
    fetchUser()
  }, [userId])
  
  if (loading) return <LoadingSpinner />
  if (error) return <ErrorMessage error={error} />
  if (!user) return <NotFound />
  
  return <UserCard user={user} />
}

// Pattern: Always wrap async calls in try-catch!

function SubmitForm() {
  const [error, setError] = React.useState(null)
  const [success, setSuccess] = React.useState(false)
  
  const handleSubmit = async (e) => {
    e.preventDefault()
    setError(null)
    setSuccess(false)
    
    try {
      const formData = new FormData(e.target)
      const response = await fetch('/api/submit', {
        method: 'POST',
        body: formData
      })
      
      if (!response.ok) {
        throw new Error('Submission failed')
      }
      
      setSuccess(true)
    } catch (err) {
      setError(err.message)
      // Optionally: Log to error service
    }
  }
  
  return (
    <form onSubmit={handleSubmit}>
      {error && <div className="error">{error}</div>}
      {success && <div className="success">Submitted!</div>}
      
      <input name="email" type="email" required />
      <button type="submit">Submit</button>
    </form>
  )
}

// Error boundaries DON'T catch event handler errors
// Always use try-catch in event handlers!

function DataFetcher({ url }) {
  const [data, setData] = React.useState(null)
  const [error, setError] = React.useState(null)
  const [retryCount, setRetryCount] = React.useState(0)
  
  const fetchData = async () => {
    try {
      const response = await fetch(url)
      if (!response.ok) throw new Error('Fetch failed')
      const data = await response.json()
      setData(data)
      setError(null)
    } catch (err) {
      setError(err.message)
    }
  }
  
  React.useEffect(() => {
    fetchData()
  }, [retryCount])
  
  const handleRetry = () => {
    setRetryCount(count => count + 1)
  }
  
  if (error) {
    return (
      <div>
        <p>Error: {error}</p>
        <button onClick={handleRetry}>Retry</button>
      </div>
    )
  }
  
  return data ? <DisplayData data={data} /> : <Loading />
}

function UserAvatar({ userId }) {
  const [user, setUser] = React.useState(null)
  const [error, setError] = React.useState(false)
  
  React.useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(setUser)
      .catch(() => setError(true))
  }, [userId])
  
  if (error) {
    // Show default avatar when error
    return <DefaultAvatar />
  }
  
  return user ? <img src={user.avatar} /> : <LoadingAvatar />
}

// Graceful degradation: Show something instead of nothing

function TodoList() {
  const [todos, setTodos] = React.useState([])
  
  const addTodo = async (text) => {
    // Optimistically add to UI
    const tempId = Date.now()
    const newTodo = { id: tempId, text, temp: true }
    setTodos([...todos, newTodo])
    
    try {
      // Try to save to server
      const response = await fetch('/api/todos', {
        method: 'POST',
        body: JSON.stringify({ text })
      })
      
      const savedTodo = await response.json()
      
      // Replace temp todo with real one
      setTodos(todos => 
        todos.map(t => t.id === tempId ? savedTodo : t)
      )
    } catch (err) {
      // Revert on error
      setTodos(todos => todos.filter(t => t.id !== tempId))
      alert('Failed to save todo')
    }
  }
  
  return <div>{/* UI */}</div>
}

// Show update immediately, revert if fails

// ❌ Bad - Technical errors shown to users
"TypeError: Cannot read property 'name' of undefined"
"Network request failed with status 500"
"Uncaught ReferenceError: user is not defined"

// ✅ Good - Friendly, actionable messages
function getErrorMessage(error) {
  // Map technical errors to user-friendly messages
  if (error.message.includes('Network')) {
    return 'Unable to connect. Please check your internet connection.'
  }
  
  if (error.message.includes('404')) {
    return 'The requested item could not be found.'
  }
  
  if (error.message.includes('403')) {
    return 'You do not have permission to access this resource.'
  }
  
  if (error.message.includes('500')) {
    return 'Server error. Please try again later.'
  }
  
  // Generic fallback
  return 'Something went wrong. Please try again.'
}

function ErrorMessage({ error }) {
  const message = getErrorMessage(error)
  
  return (
    <div className="error-banner">
      <h3>Oops!</h3>
      <p>{message}</p>
      <button onClick={retry}>Try Again</button>
      <a href="/support">Contact Support</a>
    </div>
  )
}

// Tips for error messages:
// ✅ Clear and specific
// ✅ Suggest actions
// ✅ Avoid technical jargon
// ✅ Provide next steps
// ✅ Show empathy

// Error logging service
class ErrorLogger {
  static log(error, errorInfo, context = {}) {
    // Log to console in development
    if (process.env.NODE_ENV === 'development') {
      console.error('Error:', error)
      console.error('Error Info:', errorInfo)
      console.error('Context:', context)
    }
    
    // Send to error tracking service in production
    if (process.env.NODE_ENV === 'production') {
      // Example: Sentry, LogRocket, Bugsnag
      // Sentry.captureException(error, {
      //   contexts: { react: errorInfo },
      //   tags: context
      // })
    }
    
    // Store in local storage for debugging
    try {
      const errors = JSON.parse(localStorage.getItem('errors') || '[]')
      errors.push({
        error: error.toString(),
        errorInfo: errorInfo,
        context,
        timestamp: new Date().toISOString()
      })
      localStorage.setItem('errors', JSON.stringify(errors.slice(-10)))
    } catch (e) {
      // Ignore storage errors
    }
  }
}

// Usage in Error Boundary
class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    ErrorLogger.log(error, errorInfo, {
      userId: this.props.userId,
      route: window.location.pathname
    })
  }
  
  render() {
    // ...
  }
}

// Sentry example
import * as Sentry from "@sentry/react"

// Initialize
Sentry.init({
  dsn: "your-sentry-dsn",
  environment: process.env.NODE_ENV,
  integrations: [new Sentry.BrowserTracing()],
  tracesSampleRate: 1.0,
})

// Error Boundary with Sentry
const SentryErrorBoundary = Sentry.ErrorBoundary

function App() {
  return (
    <SentryErrorBoundary fallback={<ErrorFallback />}>
      <YourApp />
    </SentryErrorBoundary>
  )
}

// Manual error reporting
try {
  riskyOperation()
} catch (error) {
  Sentry.captureException(error)
}

// Add context to errors
Sentry.setUser({ id: user.id, email: user.email })
Sentry.setTag("section", "checkout")

// Popular error tracking services:
// - Sentry (open source, popular)
// - LogRocket (session replay)
// - Bugsnag
// - Rollbar
// - TrackJS