[BUG] Web UI always freezes #827

Closed
opened 2026-02-04 22:51:39 +03:00 by OVERLORD · 11 comments
Owner

Originally created by @ghost on GitHub (Apr 21, 2023).

The bug

The web interface freezes and won't show anything even after reload, forced reload, cleared cache, and extensions disabled.
I reinstalled Chrome and was able to connect, but a short time later, the bug reappeared...
Yet, it works perfectly in incognito.

The following error pops up in the browser console:
image

The buttons redirect to the correct urls but nothing else is showing up
Recording-2023-04-21-215937_2

The OS that Immich Server is running on

Debian 11 (Raspberry Pi OS 64-bit)

Version of Immich Server

v1.54.0

Version of Immich Mobile App

v1.54.0

Platform with the issue

  • Server
  • Web
  • Mobile

Your docker-compose.yml content

version: "3.8"

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

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

  immich-web:
    container_name: immich_web
    image: ghcr.io/immich-app/immich-web:release
    entrypoint: ["/bin/sh", "./entrypoint.sh"]
    env_file:
      - .env
    restart: always

  typesense:
    container_name: immich_typesense
    image: typesense/typesense:0.24.0
    environment:
      - TYPESENSE_API_KEY=${TYPESENSE_API_KEY}
      - TYPESENSE_DATA_DIR=/data
    logging:
      driver: none
    volumes:
      - tsdata:/data
    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:
      - pgdata:/var/lib/postgresql/data
    restart: always

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

volumes:
  pgdata:
  model-cache:
  tsdata:

Your .env content

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

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

# Optional Database settings:
# DB_PORT=5432

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

REDIS_HOSTNAME=immich_redis

# REDIS_URL will be used to pass custom options to ioredis.
# Example for Sentinel
# {"sentinels":[{"host":"redis-sentinel-node-0","port":26379},{"host":"redis-sentinel-node-1","port":26379},{"host":"redis-sentinel-node-2","port":26379}],"name":"redis-sentinel"}
# REDIS_URL=ioredis://eyJzZW50aW5lbHMiOlt7Imhvc3QiOiJyZWRpcy1zZW50aW5lbDEiLCJwb3J0IjoyNjM3OX0seyJob3N0IjoicmVkaXMtc2VudGluZWwyIiwicG9ydCI6MjYzNzl9XSwibmFtZSI6Im15bWFzdGVyIn0=

# Optional Redis settings:

# Note: these parameters are not automatically passed to the Redis Container
# to do so, please edit the docker-compose.yml file as well. Redis is not configured
# via environment variables, only redis.conf or the command line

# REDIS_PORT=6379
# REDIS_DBINDEX=0
# REDIS_USERNAME=
# REDIS_PASSWORD=
# REDIS_SOCKET=

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

UPLOAD_LOCATION=/mnt/ssd/immich-media


###################################################################################
# Typesense
###################################################################################
TYPESENSE_API_KEY=redacted
# TYPESENSE_ENABLED=false
# TYPESENSE_URL uses base64 encoding for the nodes json.
# Example JSON that was used:
# [
#      { 'host': 'typesense-1.example.net', 'port': '443', 'protocol': 'https' },
#      { 'host': 'typesense-2.example.net', 'port': '443', 'protocol': 'https' },
#      { 'host': 'typesense-3.example.net', 'port': '443', 'protocol': 'https' },
#  ]
# TYPESENSE_URL=ha://WwogICAgeyAnaG9zdCc6ICd0eXBlc2Vuc2UtMS5leGFtcGxlLm5ldCcsICdwb3J0JzogJzQ0MycsICdwcm90b2NvbCc6ICdodHRwcycgfSwKICAgIHsgJ2hvc3QnOiAndHlwZXNlbnNlLTIuZXhhbXBsZS5uZXQnLCAncG9ydCc6ICc0NDMnLCAncHJvdG9jb2wnOiAnaHR0cHMnIH0sCiAgICB7ICdob3N0JzogJ3R5cGVzZW5zZS0zLmV4YW1wbGUubmV0JywgJ3BvcnQnOiAnNDQzJywgJ3Byb3RvY29sJzogJ2h0dHBzJyB9LApd

