어떻게 생성 - 반응 - 애플 리케이션 사용하는 오류 페이지를 사용자 정의 프로젝트에 통합 할 수 있습니까? 사용자가 만든 사용하는 응용 프로그램을 반응 코드에 오류가있는 경우

Question

, 당신이 매우 상세하고 정확한 오류 페이지를 얻을 : 내 자신 만의 프로젝트에이 오류 페이지를 통합 할 수있는 방법

. 나는 webpack 플러그인의 유형이이 필요하다고 생각합니다. 내 프로젝트의 도구는 다음과 같습니다

1. 는
2. express.js
3. 웹팩
4. 바벨을 Node.js를
5. 말대꾸
6. 여기
7. REDUX

는 반응 현재 웹팩 구성 :

import webpack from 'webpack' 
import autoprefixer from 'autoprefixer' 
import HtmlWebpackPlugin from 'html-webpack-plugin' 
import ExtractTextPlugin from 'extract-text-webpack-plugin' 
import CopyWebpackPlugin from 'copy-webpack-plugin' 
import FriendlyErrorsPlugin from 'friendly-errors-webpack-plugin' 


import helpers from './helpers' 

const NODE_ENV = process.env.NODE_ENV 
const isProd = NODE_ENV === 'production' 

module.exports = { 
    entry: { 
    'app': [ 
     helpers.root('client/app/index.jsx') 
    ] 
    }, 

    output: { 
    path: helpers.root('dist'), 
    publicPath: '/' 
    }, 

    resolve: { 
    extensions: ['.js', '.jsx', '.json', '.css', '.scss', '.html'], 
    alias: { 
     'app': 'client/app' 
    } 
    }, 
    stats: { 
    colors: true, 
    modules: true, 
    reasons: true, 
    errorDetails: true 
    }, 
    devtool: 'cheap-module-eval-source-map', 
    module: { 
    rules: [ 
     // absolutely necessary for font-awesome 
     // you NEED the file-loader & css-loader modules 
     { 
     test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/, 
     loader: 'file-loader' 
     }, 
     // JS files 
     { 
     test: /\.jsx?$/, 
     include: helpers.root('client'), 
     exclude: /node_modules/, 
     use: [ 
      { 
      loader: "babel-loader", 
      // options: { 
      // "presets": [["env", {"modules": false}], "react"] 
      // } 
      } 
     ] 
     }, 

     // SCSS files 
     // or test: /(\.scss|\.sass)$/, 
     // or test: /.(scss|sass)$/, 
     // or test: /.s[ac]ss$/, 
     // verdict: none of the above required! 
     { 
     test: /.sass$/, 
     loader: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: [ 
      { 
       loader: 'css-loader', 
       options: { 
       'sourceMap': true, 
       'importLoaders': 1 
       } 
      }, 
      { 
       loader: 'postcss-loader', 
       options: { 
       plugins:() => [ 
        autoprefixer 
       ] 
       } 
      }, 
      'sass-loader' 
      ] 
     }) 
     } 
    ] 
    }, 

    plugins: [ 
    new webpack.optimize.ModuleConcatenationPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoEmitOnErrorsPlugin(), 

    new FriendlyErrorsPlugin({ 
     clearConsole: <false></false> 
    }), 

    new webpack.DefinePlugin({ 
     'process.env': { 
     NODE_ENV: JSON.stringify(NODE_ENV) 
     } 
    }), 

    new HtmlWebpackPlugin({ 
     template: helpers.root('client/public/index.html'), 
     inject: 'body' 
    }), 

    new ExtractTextPlugin({ 
     filename: 'css/[name].[hash].css', 
     disable: !isProd 
    }), 

    new CopyWebpackPlugin([{ 
     from: helpers.root('client/public') 
    }]) 
    ] 
} 

Answer 1

찾고 계시는 패키지입니다. 희망이 도움이됩니다.

링크 - react-error-overlay

또한 패키지는 여기에 살고 - https://github.com/facebook/create-react-app/tree/next/packages