webpack-dev-server: "webpack-dev-server --progress --inline" reloading page on devServer timeout

I guess proxy timeout (just the way backend works) triggers page reload. Chrome Dev Tools screenshot: http://i.imgur.com/aLoA4xm.png http://i.imgur.com/3WSpBmc.png

Chromium 46.0.2490.71 nodejs v4.2.4 webpack 1.12.11 webpack-dev-server 1.14.1

webpack.config.js:

var autoprefixer = require('autoprefixer')
var path = require('path')
var webpack = require('webpack')


module.exports = {
    entry: {
        app: path.resolve(__dirname, 'app', 'index.js'),
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    compact: false,
                    cacheDirectory: true,
                    presets: ['es2015', 'react'],
                },
            },
            {
                test: /\.css$/,
                loader: 'style!css'
            },
            {
                test: /\.scss$/,
                loaders: ['style', 'css', 'postcss', 'sass']
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader?limit=4096&name=[name].[ext]'
            },
            {
                test: /\.(html|svg|eot|woff|woff2|ttf)$/,
                loader: 'file?name=[name].[ext]'
            }
        ]
    },
    postcss: [
        autoprefixer({
            browsers: ['last 2 versions']
        })
    ],
    devServer: {
        proxy: {
            '/*': {
                target: process.env.SERVER,
                secure: false,
                changeOrigin: true,
            },
        },
    },
    plugins: (process.env.NODE_ENV == 'production') ? [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
            },
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new webpack.optimize.DedupePlugin(),
    ] : [],
}

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 18 (8 by maintainers)

Most upvoted comments

@phillipj this does not help 😦 After 2 minutes the request was repeated 😦

Please checkout this little example:

https://github.com/Martin-Wegner/webpack-dev-server-issue-369

and run npm install and npm start.

Finally open your brower and go to http://localhost:8080/test/.

You will see the message incoming request and after 2 minutes as second message incoming request.

@Martin-Wegner sorry for dropping the ball on this. I’ve submitted the PR https://github.com/nodejitsu/node-http-proxy/pull/1154, fingers crossed we’ll get this fixed at last.

But who closes the connection?

Excellent question which made me do another round of digging, which let me to find the culprint.

http-proxy doesn’t set a timeout on the incoming request, which is 2 minutes as default, and therefore closes the incoming request too early even when proxyTimeout is set.

The proxyTimeout option only sets timeout on the outgoing request the proxy makes, which is neccessary to solve this issue, but it’s only one of the two timeouts which needs to be set.

Although not documented, incoming requests to a Node.js HTTP server has default timeout of 2 minutes. If one wants to change that, request.setTimeout() has to be invoked.

By invoking req.setTimeout(x) in http-proxy’s request listener and doing something similar in your repro server https://github.com/Martin-Wegner/webpack-dev-server-issue-369/pull/1, I was able to get the Hello World message printed.

I probably won’t be able to open a PR against the http-proxy module in the next few days, so anyone who wants to give it a shot, please go ahead.

I’m experiencing a similar issue with AJAX requests which are proxied to a backend server. It’s a big issue as even POST requests are sent again by the webpack dev proxy server and thus creating multiple records on the server side (the creation takes some minutes to finish as some calculation are done there). Is there any possibility to set the proxy timeout or to avoid it completely?