Issue With Mender 2.0 UI - Blank Release List Page

Hi,

I’ve recently installed Mender 2.0 (production, not demo) on a private server. I’ve encountered an issue while using the UI. The issue is similar to the one that have been mentioned in this post : UI Issue. However, it seems the produced error message is different.

Several seconds after I opened release page of the UI, the page goes blank and there is an error in the console, which says:

Invariant Violation: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=Error%3A%20Response%20timeout%20of%2010000ms%20exceeded&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 
        at main.js:1:850766
        at t (main.js:1:850869)
        at Gf (main.js:1:896317)
        at main.js:1:901020
        at S (i/main.js:1:907750)
        at main.js:1:932866
        at hi (main.js:1:934853)
        at ii (main.js:1:935225)
        at Ki (main.js:1:941691)
        at Li (main.js:1:941085)

Opening this on React Error Decoder, it says : Objects are not valid as a React child. Is it probably a bug or is there something that I haven’t configured properly?

I am not a web developer, so I haven’t fully understood yet how to probe this problem further. However, I can try to look more into the log/details if you can help me with some directions. Thank you.

Can you tell us a bit more about your system?

Which Operating System are you using?
Which Browser (make/version) are you using?

You say that it goes blank “several seconds” after opening the releases page, does this mean that you see some content first, and then it goes blank?

Sorry, I forgot to mention the system info. The server is deployed on Debian 9 Stretch.

I accessed the Mender UI on Windows 10 64-bit via Firefox version 67.0 and Chrome version 74.0.3729.169. Both browsers produce the same issue.

The UI is indeed showing the release page content (as shown below) for a while before going blank and output the error message in the console.

ping @michaelatmender

@alkindirizky thanks for letting us know. I don’t have an answer for you now but we’ll look into it.

  • Is it a fresh install - do you have any Artifacts uploaded already, or should the list be empty?
  • Do you get this error on any other pages in the UI?

Thanks!

I’m now seeing the same thing, and I’m seeing it in both Firefox and Chrome, so it’s not a version issue.

Clicking on the error link in the JS Console in Chrome takes me to this page where the error is printed in full:

Objects are not valid as a React child (found: Error: Request has been terminated Possible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.).

Any help that you can shed on this if you fixed it @alkindirizky would be very much appreciated.

OK, at least part of this was because the storage API’s weren’t starting properly.

This was because the privkey.pem file being generated by my version of certbot/letsencrypt was in the newer ---- BEGIN PRIVATE KEY ---- format rather than the older ---- BEGIN PRIVATE RSA KEY — format.

This was solved by running openssl rsa -in privkey.pem -out privkey.rsa and updating the docker-compose config to read the new file.

I now have an issue whereby the storage service appears to be trying to talk to “localhost”, which obviously isn’t going to work because mender is hosted on a completely different server:

Failed to load resource: net::ERR_CONNECTION_REFUSED
https://localhost/api/management/v1/tenantadm/user/tenant

Just to confirm, this is using Mender 2.1, and I get the “localhost” error when I try to access the following pages:

https://mender.mydomain/ui/#/devices/pending
https://mender.mydomain/ui/#/devices/rejected
https://mender.mydomain/ui/#/releases

All other URIs and pop-ups appear to be fine.

There are currently no artifacts uploaded to the system.

Thank you for pointing this out - that specific error should be just because of a missing check for our hosted solution (and is checked on page load, which is why it appears on all these pages). It should however not affect the release or devices page, but rather just pollute the console output in the browser devtools.
Is it just the error or does this still prevent the release list from rendering?

@mzedel it still prevents the release list from rendering, however having attempted to access the releases via the API and received a 404 for the given URL, I’m thinking that there’s more at play here than a browser/JS error:

+ export MENDER_SERVER=https://my.mender.server
+ MENDER_SERVER=https://my.mender.server
++ curl -s -X POST -H 'Content-Type: application/json' -u my@email.address:mypassword https://my.mender.server/api/management/v1/useradm/auth/login
+ JWT=My-Token-From-The-API
++ curl -s -H 'Accept: application/json' -H 'Authorization: Bearer My-Token-From-The-API' https://my.mender.server/api/management/v1/deployments/releases
+ releases='{"Error":"Resource not found"}'
+ echo '{"Error":"Resource' not 'found"}'
+ jq
{
  "Error": "Resource not found"
}

More on this, the server logs when running the above script are as follows:

