[BUG] Web administration page broken #724

Closed
opened 2026-02-04 22:08:46 +03:00 by OVERLORD · 8 comments
Owner

Originally created by @simon-vajda on GitHub (Mar 1, 2023).

The bug

When I open the administration page on the web ui it doesn't show only the settings page but it gets added to the bottom of the screen. Both the sidebar and the main content area gets duplicated. If I then click on the immich brand icon to get back to the home screen it freezes my chrome tab.

The OS that Immich Server is running on

Unraid (docker)

Version of Immich Server

v1.50.1

Version of Immich Mobile App

v.1.50.0 build.73

Platform with the issue

  • Server
  • Web
  • Mobile

Your docker-compose.yml content

version: "3.8"

services:
  immich-server:
    container_name: immich_server
    image: altran1502/immich-server:release
    entrypoint: ["/bin/sh", "./start-server.sh"]
    volumes:
      - ${UPLOAD_LOCATION}:/usr/src/app/upload
    env_file:
      - .env
    environment:
      - NODE_ENV=production
    depends_on:
      - redis
      - database
    restart: always

  immich-microservices:
    container_name: immich_microservices
    image: altran1502/immich-server:release
    entrypoint: ["/bin/sh", "./start-microservices.sh"]
    volumes:
      - ${UPLOAD_LOCATION}:/usr/src/app/upload
    env_file:
      - .env
    environment:
      - NODE_ENV=production
    depends_on:
      - redis
      - database
    restart: always

  immich-machine-learning:
    container_name: immich_machine_learning
    image: altran1502/immich-machine-learning:release
    command: [ "python", "src/main.py" ]
    volumes:
      - ${UPLOAD_LOCATION}:/usr/src/app/upload
      - /mnt/user/appdata/Immich/model-cache:/cache
    env_file:
      - .env
    environment:
      - NODE_ENV=production
    depends_on:
      - database
    restart: always

  immich-web:
    container_name: immich_web
    image: altran1502/immich-web:release
    entrypoint: ["/bin/sh", "./entrypoint.sh"]
    env_file:
      - .env
    environment:
      # Rename these values for svelte public interface
      - PUBLIC_IMMICH_SERVER_URL=${IMMICH_SERVER_URL}
    restart: always

  redis:
    container_name: immich_redis
    image: redis:6.2
    restart: always

  database:
    container_name: immich_postgres
    image: postgres:14
    env_file:
      - .env
    environment:
      POSTGRES_PASSWORD: ${DB_PASSWORD}
      POSTGRES_USER: ${DB_USERNAME}
      POSTGRES_DB: ${DB_DATABASE_NAME}
      PG_DATA: /var/lib/postgresql/data
    volumes:
      - ${POSTGRESQL_DATA_LOCATION}:/var/lib/postgresql/data
    restart: always

  immich-proxy:
    container_name: immich_proxy
    image: altran1502/immich-proxy:release
    environment:
      # Make sure these values get passed through from the env file
      - IMMICH_SERVER_URL
      - IMMICH_WEB_URL
    ports:
      - 3200:8080
    logging:
      driver: none
    depends_on:
      - immich-server
    restart: always

Your .env content

###################################################################################
# Database
###################################################################################

DB_HOSTNAME=immich_postgres
DB_USERNAME=postgres
DB_PASSWORD=postgres
DB_DATABASE_NAME=immich

# Optional Database settings:
# DB_PORT=5432

###################################################################################
# Redis
###################################################################################

REDIS_HOSTNAME=immich_redis

# Optional Redis settings:
# REDIS_PORT=6379
# REDIS_DBINDEX=0
# REDIS_PASSWORD=
# REDIS_SOCKET=

###################################################################################
# Upload File Location
#
# This is the location where uploaded files are stored.
###################################################################################

UPLOAD_LOCATION=/mnt/user/immich/

