前端错误处理最佳实践与策略

问题：

• 忽略错误，导致应用崩溃
• 过度使用 try-catch，导致代码变得臃肿
• 错误信息不明确，难以定位问题
• 缺少全局错误处理，无法捕获所有错误
• 不记录错误，无法分析错误原因

推荐实施方案

基础策略

// 1. 基本错误处理
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error;
  }
}

// 2. 自定义错误类
class ApiError extends Error {
  constructor(message, status) {
    super(message);
    this.name = 'ApiError';
    this.status = status;
  }
}

async function fetchUserData(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) {
      throw new ApiError(`Failed to fetch user: ${response.status}`, response.status);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    if (error instanceof ApiError) {
      console.error('API error:', error.message);
    } else {
      console.error('Unexpected error:', error);
    }
    throw error;
  }
}

// 3. 错误边界（React）
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 caught by boundary:', error, errorInfo);
  }
  render() {
    if (this.state.hasError) {
      return <div>Something went wrong. Please try again later.</div>;
    }
    return this.props.children;
  }
}

// 4. 全局错误处理
window.addEventListener('error', (event) => {
  console.error('Global error:', event.error);
  sendErrorToMonitoring(event.error);
});

window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled promise rejection:', event.reason);
  sendErrorToMonitoring(event.reason);
});

监控集成

// 1. 使用 Sentry
// npm install @sentry/react
import * as Sentry from '@sentry/react';
import { BrowserTracing } from '@sentry/tracing';

Sentry.init({
  dsn: 'YOUR_DSN',
  integrations: [new BrowserTracing()],
  tracesSampleRate: 1.0,
});

try {
  // 可能会出错的代码
} catch (error) {
  Sentry.captureException(error);
}

// 2. 自定义错误监控
function sendErrorToMonitoring(error) {
  const errorData = {
    message: error.message,
    stack: error.stack,
    url: window.location.href,
    userAgent: navigator.userAgent,
    timestamp: new Date().toISOString()
  };
  fetch('/api/error-monitoring', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(errorData)
  });
}

// 3. 错误日志
function logError(error, context = {}) {
  console.error('Error:', error);
  console.error('Context:', context);
  sendErrorToMonitoring({ ...error, context });
}

用户交互

// 1. 错误提示组件
function ErrorMessage({ error, onRetry }) {
  return (
    <div className="error-message">
      <h3>Oops! Something went wrong.</h3>
      <p>{error.message}</p>
      {onRetry && <button onClick={onRetry}>Try Again</button>}
    </div>
  );
}

// 2. 表单错误处理
function LoginForm() {
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    setError(null);
    setLoading(true);
    try {
      // 登录逻辑
    } catch (error) {
      setError(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {error && <ErrorMessage error={error} />}
      {/* 表单字段 */}
      <button type="submit" disabled={loading}>
        {loading ? 'Loading...' : 'Login'}
      </button>
    </form>
  );
}

// 3. 异步操作错误处理
function DataFetcher() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('/api/data');
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        const data = await response.json();
        setData(data);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <ErrorMessage error={error} onRetry={() => window.location.reload()} />;
  return <div>{/* 渲染数据 */}</div>;
}

进阶实践

// 1. 分层错误处理
// 底层：捕获并转换错误
async function apiCall(url, options) {
  try {
    const response = await fetch(url, options);
    if (!response.ok) {
      throw new ApiError(`API error: ${response.status}`, response.status);
    }
    return await response.json();
  } catch (error) {
    if (error instanceof ApiError) {
      throw error;
    } else {
      throw new ApiError('Network error', 0);
    }
  }
}

// 中层：处理业务逻辑错误
async function getUserData(id) {
  try {
    return await apiCall(`/api/users/${id}`);
  } catch (error) {
    if (error.status === 404) {
      throw new Error('User not found');
    } else {
      throw error;
    }
  }
}

// 上层：处理 UI 错误
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function loadUser() {
      try {
        const userData = await getUserData(userId);
        setUser(userData);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    }
    loadUser();
  }, [userId]);

  if (loading) return <div>Loading...</div>;
  if (error) return <ErrorMessage error={error} />;
  return <div>{/* 渲染用户信息 */}</div>;
}

// 2. 错误恢复策略
function AutoRetryComponent({ fetchData, maxRetries = 3 }) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);
  const [retryCount, setRetryCount] = useState(0);

  useEffect(() => {
    async function loadData() {
      try {
        const result = await fetchData();
        setData(result);
      } catch (error) {
        if (retryCount < maxRetries) {
          setRetryCount(prev => prev + 1);
          setTimeout(loadData, 1000 * (retryCount + 1));
        } else {
          setError(error);
        }
      } finally {
        setLoading(false);
      }
    }
    loadData();
  }, [fetchData, maxRetries, retryCount]);

  if (loading) return <div>Loading...</div>;
  if (error) return <ErrorMessage error={error} />;
  return <div>{/* 渲染数据 */}</div>;
}