immich-app / immich

High performance self-hosted photo and video management solution.
https://immich.app
GNU Affero General Public License v3.0
49.15k stars 2.58k forks source link

Image thumbnails fails to load when clicking timeline back / forth (failed promise) #13574

Open ygaeon opened 2 days ago

ygaeon commented 2 days ago

The bug

Image thumbnails fails to load when clicking timeline back / forth a few times (eg. while searching in the timeline).

Can observe Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'split') in browser Console.

After which the entire UI is "frozen" and no longer works. A page reload is necessary.

I don't know if relevant but I have ~80k images between two users and one external library. The area where I scroll to contains the images from the external library.

Image of error

The OS that Immich Server is running on

Debian

Version of Immich Server

v1.118.2

Version of Immich Mobile App

v1.118.0

Platform with the issue

Did not observe this in the mobile app.

Your docker-compose.yml content

N/A .. running podman

podman pod create --name $POD --hostname immich --publish 2283:2283

podman run -d --pod $POD --name immich_redis redis:6.2-alpine 

podman run -d --pod $POD --name immich_postgres --env-file $ENV --volume $DATA/postgres:/var/lib/postgresql/data tensorchord/pgvecto-rs:pg14-v0.2.0

podman run -d --pod $POD --name immich_machine_learning --env-file $ENV --volume $DATA/model-cache:/cache immich-machine-learning:$VER

podman run -d --pod $POD --name immich_server --env-file $ENV --volume $d/upload:/usr/src/app/upload --volume <EXT LIB PATH>:/mnt/photos:ro --volume /etc/localtime:/etc/localtime:ro immich-server:$VER

Your .env content

# General
TZ="Europe/Stockholm"

# Database
DB_HOSTNAME=immich_postgres
DB_USERNAME=immich
DB_PASSWORD=xxxxx

DB_DATABASE=immich
DB_DATABASE_NAME=immich

# Postgres
POSTGRES_USER=immich
POSTGRES_PASSWORD=xxxxx
POSTGRES_DB=immich

# Redis
REDIS_HOSTNAME=immich_redis

Reproduction steps

  1. Click in the timeline (in my case 2012)
  2. Click another part of the timeline (in my case 2013)
  3. Repeat 1 and 2 clicking different parts of the timeline
  4. Exception is observed in Console

Relevant log output

Brave browser exception # Brave browser exception ``` Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'split') at bl (portal.BczTKgiU.js:1:7219) at Ke (thumbnail.BJilVSeS.js:1:19582) at Le (thumbnail.BJilVSeS.js:1:10817) at Object.p (thumbnail.BJilVSeS.js:1:22006) at yt (scheduler.7z7EQB7W.js:1:11059) at mt (scheduler.7z7EQB7W.js:1:10712) bl @ portal.BczTKgiU.js:1 Ke @ thumbnail.BJilVSeS.js:1 Le @ thumbnail.BJilVSeS.js:1 p @ thumbnail.BJilVSeS.js:1 yt @ scheduler.7z7EQB7W.js:1 mt @ scheduler.7z7EQB7W.js:1 Promise.then (async) ht @ scheduler.7z7EQB7W.js:1 ht @ index.DoTFCMjV.js:4 (anonymous) @ index.DoTFCMjV.js:4 Ce @ thumbnail.BJilVSeS.js:1 (anonymous) @ thumbnail.BJilVSeS.js:1 s @ shortcut.BJeuo_kK.js:1 (anonymous) @ shortcut.BJeuo_kK.js:1 setTimeout (async) scheduleDrainIntersectedQueue @ shortcut.BJeuo_kK.js:1 (anonymous) @ shortcut.BJeuo_kK.js:1 setTimeout (async) scheduleDrainIntersectedQueue @ shortcut.BJeuo_kK.js:1 (anonymous) @ shortcut.BJeuo_kK.js:1 setTimeout (async) scheduleDrainIntersectedQueue @ shortcut.BJeuo_kK.js:1 (anonymous) @ shortcut.BJeuo_kK.js:1 setTimeout (async) scheduleDrainIntersectedQueue @ shortcut.BJeuo_kK.js:1 queueScrollSensitiveTask @ shortcut.BJeuo_kK.js:1 scheduleIntersected @ shortcut.BJeuo_kK.js:1 intersectedThumbnail @ shortcut.BJeuo_kK.js:1 intersectedThumbnail @ shortcut.BJeuo_kK.js:1 st @ thumbnail.BJilVSeS.js:1 IntersectionObserver.rootMargin @ thumbnail.BJilVSeS.js:1 ```
Firefox browser exception # Firefox browser exception ``` 11:52:43.599 Uncaught (in promise) TypeError: e[2] is undefined Immutable 74 bl Ke Le p yt mt promise callback*ht ht ctx Ce st s drainIntersectedQueue queueScrollSensitiveTask scheduleIntersected intersectedThumbnail intersectedThumbnail st g jt Ve He Rt m _t m m p pe X Y pe p yt mt promise callback*ht ht ctx A a emit updateBucketDateGroup V s queueTimer setTimeout handler*scheduleDrainIntersectedQueue queueScrollSensitiveTask scheduleIntersected intersectedDateGroup intersectedDateGroup V k g jt Ve He Rt m m _t m p pe X Y pe p yt mt promise callback*ht ht ctx A a portal.BczTKgiU.js:1:7209 Immutable 25 mt (Async: promise callback) ht ht ctx Ce st s drainIntersectedQueue queueScrollSensitiveTask scheduleIntersected intersectedThumbnail intersectedThumbnail st g (Async: IntersectionCallback) jt Ve He Rt m _t m m p pe X forEach self-hosted:157 Immutable 34 Y pe p yt mt (Async: promise callback) ht ht ctx A a emit updateBucketDateGroup V s queueTimer (Async: setTimeout handler) scheduleDrainIntersectedQueue queueScrollSensitiveTask scheduleIntersected intersectedDateGroup intersectedDateGroup V k g (Async: IntersectionCallback) jt Ve He Rt m m _t m p pe X forEach self-hosted:157 Immutable 10 Y pe p yt mt (Async: promise callback) ht ht ctx A a ```
zynexiz commented 2 days ago

Just noticed the same, seems that the entire interface freezes. Can't change pages, jump to other times etc.

ygaeon commented 2 days ago

Exactly that @zynexiz .. same .. thanks for reminding me (Updated the main issue description)

zynexiz commented 2 days ago

Although, it doesn't seems to happen all the time. Scrolling thru albums doesn't crash it, but the number of images are lot less than my entire collection, so it could have something to do with the number of objects?

zynexiz commented 2 days ago

Seems like it could have something to do with this error? Did some testing, and as soon as this error occurred, the webpage failed.

Skärmbild_20241018_164005

[EDIT] Saw that you mentioned that in the report :)