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

Question

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

let trace = new Error().stack;

应用是使用create-react-app创建的

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

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

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

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

Answer 1

您可以使用 npm package 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>
)
}

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