###################################################################################
# JWT SECRET
#
# This JWT_SECRET is used to sign the authentication keys for user login
# You should set it to a long randomly generated value
# You can use this command to generate one: openssl rand -base64 128
###################################################################################

JWT_SECRET=<secret>

###################################################################################
# Reverse Geocoding
#
# Reverse geocoding is done locally which has a small impact on memory usage
# This memory usage can be altered by changing the REVERSE_GEOCODING_PRECISION variable
# This ranges from 0-3 with 3 being the most precise
# 3 - Cities > 500 population: ~200MB RAM
# 2 - Cities > 1000 population: ~150MB RAM
# 1 - Cities > 5000 population: ~80MB RAM
# 0 - Cities > 15000 population: ~40MB RAM
####################################################################################

# DISABLE_REVERSE_GEOCODING=false
# REVERSE_GEOCODING_PRECISION=3

####################################################################################
# WEB - Optional
#
# Custom message on the login page, should be written in HTML form.
# For example:
# PUBLIC_LOGIN_PAGE_MESSAGE="This is a demo instance of Immich.<br><br>Email: <i>demo@demo.de</i><br>Password: <i>demo</i>"
####################################################################################

PUBLIC_LOGIN_PAGE_MESSAGE=

####################################################################################
# Alternative Service Addresses - Optional
#
# This is an advanced feature for users who may be running their immich services on different hosts.
# It will not change which address or port that services bind to within their containers, but it will change where other services look for their peers.
# Note: immich-microservices is bound to 3002, but no references are made
####################################################################################

IMMICH_WEB_URL=http://immich-web:3000
IMMICH_SERVER_URL=http://immich-server:3001
IMMICH_MACHINE_LEARNING_URL=http://immich-machine-learning:3003

POSTGRESQL_DATA_LOCATION=/mnt/user/appdata/Immich/postgresql/

Reproduction steps

1. Click on the Administration menu item on the Web UI
2. (at this point the settings screen should be at the bottom of the screen)
3. Click on the Immich logo on the navbar
4. (browser tab is frozen)

Additional information

No response