mender-useradm_1        | time="2019-08-16T12:08:26Z" level=warning msg="Failed to extract identity from header: unknown authorization method Basic" file=middleware.go func="identity.(*IdentityMiddleware).MiddlewareFunc.func1" line=47 request_id=my-request-id
mender-api-gateway_1    | my.ip.add.ress - my@email.address [16/Aug/2019:12:08:26 +0000] "POST /api/management/v1/useradm/auth/login HTTP/1.1" 200 603 "-" "curl/7.65.3" "-" request ID "my-request-id" 0.097
mender-useradm_1        | time="2019-08-16T12:08:26Z" level=info msg="200 91906μs POST /api/management/v1/useradm/auth/login HTTP/1.0 - curl/7.65.3" file=middleware.go func="accesslog.(*AccessLogMiddleware).MiddlewareFunc.func1" line=60 request_id=my-request-id
mender-useradm_1        | time="2019-08-16T12:08:27Z" level=info msg="200 2515μs POST /api/internal/v1/useradm/auth/verify HTTP/1.0 - curl/7.65.3" file=middleware.go func="accesslog.(*AccessLogMiddleware).MiddlewareFunc.func1" line=60 request_id=my-request-id user_id=my-user-id
mender-deployments_1    | time="2019-08-16T12:08:27Z" level=info msg="404 1246μs GET /api/management/v1/deployments/releases HTTP/1.0 - curl/7.65.3" file=middleware.go func="accesslog.(*AccessLogMiddleware).MiddlewareFunc.func1" line=60 request_id=my-request-id user_id=my-user-id
mender-api-gateway_1    | my.ip.add.ress - - [16/Aug/2019:12:08:27 +0000] "GET /api/management/v1/deployments/releases HTTP/1.1" 404 30 "-" "curl/7.65.3" "-" request ID "my-request-id" 0.009

When accessing the releases page in the UI I get this:

mender-api-gateway_1    | my.ip.add.ress - - [16/Aug/2019:12:12:22 +0000] "GET /ui/ HTTP/1.1" 304 0 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36" "-" request ID "-" 0.008
mender-gui_1            | 172.21.0.13 - - [16/Aug/2019:12:12:22 +0000] "GET / HTTP/1.0" 200 417 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36"
mender-gui_1            | 172.21.0.13 - - [16/Aug/2019:12:12:22 +0000] "GET /env.js HTTP/1.0" 200 231 "https://my.mender.server/ui/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36"
mender-api-gateway_1    | my.ip.add.ress - - [16/Aug/2019:12:12:22 +0000] "GET /ui/env.js HTTP/1.1" 304 0 "https://my.mender.server/ui/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36" "-" request ID "-" 0.002
mender-gui_1            | 172.21.0.13 - - [16/Aug/2019:12:12:23 +0000] "GET /favicon.ico HTTP/1.0" 200 424 "https://my.mender.server/ui/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36"
mender-api-gateway_1    | my.ip.add.ress - - [16/Aug/2019:12:12:23 +0000] "GET /ui/favicon.ico HTTP/1.1" 200 424 "https://my.mender.server/ui/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36" "-" request ID "-" 0.002

I’m wondering if I’m missing a container somewhere?

                 Name                                Command               State           Ports         
---------------------------------------------------------------------------------------------------------
menderproduction_mender-api-gateway_1     /entrypoint.sh                   Up      0.0.0.0:443->443/tcp  
menderproduction_mender-conductor_1       /srv/start_conductor.sh          Up      8080/tcp, 8090/tcp    
menderproduction_mender-deployments_1     /entrypoint.sh --config /e ...   Up      8080/tcp              
menderproduction_mender-device-auth_1     /usr/bin/deviceauth --conf ...   Up      8080/tcp              
menderproduction_mender-elasticsearch_1   /docker-entrypoint.sh elas ...   Up      9200/tcp, 9300/tcp    
menderproduction_mender-gui_1             /entrypoint.sh nginx             Up      80/tcp                
menderproduction_mender-inventory_1       /usr/bin/inventory --confi ...   Up      8080/tcp              
menderproduction_mender-mongo_1           docker-entrypoint.sh mongod      Up      27017/tcp             
menderproduction_mender-redis_1           /redis/entrypoint.sh             Up      6379/tcp              
menderproduction_mender-useradm_1         /usr/bin/useradm --config  ...   Up      8080/tcp              
menderproduction_minio_1                  /usr/bin/docker-entrypoint ...   Up      9000/tcp              
menderproduction_storage-proxy_1          /usr/local/openresty/bin/o ...   Up      0.0.0.0:9000->9000/tcp

Try the solution at Working with S3 instead of Minio - no artifacts found and blank releases page - it fixed my issue completely.