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

Question

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

let trace = new Error().stack;

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

将跟踪发送到服务器时，我得到这些行:

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

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

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

Answer 1

你可以使用 npm 包 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>
)
}

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