如何获取React Native指向自定义文件的详细堆栈追踪并定位警告来源？

• 开启调试模式的完整堆栈追踪
  开发时打开开发者菜单（iOS按Cmd+D，Android按Cmd+M或Ctrl+M），勾选「Debug JS Remotely」，如果使用Hermes引擎就同时开启「Enable Hermes Debugging」。开启后堆栈追踪会包含你项目里的文件路径和行号，不再只显示RN内部代码。

• 添加Babel插件注入源码位置
  安装babel-plugin-transform-react-jsx-source插件：

  npm install --save-dev babel-plugin-transform-react-jsx-source
  

  然后在项目根目录的babel.config.js里加上这个插件：

  module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: ['transform-react-jsx-source'],
  };
  

  这个插件会给JSX元素加上源代码位置信息，让警告和错误能直接定位到对应的组件文件。

• 配置Hermes引擎的source map支持
  如果用Hermes，在metro.config.js里配置source map相关项：

  module.exports = {
    transformer: {
      hermesParser: true,
      sourceMapPathTransform: (path) => path.replace(/^.*\/node_modules\/react-native\//, 'react-native/'),
    },
  };
  

  开发环境默认已开启source map，生产环境如果需要排查问题也可以手动配置开启。

• 用自定义错误边界锁定组件
  针对图片这类容易出问题的组件，可以给它们套一层自定义错误边界，捕获错误时直接记录文件名：

  import React from 'react';
  
  class ImageErrorBoundary extends React.Component {
    componentDidCatch(error, info) {
      console.error(`图片组件出错，所在文件: ${this.props.fileName}`, error, info);
    }
  
    render() {
      return this.props.children;
    }
  }
  
  // 使用示例
  <ImageErrorBoundary fileName="HomeScreen.js">
    <Image source={this.state.imageUrl || null} />
  </ImageErrorBoundary>
  

  这样图片出问题时，控制台会直接显示对应的文件名，不用再盲目排查。

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