Traefik custom error page for 502 doesn't work

Traefik Traefik v2
1

I would like to display custom error pages with nginx server. This is my current configuration:

docker-compose.yml

version: "3.7"

services:
  whoami:
    image: "traefik/whoami"
    networks:
      - traefik-net
    deploy:
      replicas: 1
      labels:
        # enable Traefik for this service
        - "traefik.enable=true"
        - "traefik.docker.network=traefik-net"
        
        # router
        - "traefik.http.routers.whoami.rule=Host(`whoami.info`)"
        - "traefik.http.routers.whoami.entrypoints=web"
        - "traefik.http.routers.whoami.service=whoami"
        
        # service
        - "traefik.http.services.whoami.loadbalancer.server.port=81" # purposely not 80 - forces bad gateway (502)
        - "traefik.http.services.whoami.loadbalancer.server.scheme=http"
      restart_policy:
        condition: on-failure

  errorPageHandler:
    image: "nginx:latest"
    networks:
      - traefik-net
    volumes:
      - "./ErrorPages:/usr/share/nginx/ErrorPages"
      - "./default.conf:/etc/nginx/conf.d/default.conf"
    deploy:
      replicas: 1
      labels:
        # enable Traefik for this service
        - "traefik.enable=true"
        - "traefik.docker.network=traefik-net"

        # router (catches all requests with lowest possible priority)
        - "traefik.http.routers.error-router.rule=HostRegexp(`{catchall:.*}`)"
        - "traefik.http.routers.error-router.priority=1"
        - "traefik.http.routers.error-router.middlewares=error-pages-middleware"

        # middleware
        - "traefik.http.middlewares.error-pages-middleware.errors.status=400-599"
        - "traefik.http.middlewares.error-pages-middleware.errors.service=error-pages-service"
        - "traefik.http.middlewares.error-pages-middleware.errors.query=/{status}.html"

        # service
        - "traefik.http.services.error-pages-service.loadbalancer.server.port=80"

networks:
  traefik-net:
    external: true

default.conf

server {
    listen       80;
    server_name  localhost;

    error_page  404    /404.html;
    error_page  502    /502.html;

    location / {
        root  /usr/share/nginx/ErrorPages;
        internal;
    }
}

ErrorPages folder contains two files, 404.html and 502.html which contain a custom HTML page for both of the errors.

When I visit http://whoami.info, Traefik displays its default 502 Bad Gateway page, instead of my custom one. It looks like HTTP status 502 isn't even routed to the nginx container. However, when I visit some non-existent page, 404 HTTP status is handled correctly with nginx. What am I doing wrong? Why is status 404 working, but status 502 is not?

2

Hello,

I'm facing the same issue. Have you found a solution? ?

Thanks

3

I would suspect the matching router with Host() also needs to assign the middleware to the router.