React报错行号不准确，如何获取真实错误行号？

我用Sublime Text搭配ESLint做语法检测，同时以development模式运行webpack。但写代码时出现笔误：

console.log(articls); // 第14行少了e，articls未定义

React返回的错误信息没给出正确行号/列号，错误提示指向空白的第25行，但实际错误在第14行，Chrome的错误报告也不准确。错误栈信息如下：

react_devtools_backend_compact.js:2367 上述错误发生在<WEBPACK_DEFAULT_EXPORT>组件中：

at __WEBPACK_DEFAULT_EXPORT__ (webpack:///./A1Bookmark/A1Bookmark.jsx?:25:66)
at div
at div
at __WEBPACK_DEFAULT_EXPORT__ (webpack:///./F1Page/F1Page.jsx?:31:70)
at div
at __WEBPACK_DEFAULT_EXPORT__ (webpack:///./F1/F1.jsx?:32:70)
at Provider (webpack:///./node_modules/react-redux/es/components/Provider.js?:16:3)

考虑在组件树中添加错误边界来自定义错误处理行为。

实际文件内容（1-25行）：

import                                  './A1Bookmark.css';
import React, { useEffect, useState }   from 'react';
import { useSelector }                  from 'react-redux';

export default () => {
  const [tag, setTag] = useState('Nutrition');
  const articles = useSelector((state) => state.Articles.articles);
  const top_hash = {};

  function makeTopHash() {
    if(!articles) {
      return;
    }
    console.log(articls);
    articles.forEach((article) => {
      if(!(article.tag in top_hash)) {
        top_hash[article.tag] = {};
      }
      if(!(article.domain in top_hash[article.tag])) {
        top_hash[article.tag][article.domain] = {};
      }
    });
  }
  makeTopHash();
  // 空白行25

除了运行linter和以development模式运行webpack外，还有什么方法可以获取准确的错误行号？

可行解决方案 #

• 调整webpack的devtool配置：在webpack配置文件里，把devtool设为'eval-cheap-module-source-map'或'source-map'。前者构建速度快且能保留源码行号，后者生成完整的source map，定位精度更高。development模式默认的devtool可能不足以提供精准映射，调整后错误栈能直接指向源码真实位置。
• 启用React严格模式：在根组件外层包裹<React.StrictMode>，它会触发额外检查，有时能暴露更准确的错误位置信息，帮你快速定位问题。
• 自定义错误边界组件：写一个错误边界组件，在componentDidCatch钩子中捕获错误并打印包含文件名、行号的详细错误栈。错误边界不仅能避免UI整体崩溃，还能输出更精准的错误来源。
• 检查Babel配置：如果用Babel转译代码，确保开启sourceMaps选项（在.babelrc或Babel配置里设sourceMaps: 'both'），让转译后的代码和源码正确映射，避免行号错位。
• 开启Chrome DevTools源码映射：在Chrome DevTools的设置中启用Enable JavaScript source maps，浏览器会根据source map把压缩/转译后的代码映射回原始源码，点击错误栈里的文件路径就能直接跳转到源码对应行。

内容的提问来源于stack exchange，提问作者k.m.