In Webpack's dev server, how can I use a fallback on proxy error?

Question

I have a Vue.JS project where a customization css is served by the backend. This can be configured using devServer.proxy.

When the backend doesn't have a custom css to serve (reutrns 404), is there a way to fallback to serving a static file ? I tried:

devServer: {
  proxy: {
    '^/custom.css$': {
      target: backend,
      onError(err, req, res, target) { res.end(static_css) /* never called */ }
    }
  }
}

But onError is not called, so I may have misunderstood the doc but don't see any way to implement a fallback. Is is at all possible ?

I know I can implement this at some other level (e.g. in the browser or the backend), but this question is specifically about proxy fallback in webpack dev server.

Answer 1

Apparently there is a before option which allows to install our own handlers. It's not documentend but I'm not using the latest webpack. I guess it's setupMiddlewares now.

The before works like so for my specific need, but it's very flexible:

const http = require('http');
/* ... */
devServer: {
    before(app) {
        app.use(function(req, res, next) {
            if(req.url == '/custom.css') {
                http.get(backend + '/custom.css', upstream => {
                    if(upstream.statusCode != 200) next();
                    else upstream.pipe(res);
                }).on('error', next).on('timeout', next);
            } else next();
        })
    }
}

The newer setupMiddlewares is documented here.

Apparently there's also onBeforeSetupMiddleware which is deprecated on latest but unavailable on my version so I guess it's usable for versions in between.

I didn't find a lot of ressources on advanced webpack dev server use-cases other than looking at the code, so I hope this helps.