前端错误处理最佳实践指南

问题分析：

• 忽略错误会导致应用静默失败或崩溃。
• 过度嵌套 try-catch 使代码臃肿且难以维护。
• 错误信息模糊增加了排查难度。
• 缺少全局监听无法捕获未处理的 Promise 拒绝或脚本错误。
• 缺乏错误记录导致无法进行后续分析。

正确的实现方式

错误处理策略

// 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>;
}

总结与建议

错误处理是保障应用稳定性的核心环节，但需避免过度设计。开发者应遵循以下原则：

1. 适度处理：不要为了覆盖所有极端情况而牺牲代码可读性，根据业务场景选择处理粒度。
2. 分层清晰：底层负责网络与协议异常，中层负责业务逻辑校验，上层负责用户交互反馈。
3. 可观测性：结合监控工具收集错误数据，确保线上问题可追踪、可复现。
4. 用户体验优先：向用户展示清晰的错误提示而非技术堆栈，提供重试或引导路径。

良好的错误处理策略应在可靠性与维护成本之间取得平衡，最终服务于应用的长期健康运行。