search

MDeLuise / plant-it

🪴 Self-hosted, open source gardening companion app
https://plant-it.org
GNU General Public License v3.0
686 stars 25 forks source link

Adding plant from Trefle without thumbnail results in TypeError #141

Closed WallK closed 6 months ago

WallK commented 7 months ago

Avoid duplicated bug reports

Description

While trying to add a plant using search on Trefle feature while said plant does not have a thumbnail -- nothing happens on UI and I get this error in console: TypeError: Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'.

It could

Expected behaviour

Plant should be added even without the thumbnail

Steps to reproduce

  1. Go to the species (search icon) tab
  2. Search for "Raphanus raphanistrum subsp. sativus"
  3. Select the "Raphanus raphanistrum subsp. sativus" result from Trefle
  4. Try to save the plant

The same is true for some other thumbnailless plants, for example "Petroselinum crispum subsp. giganteum" or "Polyscias muraltana"

Local environment

Docker, 0.4.3

Additional info

Here's the full error:

AddPlant.tsx:789 Uncaught (in promise) TypeError: Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'.
    at AddPlant.tsx:789:20
    at new Promise (<anonymous>)
    at v (AddPlant.tsx:776:9)
    at AddPlant.tsx:757:17
    at new Promise (<anonymous>)
    at g (AddPlant.tsx:738:16)
    at AddPlant.tsx:696:21
(anonymous) @ AddPlant.tsx:789
v @ AddPlant.tsx:776
(anonymous) @ AddPlant.tsx:757
g @ AddPlant.tsx:738
(anonymous) @ AddPlant.tsx:696
Promise.then (async)
(anonymous) @ AddPlant.tsx:758
g @ AddPlant.tsx:738
(anonymous) @ AddPlant.tsx:696
Promise.then (async)
onClick @ AddPlant.tsx:682
Le @ react-dom.production.min.js:54
Ve @ react-dom.production.min.js:54
(anonymous) @ react-dom.production.min.js:55
zr @ react-dom.production.min.js:105
Fr @ react-dom.production.min.js:106
(anonymous) @ react-dom.production.min.js:117
uc @ react-dom.production.min.js:274
je @ react-dom.production.min.js:52
Ur @ react-dom.production.min.js:109
Gt @ react-dom.production.min.js:74
qt @ react-dom.production.min.js:73
WallK commented 7 months ago

Additional info: if you try to change the thumbnail to image from URL -- it seems like it saves it, but then I get this error in UI: More than one row with the given identifier was found: 110, for class: com.github.mdeluise.plantit.image.BotanicalInfoImage and no plants are displayed after reload. Here's an error from console:

{
    "message": "Request failed with status code 500",
    "name": "AxiosError",
    "stack": "AxiosError: Request failed with status code 500\n    at http://stacky.local:3000/static/js/main.2a4bcdd5.js:2:449683\n    at XMLHttpRequest.p (http://stacky.local:3000/static/js/main.2a4bcdd5.js:2:449831)\n    at Hs.request (http://stacky.local:3000/static/js/main.2a4bcdd5.js:2:455461)",
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "adapter": [
            "xhr",
            "http"
        ],
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": "10000",
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {},
        "headers": {
            "Accept": "application/json, text/plain, */*",
            "Key": "AqlQ8m6E85EW9ObSAhCmHUzG4s+rdPL/Cua130daLqSgDJwDi5JbdOSysB7nRRyZHubF591tlRnnvIQ0lLVoIw=="
        },
        "baseURL": "http://stacky.local:3001/api",
        "maxRedirects": 3,
        "method": "get",
        "url": "plant?sortBy=infoPersonalName&sortDir=ASC&pageSize=8"
    },
    "code": "ERR_BAD_RESPONSE",
    "status": 500
}

response:

{
    "data": {
        "statusCode": 500,
        "errorCode": "INTERNAL_SERVER_ERROR",
        "message": "More than one row with the given identifier was found: 110, for class: com.github.mdeluise.plantit.image.BotanicalInfoImage"
    },
    "status": 500,
    "statusText": "",
    "headers": {
        "cache-control": "no-cache, no-store, max-age=0, must-revalidate",
        "content-type": "application/json",
        "expires": "0",
        "pragma": "no-cache"
    },
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "adapter": [
            "xhr",
            "http"
        ],
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": "10000",
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {},
        "headers": {
            "Accept": "application/json, text/plain, */*",
            "Key": "AqlQ8m6E85EW9ObSAhCmHUzG4s+rdPL/Cua130daLqSgDJwDi5JbdOSysB7nRRyZHubF591tlRnnvIQ0lLVoIw=="
        },
        "baseURL": "http://stacky.local:3001/api",
        "maxRedirects": 3,
        "method": "get",
        "url": "plant?sortBy=infoPersonalName&sortDir=ASC&pageSize=8"
    },
    "request": {}
}

STR:

  1. Go to the species (search icon) tab
  2. Search for "Raphanus raphanistrum subsp. sativus"
  3. Select the "Raphanus raphanistrum subsp. sativus" result from Trefle
  4. Press edit button in top right
  5. Press edit in thumbnail row
  6. Add "https://storage.googleapis.com/powop-assets/kew_profiles/KPPCONT_071661_fullsize.jpg" as image URL
  7. Try to save the plant
WallK commented 7 months ago

Deleting row with id 110 from botanical_infos (and associated plants) makes app usable again

MDeLuise commented 6 months ago

Hi @WallK, thanks for opening the issue. A new version of the project has just been released (0.5.0), could you please upgrade the deployment and check if the bug still persists? Please note that this upgrade introduces lot of changes, starting from the deployment file.

