react-slingshot 错误处理最佳实践：全局错误边界与日志收集

【免费下载链接】react-slingshot React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in 项目地址: https://gitcode.com/gh_mirrors/re/react-slingshot

你是否曾遇到 React 应用因未捕获的异常导致白屏崩溃？用户操作中断、数据丢失、负面反馈——这些问题不仅影响体验，更可能造成业务损失。本文将带你基于 react-slingshot 框架，构建从错误捕获到日志分析的完整解决方案，让你的应用具备企业级稳定性。

一、全局错误边界：React 应用的安全网

1.1 为什么需要错误边界

React 16 引入的错误边界（Error Boundary）机制，可捕获子组件树中的 JavaScript 错误，防止错误向上冒泡导致整个应用崩溃。在 react-slingshot 项目中，目前的根组件结构为：

// [src/components/Root.js](https://link.gitcode.com/i/e3463b079eccc718d00ba522c468963f)
<Provider store={store}>
  <ConnectedRouter history={history}>
    <App />  {/* 缺乏错误边界保护 */}
  </ConnectedRouter>
</Provider>

这种结构下，任何未处理的组件错误都会导致整个应用崩溃。

1.2 实现全局错误边界组件

创建 src/components/ErrorBoundary.js：

import React from 'react';

class ErrorBoundary extends React.Component {
  state = { hasError: false, error: null };

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, info) {
    // 错误日志收集将在第二部分实现
    console.error("捕获到错误:", error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="error-boundary">
          <h2>抱歉，页面出现错误</h2>
          <button onClick={() => this.setState({ hasError: false })}>
            刷新页面
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

1.3 集成到应用根节点

修改 src/components/Root.js，为应用添加顶层防护：

import ErrorBoundary from './ErrorBoundary';

// 修改 render 方法
return (
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <ErrorBoundary>
        <App />
      </ErrorBoundary>
    </ConnectedRouter>
  </Provider>
);

二、错误日志收集与分析

2.1 构建日志收集服务

创建 src/utils/errorLogger.js：

export const logError = (error, context = {}) => {
  // 在生产环境发送到日志服务
  if (process.env.NODE_ENV === 'production') {
    fetch('/api/log-error', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        message: error.message,
        stack: error.stack,
        context,
        timestamp: new Date().toISOString(),
        userAgent: navigator.userAgent
      })
    }).catch(e => console.error("日志发送失败:", e));
  } else {
    // 开发环境控制台输出
    console.error("错误:", error, "上下文:", context);
  }
};

2.2 增强错误边界的日志能力

更新 ErrorBoundary 的 componentDidCatch 方法：

import { logError } from '../utils/errorLogger';

componentDidCatch(error, info) {
  logError(error, {
    componentStack: info.componentStack,
    location: window.location.pathname
  });
}

2.3 配置生产环境日志服务

react-slingshot 的 Webpack 配置支持环境变量注入，修改 webpack.config.prod.js：

// 在 DefinePlugin 中添加
new webpack.DefinePlugin({
  ...GLOBALS,
  'process.env.ERROR_LOG_URL': JSON.stringify('/api/log-error')
})

三、最佳实践与扩展

3.1 错误处理策略矩阵

错误类型	处理方式	实现位置
组件渲染错误	ErrorBoundary 捕获	src/components/Root.js
API 请求错误	try/catch + 状态管理	Redux actions 中
异步操作错误	Promise.catch 或 try/catch	async/await 调用处
资源加载错误	window.addEventListener	src/index.js

3.2 监控效果验证

在开发环境测试错误捕获效果：

1. 在任意组件中添加测试按钮：

<button onClick={() => { throw new Error("测试错误捕获"); }}>
  触发测试错误
</button>

2. 点击按钮后应显示错误边界的 fallback UI，同时控制台输出错误详情。

总结

通过本文实现的方案，你的 react-slingshot 应用将获得：

1. 全局错误防护，避免白屏崩溃
2. 完整的错误日志收集，支持问题追踪
3. 环境适配的日志策略，平衡开发与生产需求

记住，优秀的错误处理不是事后补救，而是在架构设计阶段就应纳入考量的关键环节。

【免费下载链接】react-slingshot React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in 项目地址: https://gitcode.com/gh_mirrors/re/react-slingshot