ReactJS 没有缩小生产中的错误

Question

Situation: My application is currently under development but I have a separated demosystem which uses the build version of my product for demonstration purpose for potential customers and general interested users. My project has a very high ordered Error-Boundary component to catch unhandeled exceptions which allows me to avoid ugly application-crashes. Instead of a normal crash a well formatted error-page will be shown which contains the error message occured combined with the stack-trace.

I just realised that in production (after npm run build ) the error and even stack-trace is highly minified and does not allow me to recognize the exact problem-causing piece of code (eg stacktrace is not clearly readable anymore) were the problem occurred and also some customers cannot explain me what they did to get the problem.

Is there any way to reproduce the stack-trace original named variables with any kind of translation-table or an option to get full error messages even after the

npm build

Edit: Fixed typos and made problem easier to understand.

Answer 1

you can eject your ceate-create-app and change optimization inside config/webpack.config.js :

    optimization: {
      minimize:  isEnvProduction,
      minimizer: [
        // This is only used in production mode
        new TerserPlugin({
          terserOptions: {

just change minimize to true

or you can generate two builds of application one development and one production.

serve development build if user is admin eg