###################################################################################
# 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=2

####################################################################################
# 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=false

####################################################################################
# Alternative API's External Address - Optional
#
# This is an advanced feature used to control the public server endpoint returned to clients during Well-known discovery.
# You should only use this if you want mobile apps to access the immich API over a custom URL. Do not include trailing slash.
# NOTE: At this time, the web app will not be affected by this setting and will continue to use the relative path: /api
# Examples: http://localhost:3001, http://immich-api.example.com, etc
####################################################################################

#IMMICH_API_URL_EXTERNAL=http://localhost:3001

Reproduction steps

1. Access immich web page
2. Log In
3. Freeze :(

Additional information

The web page runs behind caddy, here is the Caddyfile

redacted.com {
        reverse_proxy 127.0.0.1:2283
}
Originally created by @ghost on GitHub (Apr 21, 2023). ### The bug The web interface freezes and won't show anything even after reload, forced reload, cleared cache, and extensions disabled. I reinstalled Chrome and was able to connect, but a short time later, the bug reappeared... Yet, it works perfectly in incognito. The following error pops up in the browser console: ![image](https://user-images.githubusercontent.com/66694178/233723233-222b03e0-e885-449c-b65d-bdfa4b154d4a.png) The buttons redirect to the correct urls but nothing else is showing up ![Recording-2023-04-21-215937_2](https://user-images.githubusercontent.com/66694178/233724949-7cc17a1e-3c15-46e2-9260-ebb6336d39d9.gif) ### The OS that Immich Server is running on Debian 11 (Raspberry Pi OS 64-bit) ### Version of Immich Server v1.54.0 ### Version of Immich Mobile App v1.54.0 ### 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: ghcr.io/immich-app/immich-server:release entrypoint: ["/bin/sh", "./start-server.sh"] volumes: - ${UPLOAD_LOCATION}:/usr/src/app/upload environment: - TZ=Europe/Paris env_file: - .env depends_on: - redis - database - typesense restart: always immich-microservices: container_name: immich_microservices image: ghcr.io/immich-app/immich-server:release entrypoint: ["/bin/sh", "./start-microservices.sh"] environment: - TZ=Europe/Paris volumes: - ${UPLOAD_LOCATION}:/usr/src/app/upload env_file: - .env depends_on: - redis - database - typesense restart: always immich-web: container_name: immich_web image: ghcr.io/immich-app/immich-web:release entrypoint: ["/bin/sh", "./entrypoint.sh"] env_file: - .env restart: always typesense: container_name: immich_typesense image: typesense/typesense:0.24.0 environment: - TYPESENSE_API_KEY=${TYPESENSE_API_KEY} - TYPESENSE_DATA_DIR=/data logging: driver: none volumes: - tsdata:/data 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: - pgdata:/var/lib/postgresql/data restart: always immich-proxy: container_name: immich_proxy image: ghcr.io/immich-app/immich-proxy:release environment: # Make sure these values get passed through from the env file - IMMICH_SERVER_URL - IMMICH_WEB_URL ports: - 2283:8080 logging: driver: none depends_on: - immich-server restart: always volumes: pgdata: model-cache: tsdata: ``` ### Your .env content ```Shell ################################################################################### # Database ################################################################################### DB_HOSTNAME=immich_postgres DB_USERNAME=postgres DB_PASSWORD=redacted DB_DATABASE_NAME=immich # Optional Database settings: # DB_PORT=5432 ################################################################################### # Redis ################################################################################### REDIS_HOSTNAME=immich_redis # REDIS_URL will be used to pass custom options to ioredis. # Example for Sentinel # {"sentinels":[{"host":"redis-sentinel-node-0","port":26379},{"host":"redis-sentinel-node-1","port":26379},{"host":"redis-sentinel-node-2","port":26379}],"name":"redis-sentinel"} # REDIS_URL=ioredis://eyJzZW50aW5lbHMiOlt7Imhvc3QiOiJyZWRpcy1zZW50aW5lbDEiLCJwb3J0IjoyNjM3OX0seyJob3N0IjoicmVkaXMtc2VudGluZWwyIiwicG9ydCI6MjYzNzl9XSwibmFtZSI6Im15bWFzdGVyIn0= # Optional Redis settings: # Note: these parameters are not automatically passed to the Redis Container # to do so, please edit the docker-compose.yml file as well. Redis is not configured # via environment variables, only redis.conf or the command line # REDIS_PORT=6379 # REDIS_DBINDEX=0 # REDIS_USERNAME= # REDIS_PASSWORD= # REDIS_SOCKET= ################################################################################### # Upload File Location # # This is the location where uploaded files are stored. ################################################################################### UPLOAD_LOCATION=/mnt/ssd/immich-media ################################################################################### # Typesense ################################################################################### TYPESENSE_API_KEY=redacted # TYPESENSE_ENABLED=false # TYPESENSE_URL uses base64 encoding for the nodes json. # Example JSON that was used: # [ # { 'host': 'typesense-1.example.net', 'port': '443', 'protocol': 'https' }, # { 'host': 'typesense-2.example.net', 'port': '443', 'protocol': 'https' }, # { 'host': 'typesense-3.example.net', 'port': '443', 'protocol': 'https' }, # ] # TYPESENSE_URL=ha://WwogICAgeyAnaG9zdCc6ICd0eXBlc2Vuc2UtMS5leGFtcGxlLm5ldCcsICdwb3J0JzogJzQ0MycsICdwcm90b2NvbCc6ICdodHRwcycgfSwKICAgIHsgJ2hvc3QnOiAndHlwZXNlbnNlLTIuZXhhbXBsZS5uZXQnLCAncG9ydCc6ICc0NDMnLCAncHJvdG9jb2wnOiAnaHR0cHMnIH0sCiAgICB7ICdob3N0JzogJ3R5cGVzZW5zZS0zLmV4YW1wbGUubmV0JywgJ3BvcnQnOiAnNDQzJywgJ3Byb3RvY29sJzogJ2h0dHBzJyB9LApd ################################################################################### # 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=2 #################################################################################### # 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=false #################################################################################### # Alternative API's External Address - Optional # # This is an advanced feature used to control the public server endpoint returned to clients during Well-known discovery. # You should only use this if you want mobile apps to access the immich API over a custom URL. Do not include trailing slash. # NOTE: At this time, the web app will not be affected by this setting and will continue to use the relative path: /api # Examples: http://localhost:3001, http://immich-api.example.com, etc #################################################################################### #IMMICH_API_URL_EXTERNAL=http://localhost:3001 ``` ### Reproduction steps ```bash 1. Access immich web page 2. Log In 3. Freeze :( ``` ### Additional information The web page runs behind caddy, here is the Caddyfile ``` redacted.com { reverse_proxy 127.0.0.1:2283 } ```
Author
Owner

@alextran1502 commented on GitHub (Apr 22, 2023):

Oh man, you might run into an edge case of the size of your storage, somehow causing the conversion to fail. Will push out a fix in the next release.

image

At the meantime, you can try do one of the two options below to fix the issue

  1. Decrese or increase your maximum allowable storage for Immich
  2. Try uploading some more items from the mobile app
@alextran1502 commented on GitHub (Apr 22, 2023): Oh man, you might run into an edge case of the size of your storage, somehow causing the conversion to fail. Will push out a fix in the next release. <img width="230" alt="image" src="https://user-images.githubusercontent.com/27055614/233736671-cfccecf5-92fe-453e-a8dc-0719708d3140.png"> At the meantime, you can try do one of the two options below to fix the issue 1. Decrese or increase your maximum allowable storage for Immich 2. Try uploading some more items from the mobile app
Author
Owner

@michelheusschen commented on GitHub (Apr 22, 2023):

Could you share the response when you go to https://yourdomain.com/api/server-info?

@michelheusschen commented on GitHub (Apr 22, 2023): Could you share the response when you go to `https://yourdomain.com/api/server-info`?
Author
Owner

@ghost commented on GitHub (Apr 22, 2023):

Glad to know it will be fixed soon !
Here is the response of https://yourdomain.com/api/server-info:

{"diskAvailable":"403.5 GiB","diskSize":"931.5 GiB","diskUse":"528.0 GiB","diskAvailableRaw":433229176832,"diskSizeRaw":1000203087872,"diskUseRaw":566973911040,"diskUsagePercentage":56.69}
@ghost commented on GitHub (Apr 22, 2023): Glad to know it will be fixed soon ! Here is the response of `https://yourdomain.com/api/server-info`: ``` {"diskAvailable":"403.5 GiB","diskSize":"931.5 GiB","diskUse":"528.0 GiB","diskAvailableRaw":433229176832,"diskSizeRaw":1000203087872,"diskUseRaw":566973911040,"diskUsagePercentage":56.69} ```
Author
Owner

@ghost commented on GitHub (Apr 22, 2023):

That's weird, I visited https://yourdomain.com/api/server-info, and now everything works wonderfully

Still, when I go to the "job-status" page in the admin section, the error appears, but differently:
image

@ghost commented on GitHub (Apr 22, 2023): That's weird, I visited `https://yourdomain.com/api/server-info`, and now everything works wonderfully Still, when I go to the "job-status" page in the admin section, the error appears, but differently: ![image](https://user-images.githubusercontent.com/66694178/233774044-c2f73159-0391-43fe-96db-4b0b28bff32d.png)
Author
Owner

@alextran1502 commented on GitHub (Apr 22, 2023):

@lucasladreyt does it happen when you access your instance using local IP?

@alextran1502 commented on GitHub (Apr 22, 2023): @lucasladreyt does it happen when you access your instance using local IP?
Author
Owner

@ghost commented on GitHub (Apr 22, 2023):

@lucasladreyt does it happen when you access your instance using local IP?

Nice catch, the "jobCounts" error does not appear using local IP

Odd behaviour since I don't modify the headers nor the content of the proxied data (apart the http->https process). I just use raw reverse proxy with caddy

Caddyfile: redacted.com { reverse_proxy 127.0.0.1:2283 }

@ghost commented on GitHub (Apr 22, 2023): > @lucasladreyt does it happen when you access your instance using local IP? Nice catch, the "jobCounts" error does not appear using local IP Odd behaviour since I don't modify the headers nor the content of the proxied data (apart the http->https process). I just use raw reverse proxy with caddy Caddyfile: `redacted.com { reverse_proxy 127.0.0.1:2283 }`
Author
Owner

@alextran1502 commented on GitHub (Apr 22, 2023):

Indeed this is strange, and I use Caddy myself with pretty much the same setting and haven't encountered this error

@alextran1502 commented on GitHub (Apr 22, 2023): Indeed this is strange, and I use Caddy myself with pretty much the same setting and haven't encountered this error
Author
Owner

@bo0tzz commented on GitHub (Apr 22, 2023):

Could it be a browser plugin?

@bo0tzz commented on GitHub (Apr 22, 2023): Could it be a browser plugin?
Author
Owner

@ghost commented on GitHub (Apr 22, 2023):

Could it be a browser plugin?

Nope, already tried

@ghost commented on GitHub (Apr 22, 2023): > Could it be a browser plugin? Nope, already tried
Author
Owner

@jrasm91 commented on GitHub (Apr 23, 2023):

If you feel adventurous you could try opening dev tools and break on uncaught exception to see what asset/element is causing the issue.

@jrasm91 commented on GitHub (Apr 23, 2023): If you feel adventurous you could try opening dev tools and break on uncaught exception to see what asset/element is causing the issue.
Author
Owner

@ghost commented on GitHub (Apr 25, 2023):

The bug didn't appear in 3 days, and @alextran1502 fixed the part of the code that could have caused it (#2314), even tho it hasn't been released yet.
Weird issue, feel free to reopen it.

@ghost commented on GitHub (Apr 25, 2023): The bug didn't appear in 3 days, and @alextran1502 fixed the part of the code that could have caused it (#2314), even tho it hasn't been released yet. Weird issue, feel free to reopen it.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: immich-app/immich#827