Error.stack 仅引用 main.chunk.js 而不是真实的文件名

我正在创建一个 React.js 应用程序，其中我得到如下堆栈跟踪：

let trace = new Error().stack;

该应用程序是使用创建的create-react-app

将跟踪发送到服务器时，我收到以下几行：

在 onBlur (http://localhost:3000/static/js/main.chunk.js:538:82 http://localhost:3000/static/js/main.chunk.js:538:82)

在上面的行中，onBlur是正确的，但文件名不正确。

有没有办法获取文件的名称，因为它们在我的项目中命名，而不是main.chunk.js（我假设是由 webpack 创建的编译文件）？

您可以使用 npm 包craco https://www.npmjs.com/package/@craco/craco- craco 将允许您指定 webpack 选项，而无需弹出 React 应用程序。

您可以指定选项devtool来控制源代码 这是craco.config.js文件以保留行号

module.exports = {
    webpack: {
      
        configure: {
            
            devtool: 'eval-source-map'

    }
    }
}

并且您需要将 package.json 启动脚本更新为

"start": "craco start"


function App() {

  function handleClick(e) {
    e.preventDefault();
    let trace = new Error().stack;
    console.log('The link was clicked.' , trace);
  }

return (
        <button onClick={handleClick} > Blur</button>
)
}

您将看到原始行号和文件名被保留。