如何仅在create-react-app生产构建文件中引入Rollbar.js？

嘿，这个需求太贴合实际了——谁也不想在开发调试的时候被监控工具的日志打扰，只让它安安静静在生产环境干活对吧？下面是我在create-react-app项目里屡试不爽的实现方式，分几步来：

1. 安装Rollbar依赖 #

首先安装Rollbar的官方客户端包，因为我们只在生产环境用，直接装成生产依赖就行：

npm install rollbar --save

2. 配置环境变量 #

create-react-app原生支持通过.env文件管理环境变量，我们只需要给生产环境单独配置：

• 在项目根目录创建.env.production文件，添加你的Rollbar密钥（记得替换成你自己的）：

  REACT_APP_ROLLBAR_ACCESS_TOKEN=your_rollbar_server_side_token_here
  

• 开发环境的.env.development里不需要加这个变量，或者可以加个标识方便区分环境，比如REACT_APP_ENV=development。

注意：create-react-app会自动暴露所有以REACT_APP_开头的环境变量给前端代码，所以变量名一定要遵守这个规则。

3. 条件初始化Rollbar（核心步骤） #

在项目的入口文件（一般是src/index.js）里，我们通过动态import和环境判断，只在生产环境加载并初始化Rollbar：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import ErrorBoundary from './ErrorBoundary'; // 后面会说这个组件

// 仅在生产环境初始化Rollbar
if (process.env.NODE_ENV === 'production') {
  // 动态import确保开发环境不会加载Rollbar代码
  import('rollbar').then(({ default: Rollbar }) => {
    Rollbar.init({
      accessToken: process.env.REACT_APP_ROLLBAR_ACCESS_TOKEN,
      captureUncaught: true, // 捕获未捕获的全局错误
      captureUnhandledRejections: true, // 捕获未处理的Promise拒绝
      environment: 'production', // 标记环境
      // 可以根据需求添加其他配置，比如代码版本、用户信息等
    });

    // 把Rollbar挂到window上，方便后续在错误边界或其他地方调用
    window.Rollbar = Rollbar;
  });
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* 用错误边界包裹App，捕获组件级错误 */}
    <ErrorBoundary>
      <App />
    </ErrorBoundary>
  </React.StrictMode>
);

4. 用错误边界捕获组件级错误（可选但推荐） #

React的错误边界可以捕获组件树里的渲染错误，我们可以结合Rollbar把这些错误上报：
创建src/ErrorBoundary.js：

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError() {
    // 发生错误时更新状态，显示降级UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 仅在生产环境上报错误到Rollbar
    if (process.env.NODE_ENV === 'production') {
      window.Rollbar?.error('Component render error', error, errorInfo);
    }
  }

  render() {
    if (this.state.hasError) {
      // 这里可以替换成你自己的错误提示UI
      return <h1>Oops! Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

5. 验证效果 #

• 开发环境运行npm start，打开控制台，你不会看到任何Rollbar相关的初始化日志或请求，完美避免干扰。
• 生产环境执行npm run build，把build后的文件部署到服务器（或者本地用serve build命令启动），故意制造一个错误（比如组件里抛个异常），然后去你的Rollbar后台查看，应该能看到对应的错误上报。

这种方式的优点：

• 开发环境完全不会加载Rollbar的代码，零干扰。
• 生产环境通过动态import按需加载，不影响主包的初始加载速度。
• 结合错误边界，能覆盖全局错误和组件级错误，监控更全面。

内容的提问来源于stack exchange，提问作者MattSidor