WallK commented 6 months ago

Hello! I've redeployed new plant-it-server (run the SQL command you suggest in release notes) and didn't change the DB Didn't change the env file either Now I get the

Certificate files are up-to-date.
SSL enabled: false
wait-for-it.sh: waiting 120 seconds for db:3306
wait-for-it.sh: timeout occurred after waiting 120 seconds for db:3306
DB not available, exiting.

But the db user exists, password works, port is the same

What could be the issue and how to see more verbose logs?

Other services that use the same db container work as before

WallK commented 6 months ago

Here's the excerpt from compose file:

  # === PLANT-IT ===
  plant-it-server:
    container_name: plant-it-server
    image: msdeluise/plant-it-server:latest
    env_file:
      - ./envs/plant-it-backend.env
      - ./envs/plant-it-backend_secrets.env
    depends_on:
      - mariadb
      - redis-cache
    volumes:
      - "./volumes/plant-it/upload-dir:/upload-dir"
      - "./volumes/plant-it/certs:/certificates"
      # - "certs:/certificates" #bound to tmpfs or something similar?
    ports:
      - "3000:3000" #frontend port
      - "3001:8080" #API port
    restart: unless-stopped

  mariadb:
    container_name: mariadb
    image: lscr.io/linuxserver/mariadb:latest
    env_file:
      - ./envs/mariadb.env
      - ./envs/mariadb_secrets.env
    ports:
      - "3306:3306"
    volumes:
      - ./volumes/mariadb/config:/config
      - ./volumes/mariadb/db_backup:/backup
    restart: unless-stopped

  redis-cache:
    container_name: redis-cache
    image: redis:7.2.1
    depends_on:
      - mariadb
    expose:
      - "6379"
    restart: always

Here's plant-it-backend.env:

#
# DB
#
MYSQL_HOST=mariadb
MYSQL_PORT=3306
MYSQL_DATABASE=plantitdb

#
# JWT
#
JWT_EXP=1

#
# Server config
#
USERS_LIMIT=-1
UPLOAD_DIR=/upload-dir
API_PORT=8080
ALLOWED_ORIGINS=*
LOG_LEVEL=DEBUG
UPDATE_EXISTING=false

#
# Cache
#
CACHE_TTL=86400
CACHE_HOST=redis-cache
CACHE_PORT=6379

#
# SSL
#
SSL_ENABLED=false
CERTIFICATE_PATH=/certificates/

Here's plant-it-backend_secrets.env:

#
# DB
#
MYSQL_USERNAME=plantit
MYSQL_PSW=***
# MYSQL_ROOT_PASSWORD=root

#
# JWT
#
JWT_SECRET=***

TREFLE_KEY=***

Here's mariadb.env and secrets:

TZ=Etc/UTC
PUID=1000
PGID=1000

MYSQL_ROOT_PASSWORD=***
MYSQL_DATABASE=***
MYSQL_USER=***
MYSQL_PASSWORD=***
WallK commented 6 months ago

This is what I see in DB logs 2024-04-29 8:53:12 112589 [Warning] Aborted connection 112589 to db: 'plantitdb' user: 'plantit' host: 'plant-it-backend.stack_default' (Got an error reading communication packets)

This could be unrelated because I can't catch it again after restarting everything

MDeLuise commented 6 months ago

I think the problem could reside in the name of the db service

mariadb:
    container_name: mariadb
    image: lscr.io/linuxserver/mariadb:latest
    env_file:
      - ./envs/mariadb.env
      - ./envs/mariadb_secrets.env
    ports:
      - "3306:3306"
    volumes:
      - ./volumes/mariadb/config:/config
      - ./volumes/mariadb/db_backup:/backup
    restart: unless-stopped

Please try to change the code above to this (note the container_name: db)

mariadb:
    container_name: db
    image: lscr.io/linuxserver/mariadb:latest
    env_file:
      - ./envs/mariadb.env
      - ./envs/mariadb_secrets.env
    ports:
      - "3306:3306"
    volumes:
      - ./volumes/mariadb/config:/config
      - ./volumes/mariadb/db_backup:/backup
    restart: unless-stopped

And check if the problem persists. This because the server waits for the db:3306 host to be up and running before starting, but in your deployment no db service is found

WallK commented 6 months ago

Doesn't MYSQL_HOST env var control what the DB host is expected? It was like this in the previous version, and it's set to "mariadb" in my env file Did you deprecate this env var? It's in the documentation still

MDeLuise commented 6 months ago

You're correct about the MYSQL_HOST environment variable. It should indeed specify the name of the database host. Unfortunately, in the latest version of the server service, the startup script has db:3306 hardcoded instead of using the $MYSQL_HOST:$MYSQL_PORT variables. To address this issue, I've just pushed a new latest version of the server container. Please remove the previously downloaded server image and then download it again. This should resolve the issue of DB not available, exiting.

If so, could you please try this and let me know if the original issue still persists? I've also tried to reproduce it in version 0.5.0 of the project, and it seems to be fixed.

WallK commented 6 months ago

It works! It's borderline unusable on desktop, but I can't reproduce both issues (DB and adding plant without image) anymore! Thanks!

MDeLuise commented 6 months ago

Great to know that it works! Optimizing the app for larger screens is definitely on the agenda. Initially, I was contemplating delaying the release until the desktop view was fully polished, but I decided to push ahead with this release and focus on refining the desktop experience in subsequent updates. So, keep an eye out for the upcoming releases for the responsive design.