Originally created by @simon-vajda on GitHub (Mar 1, 2023). ### The bug When I open the administration page on the web ui it doesn't show only the settings page but it gets added to the bottom of the screen. Both the sidebar and the main content area gets duplicated. If I then click on the immich brand icon to get back to the home screen it freezes my chrome tab. ### The OS that Immich Server is running on Unraid (docker) ### Version of Immich Server v1.50.1 ### Version of Immich Mobile App v.1.50.0 build.73 ### Platform with the issue - [ ] Server - [X] Web - [ ] Mobile ### Your docker-compose.yml content ```YAML version: "3.8" services: immich-server: container_name: immich_server image: altran1502/immich-server:release entrypoint: ["/bin/sh", "./start-server.sh"] volumes: - ${UPLOAD_LOCATION}:/usr/src/app/upload env_file: - .env environment: - NODE_ENV=production depends_on: - redis - database restart: always immich-microservices: container_name: immich_microservices image: altran1502/immich-server:release entrypoint: ["/bin/sh", "./start-microservices.sh"] volumes: - ${UPLOAD_LOCATION}:/usr/src/app/upload env_file: - .env environment: - NODE_ENV=production depends_on: - redis - database restart: always immich-machine-learning: container_name: immich_machine_learning image: altran1502/immich-machine-learning:release command: [ "python", "src/main.py" ] volumes: - ${UPLOAD_LOCATION}:/usr/src/app/upload - /mnt/user/appdata/Immich/model-cache:/cache env_file: - .env environment: - NODE_ENV=production depends_on: - database restart: always immich-web: container_name: immich_web image: altran1502/immich-web:release entrypoint: ["/bin/sh", "./entrypoint.sh"] env_file: - .env environment: # Rename these values for svelte public interface - PUBLIC_IMMICH_SERVER_URL=${IMMICH_SERVER_URL} restart: always redis: container_name: immich_redis image: redis:6.2 restart: always database: container_name: immich_postgres image: postgres:14 env_file: - .env environment: POSTGRES_PASSWORD: ${DB_PASSWORD} POSTGRES_USER: ${DB_USERNAME} POSTGRES_DB: ${DB_DATABASE_NAME} PG_DATA: /var/lib/postgresql/data volumes: - ${POSTGRESQL_DATA_LOCATION}:/var/lib/postgresql/data restart: always immich-proxy: container_name: immich_proxy image: altran1502/immich-proxy:release environment: # Make sure these values get passed through from the env file - IMMICH_SERVER_URL - IMMICH_WEB_URL ports: - 3200:8080 logging: driver: none depends_on: - immich-server restart: always ``` ### Your .env content ```Shell ################################################################################### # Database ################################################################################### DB_HOSTNAME=immich_postgres DB_USERNAME=postgres DB_PASSWORD=postgres DB_DATABASE_NAME=immich # Optional Database settings: # DB_PORT=5432 ################################################################################### # Redis ################################################################################### REDIS_HOSTNAME=immich_redis # Optional Redis settings: # REDIS_PORT=6379 # REDIS_DBINDEX=0 # REDIS_PASSWORD= # REDIS_SOCKET= ################################################################################### # Upload File Location # # This is the location where uploaded files are stored. ################################################################################### UPLOAD_LOCATION=/mnt/user/immich/ ################################################################################### # JWT SECRET # # This JWT_SECRET is used to sign the authentication keys for user login # You should set it to a long randomly generated value # You can use this command to generate one: openssl rand -base64 128 ################################################################################### JWT_SECRET=<secret> ################################################################################### # Reverse Geocoding # # Reverse geocoding is done locally which has a small impact on memory usage # This memory usage can be altered by changing the REVERSE_GEOCODING_PRECISION variable # This ranges from 0-3 with 3 being the most precise # 3 - Cities > 500 population: ~200MB RAM # 2 - Cities > 1000 population: ~150MB RAM # 1 - Cities > 5000 population: ~80MB RAM # 0 - Cities > 15000 population: ~40MB RAM #################################################################################### # DISABLE_REVERSE_GEOCODING=false # REVERSE_GEOCODING_PRECISION=3 #################################################################################### # WEB - Optional # # Custom message on the login page, should be written in HTML form. # For example: # PUBLIC_LOGIN_PAGE_MESSAGE="This is a demo instance of Immich.<br><br>Email: <i>demo@demo.de</i><br>Password: <i>demo</i>" #################################################################################### PUBLIC_LOGIN_PAGE_MESSAGE= #################################################################################### # Alternative Service Addresses - Optional # # This is an advanced feature for users who may be running their immich services on different hosts. # It will not change which address or port that services bind to within their containers, but it will change where other services look for their peers. # Note: immich-microservices is bound to 3002, but no references are made #################################################################################### IMMICH_WEB_URL=http://immich-web:3000 IMMICH_SERVER_URL=http://immich-server:3001 IMMICH_MACHINE_LEARNING_URL=http://immich-machine-learning:3003 POSTGRESQL_DATA_LOCATION=/mnt/user/appdata/Immich/postgresql/ ``` ### Reproduction steps ```bash 1. Click on the Administration menu item on the Web UI 2. (at this point the settings screen should be at the bottom of the screen) 3. Click on the Immich logo on the navbar 4. (browser tab is frozen) ``` ### Additional information _No response_
Author
Owner

@michelheusschen commented on GitHub (Mar 1, 2023):

I've tried to fix this for v1.50.0, but it's been difficult because the problem doesn't occur at all in my development environment. The duplicated content has been reported previously, but freezing the complete tab wasn't an issue before.

Can you please try the following:

  • Verify the immich-web Docker image is using version v1.50.0 or later
  • See if #1827 describes the same issue you're having
  • Maybe check if the issue also occurs with the Immich Demo
