JS error on list containers screen - blank page

[Nindouja]

Bug description

When trying to access the container list (in an environement) the page is blank (except from the nav on the left) and when opening the console there is a JS error

Expected behavior

List of all my containers

Portainer Logs
JS logs:

TypeError: t is undefined
    accessor name.tsx:17
    e useTable.js:569
    se useTable.js:592
    se useTable.js:591
    j useTable.js:195
    React 2
    useTable useTable.js:186
    R Datatable.tsx:79
    React 7
    unstable_runWithPriority scheduler.production.min.js:18
    React 5
    e useUser.tsx:176
    c runtime.js:63
    _invoke runtime.js:294
    C runtime.js:119
    d main.5b5c2e4665971b5b46db.js:1
    s main.5b5c2e4665971b5b46db.js:1
    promise callback*d main.5b5c2e4665971b5b46db.js:1
    s main.5b5c2e4665971b5b46db.js:1
    u main.5b5c2e4665971b5b46db.js:1
    u main.5b5c2e4665971b5b46db.js:1
    h useUser.tsx:146
    w useUser.tsx:146
    w useUser.tsx:154
    Ll React
    unstable_runWithPriority scheduler.production.min.js:18
    React 4
    unstable_runWithPriority scheduler.production.min.js:18
    React 5
    T useCurrentStateAndParams.ts:22
    r useOnStateChanged.ts:21
    n useStableCallback.ts:26
    Angular 14
    jQuery 8
    Angular 24
