前端错误处理最佳实践：构建健壮的用户体验

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. 全局错误监听

捕获页面级异常和未处理的 Promise 拒绝。

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

监控与反馈

集成监控服务

推荐使用 Sentry 等工具自动采集错误堆栈和环境信息。

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

若需自建后端，可收集关键上下文后发送：

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

用户友好提示

不要直接把技术堆栈抛给用户，而是提供清晰的引导。

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

function LoginForm() {
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError(null);
    setLoading(true);
    try {
      // 登录逻辑
    } catch (err) {
      setError(err);
    } finally {
      setLoading(false);
    }
  };

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

分层架构建议

将错误处理分为三层：底层负责转换网络异常，中层处理业务逻辑校验，上层负责 UI 展示。

// 底层：网络请求封装
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;
    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');
    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 (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    }
    loadUser();
  }, [userId]);

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

总结与建议

错误处理的核心目的是提升可靠性和用户体验，而非炫技。在实际项目中，需要根据应用规模权衡复杂度：

• 小型应用：保持简单，避免过度抽象。
• 大型应用：建立统一的错误规范、监控体系和恢复机制。

记住，好的错误处理是隐形的——用户感知不到它的存在，但系统却能在异常发生时依然稳健运行。