@michelheusschen commented on GitHub (Mar 1, 2023): I've tried to fix this for v1.50.0, but it's been difficult because the problem doesn't occur at all in my development environment. The duplicated content has been reported previously, but freezing the complete tab wasn't an issue before. Can you please try the following: - Verify the immich-web Docker image is using version v1.50.0 or later - See if #1827 describes the same issue you're having - Maybe check if the issue also occurs with the [Immich Demo](https://demo.immich.app/)
Author
Owner

@simon-vajda commented on GitHub (Mar 1, 2023):

I checked the docker image and the version number in the web ui as well and I am using v1.50.1. However the demo site doesn't seem to have this issue. I'm experiencing something similar to the above mentioned duplication issue, but in my case it doesn't happen when I want to go back from the administration page to the home page, but the other way around. I tried opening the administration page directly with the url and it opens correctly, but when click on the Immich logo to go back it freezes mid-render:
immich_bug
The chrome task manager shows very high cpu usage for the immich tab and it is unresponsive.

@simon-vajda commented on GitHub (Mar 1, 2023): I checked the docker image and the version number in the web ui as well and I am using v1.50.1. However the demo site doesn't seem to have this issue. I'm experiencing something similar to the above mentioned duplication issue, but in my case it doesn't happen when I want to go back from the administration page to the home page, but the other way around. I tried opening the administration page directly with the url and it opens correctly, but when click on the Immich logo to go back it freezes mid-render: ![immich_bug](https://user-images.githubusercontent.com/43452607/222154492-f296e2c0-217c-40e7-9c9a-43d519c14b1b.png) The chrome task manager shows very high cpu usage for the immich tab and it is unresponsive.
Author
Owner

@rardxyz commented on GitHub (Mar 3, 2023):

I am also experiencing this issue.

@rardxyz commented on GitHub (Mar 3, 2023): I am also experiencing this issue.
Author
Owner

@martabal commented on GitHub (Mar 3, 2023):

Same here

@martabal commented on GitHub (Mar 3, 2023): Same here
Author
Owner

@michelheusschen commented on GitHub (Mar 3, 2023):

Was able to break routing by navigating between /photos and /admin/user-management very quickly, but I don't think that's the same issue you guys are describing. The pages don't become nested and the tab doesn't freeze.

Does the issue also occur when navigating from other pages than Photos to the administration page?

@michelheusschen commented on GitHub (Mar 3, 2023): Was able to break routing by navigating between `/photos` and `/admin/user-management` very quickly, but I don't think that's the same issue you guys are describing. The pages don't become nested and the tab doesn't freeze. Does the issue also occur when navigating from other pages than `Photos` to the administration page?
Author
Owner

@rardxyz commented on GitHub (Mar 4, 2023):

Yes, it occurs navigating to the admin page from other pages not just photos.

@rardxyz commented on GitHub (Mar 4, 2023): Yes, it occurs navigating to the admin page from other pages not just photos.
Author
Owner

@michelheusschen commented on GitHub (Mar 5, 2023):

Would anyone be able to test a potential fix for this? I can't do this myself as I'm unable to reproduce the issue.

To test it, use ghcr.io/immich-app/immich-web:pr-1942 as the image for the immich-web container. You can always revert to the default altran1502/immich-web:release if things are broken.

@michelheusschen commented on GitHub (Mar 5, 2023): Would anyone be able to test a potential fix for this? I can't do this myself as I'm unable to reproduce the issue. To test it, use `ghcr.io/immich-app/immich-web:pr-1942` as the image for the `immich-web` container. You can always revert to the default `altran1502/immich-web:release` if things are broken.
Author
Owner

@rardxyz commented on GitHub (Mar 5, 2023):

I tested it and fixes my issues! Thanks!

@rardxyz commented on GitHub (Mar 5, 2023): I tested it and fixes my issues! Thanks!
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: immich-app/immich#724