Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Error.stack references only to main.chunk.js instead of real file name

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)?

like image 965
Yonatan Nir Avatar asked Oct 30 '19 07:10

Yonatan Nir


People also ask

What is a chunk load error in JavaScript?

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:

Why can’t I reference another stack?

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.

What is chunk JS used for in react and webpack?

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.

How do I fix a chunk load error in react?

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.


Video Answer


1 Answers

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.

enter image description here

like image 104
Meera Datey Avatar answered Sep 23 '22 02:09

Meera Datey