I am creating a React.js app in which I am getting the stack trace like this:
let trace = new Error().stack;
The app was created using create-react-app
When sending the trace to a server, I get these kind of lines:
at onBlur (http://localhost:3000/static/js/main.chunk.js:538:82)
At the line above, the onBlur
is correct, but the file name is not.
Is there a way to get the name of the files as they are named in my project instead of main.chunk.js
(which I assume is a compiled file created by webpack)?
The multiple JavaScript files used are also known as chunks, and hence the name of the error. What Causes the Chunk Load Error? To recap, the Chunk Load Error occurs when the browser encounters an error in fetching some JavaScript files, which were dynamically imported. There are a couple reasons you may have encountered this error:
Cross stack references are only supported for stacks deployed to the same environment or between nested stacks and their parent stack likely happens if you do the following: You try to reference another stack that is in a different AWS region. Note: cross region references aren’t supported.
When I read about React and Webpack I see that the bundle.js is used to run the App on a localhost, and that in the build version, the ' . .chunk.js' is used for loading the node modules. Only I see nothing about the files I stated above, so not the build files with the hash also in their filename.
Similarly, you can also force the user’s browser to hard reload the page and try again, which will help you get rid of the cache-caused Chunk Load errors. This can be done by using the lazyWithRetry function React LazyWithRetry · GitHub, instead of the default lazy function used in react.
You can use npm package craco - craco will allow you to specify webpack options without needing to eject the react application.
You can specify option devtool to control source code
here is craco.config.js
file to preserve line numbers
module.exports = {
webpack: {
configure: {
devtool: 'eval-source-map'
}
}
}
and you need to update package.json start script to
"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>
)
}
You will see that original line number and file name are preserved.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With