前端错误处理最佳实践与实战指南 | 极客日志

JavaScript大前端

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

综述由AI生成前端错误处理直接影响用户体验与应用稳定性。梳理了常见错误处理误区，如忽略异常、过度嵌套 try-catch 及信息不明确等。通过自定义错误类、React 错误边界、全局监听及分层处理策略，构建健壮的容错机制。结合 Sentry 等监控工具与友好提示组件，实现从捕获到反馈的闭环。强调平衡代码复杂度与可靠性，避免过度设计，确保生产环境稳定运行。

asphyx_a发布于 2026/4/5更新于 2026/4/262 浏览

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

常见误区

很多开发者认为加个 try-catch 就能搞定一切，或者觉得 console.error 足够记录所有问题。实际上，错误的处理方式往往比业务逻辑更复杂。如果处理不当，不仅无法定位问题，还会让代码变得臃肿难维护。

典型反面案例

// 1. 忽略错误：Promise 链中未捕获异常会导致静默失败
function fetchData() {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data));
}

// 2. 过度嵌套：多层 try-catch 导致代码可读性极差
function processData(data) {
  try {
    if (data) {
      try {
        const processedData = data.map(item => {
          try {
            return item.value * 2;
          } catch (error) {
            console.error('Error processing item:', error);
            return 0;
          }
        });
        return processedData;
      } catch (error) {
        console.error('Error mapping data:', error);
        return [];
      }
    } else {
      return [];
    }
  }  (error) {
    .(, error);
     [];
  }
}


 () {
   ( price !== ) {
      ();
  }
   price * quantity;
}


.(,  {
  .(, event.);
});

// 自定义错误类：携带状态码等额外信息
class ApiError extends Error {
  constructor(message, status) {
    super(message);
    this.name = 'ApiError';
    this.status = status;
  }
}

// 统一请求处理
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) {
      throw new ApiError(`HTTP error! status: ${response.status}`, response.status);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    // 记录日志但向上抛出，由上层决定 UI 反馈
    console.error('Error fetching data:', error);
    throw error;
  }
}

import React from '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;
  }
}

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

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

// 底层：网络错误标准化
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;
  }
}

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