[react-dom.production.min.js:216:199](webpack://portainer/node_modules/react-dom/cjs/react-dom.production.min.js)
Uncaught (in promise) TypeError: t is undefined
    accessor name.tsx:17
    e useTable.js:569
    se useTable.js:592
    se useTable.js:591
    j useTable.js:195
    React 2
    useTable useTable.js:186
    R Datatable.tsx:79
    React 7
    unstable_runWithPriority scheduler.production.min.js:18
    React 5
    e useUser.tsx:176
    c runtime.js:63
    _invoke runtime.js:294
    C runtime.js:119
    d main.5b5c2e4665971b5b46db.js:1
    s main.5b5c2e4665971b5b46db.js:1
    promise callback*d main.5b5c2e4665971b5b46db.js:1
    s main.5b5c2e4665971b5b46db.js:1
    u main.5b5c2e4665971b5b46db.js:1
    u main.5b5c2e4665971b5b46db.js:1
    h useUser.tsx:146
    w useUser.tsx:146
    w useUser.tsx:154
    Ll React
    unstable_runWithPriority scheduler.production.min.js:18
    React 4
    unstable_runWithPriority scheduler.production.min.js:18
    React 5
    T useCurrentStateAndParams.ts:22
    r useOnStateChanged.ts:21
    n useStableCallback.ts:26
    Angular 14
    jQuery 8
    Angular 24

Docker logs :

time="2022-09-28T22:42:03Z" level=info msg="Encryption key file `portainer` not present"
time="2022-09-28T22:42:03Z" level=info msg="Proceeding without encryption key"
time="2022-09-28T22:42:03Z" level=info msg="Loading PortainerDB: portainer.db"
time="2022-09-28T22:42:06Z" level=info msg="Opened existing store" version=61
2022/09/28 22:42:07 server: Reverse tunnelling enabled
2022/09/28 22:42:07 server: Fingerprint ee:52:88:19:d3:b9:75:42:db:4f:a4:9a:5b:ef:0d:c1
2022/09/28 22:42:07 server: Listening on 0.0.0.0:8000...
time="2022-09-28T22:42:07Z" level=info msg="[INFO] [cmd,main] Starting Portainer" BuildNumber=22936 GoVersion=1.18.3 ImageTag=linux-amd64-2.15.1 NodejsVersion=14.20.0 Version=2.15.1 WebpackVersion=5.68.0 YarnVersion=1.22.19
time="2022-09-28T22:42:07Z" level=info msg="2022/09/28 22:42:07 [DEBUG] [chisel, monitoring] [check_interval_seconds: 10.000000] [message: starting tunnel management process]"
time="2022-09-28T22:42:07Z" level=info msg="2022/09/28 22:42:07 [DEBUG] [internal,init] [message: start initialization monitor ]"
time="2022-09-28T22:42:07Z" level=info msg="2022/09/28 22:42:07 [INFO] [http,server] [message: starting HTTPS server on port :9443]"
time="2022-09-28T22:42:07Z" level=info msg="2022/09/28 22:42:07 [INFO] [http,server] [message: starting HTTP server on port :9000]"
time="2022-09-28T22:42:20Z" level=info msg="2022/09/28 22:42:20 http error: A valid authorisation token is missing (err=Unauthorized) (code=401)"
time="2022-09-28T22:42:20Z" level=info msg="2022/09/28 22:42:20 http error: A valid authorisation token is missing (err=Unauthorized) (code=401)"
time="2022-09-28T22:42:20Z" level=info msg="2022/09/28 22:42:20 http error: A valid authorisation token is missing (err=Unauthorized) (code=401)"
time="2022-09-28T22:42:20Z" level=info msg="2022/09/28 22:42:20 http error: A valid authorisation token is missing (err=Unauthorized) (code=401)"
time="2022-09-28T22:42:21Z" level=info msg="2022/09/28 22:42:21 http error: A valid authorisation token is missing (err=Unauthorized) (code=401)"
time="2022-09-28T22:42:21Z" level=info msg="2022/09/28 22:42:21 http error: A valid authorisation token is missing (err=Unauthorized) (code=401)"

Steps to reproduce the issue:

1. Go to '/#!/2/docker/dashboard'
2. Click on 'Containers'
3. See blank page

Technical details:

• Portainer version: Community Edition 2.15.1
• Docker version 20.10.17, build 100c701:
• Platform (windows/linux): Debian linux
• Command used to start Portainer : See compose file below
• Browser: Firefox
• Use Case : Using Portainer at Home.
• Have you reviewed our technical documentation and knowledge base? No

Additional context

Extract of compose file:
Full version

portainer:
    image: portainer/portainer-ce
    restart: unless-stopped
    container_name: portainer
    hostname: portainer
    networks:
      - web
    depends_on:
      - traefik
    environment:
      - PUID=${PUID}
      - PGID=${PGID}
      - TZ=${TIMEZONE}
    ports: 
      - "9000:9000"
    volumes:
      - "/var/run/docker.sock:/var/run/docker.sock"
      - "${DATA_FOLDER}/portainer:/data"
    labels:
      - "traefik.enable=true" 
      - "traefik.http.routers.portainer.entrypoints=http"
      - "traefik.http.routers.portainer.middlewares=portainer-https-redirect"
      - "traefik.http.routers.portainer.rule=Host(`portainer.${PUBLIC_DNS}`)"
      - "traefik.http.routers.portainer-secure.tls=true"
      - "traefik.http.routers.portainer-secure.service=portainer"
      - "traefik.http.routers.portainer-secure.entrypoints=https"
      - "traefik.http.routers.portainer-secure.tls.certResolver=resolver"
      - "traefik.http.routers.portainer-secure.rule=Host(`portainer.${PUBLIC_DNS}`)"
      - "traefik.http.services.portainer.loadbalancer.server.port=9000"
      - "traefik.http.middlewares.portainer-https-redirect.redirectscheme.scheme=https"
      - "traefik.docker.network=web"
      - "com.centurylinklabs.watchtower.enable=true"
      - homepage.group=Sys admin
      - homepage.name=Portainer
      - homepage.icon=portainer.png
      - homepage.href=http://portainer.${PUBLIC_DNS}/
      - homepage.description=Docker fleet administration
      - homepage.widget.type=portainer
      - homepage.widget.url=http://portainer.${PUBLIC_DNS}
      - homepage.widget.env=2
      - homepage.widget.key=${PORTAINER_API_KEY}

Screen of the blank page and the error in the console:

[Nindouja]

After some more time, I found out that aother container that had access to the socket via a volume was having troubles. Then the cli tool ctop was broken as well.
i figured it must have been a docker and not a portainer one. I reinstalled my whole docker engine and verything works like a charm.

i keep this open as it is still an unhandled exception and don't know if it needs investigations. But I have no more problem. Thanks for the good work <3

[tamarahenson]

@BancarelValentin

Thank you for the update. I am glad to hear you are able to move forward.

Thanks!

[YiHui-Liu]

similar things happen to me.
If i use localhost, it will render normally:

if i use nginx proxy, i will get a blank page:

or

Technical details:

• Portainer version: Community Edition 2.16.2
• Docker version 20.10.21
• Platform (windows/linux): Ubuntu linux
• Browser: Edge

docker-compose.yml

# docker-compose.yml
version: "3.9"
services:
    portainer-mian:
        container_name: portainer
        image: portainer/portainer:latest
        restart: always
        ports:
            - 8000:8000
            - 9443:9443
        volumes: 
            - /var/run/docker.sock:/var/run/docker.sock:rw
            - ./data:/data:rw
        networks:
            - lnmp
networks:
    lnmp:
        driver: bridge

version: "3.9"
services:
    nginx:
        container_name: nginx
        image: nginx:latest
        ports:
            - 80:80
            - 443:443
        volumes:
            - ./www:/usr/share/nginx/html:rw
            - ./Nginx/logs:/var/log/nginx
            - ./Nginx/cert:/etc/nginx/cert:ro
            - ./Nginx/conf.d:/etc/nginx/conf.d:ro
            - ./Nginx/nginx.conf:/etc/nginx/nginx.conf:ro
        depends_on:
            - mariadb
            - php
        restart: always
        networks:
            - portainer_lnmp
        privileged: true
networks:
    portainer_lnmp:
        external: true

Nginx conf

location ^~ /
{
    proxy_pass https://172.28.0.2:9443/;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

[dasteg]

having the same issue. my docker has a container in removing state:

    "State": "removing",
    "Status": "Removal In Progress"

this container doesn't have a name anymore. as a result the name column can't be rendered:

name.tsx

export const name: Column = {
Header: 'Name',
accessor: (row) => {
const name = row.Names[0];
return name.substring(1, name.length);
},

maybe it would make sense to validate if the name is not null or empty instead of trying to trim the string without any validation