search

vitessio / vitess

Vitess is a database clustering system for horizontal scaling of MySQL.
http://vitess.io
Apache License 2.0
18.48k stars 2.09k forks source link

Bug Report: vtadmin-web does not load in hello world example #14898

Open hq6 opened 9 months ago

hq6 commented 9 months ago

Overview of the Issue

I am following the Getting Started Guide for Local Installation and found a bug at the following step:

You can also now browse and administer your new Vitess cluster using the VTAdmin UI at the following URL:

http://localhost:14201

Reproduction Steps

  1. Follow the Getting Started guide on Ubuntu 22.04.
  2. Try to access vtadmin-web.
  3. Observe that nothing is listening at port 14201.
  4. Run the following command and see the logs: 
    
cat /home/ubuntu/my-vitess-example/examples/local/vtdataroot/tmp/vtadmin-web.out
(node:8672) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/home/ubuntu/my-vitess-example/web/vtadmin/node_modules/.bin/serve:4
import { cwd as getPwd, exit, env as env2, stdout } from "node:process";
^^^^^^

SyntaxError: Cannot use import statement outside a module at internalCompileFunction (node:internal/vm:73:18) at wrapSafe (node:internal/modules/cjs/loader:1274:20) at Module._compile (node:internal/modules/cjs/loader:1320:27) at Module._extensions..js (node:internal/modules/cjs/loader:1414:10) at Module.load (node:internal/modules/cjs/loader:1197:32) at Module._load (node:internal/modules/cjs/loader:1013:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:128:12) at node:internal/main/run_main_module:28:49

Node.js v18.19.0


### Binary Version

```sh
vtgate version Version: 18.0.2 (Git revision d3012c188ea0cfc6837917fc6642ea23be9bb1ff branch 'HEAD') built on Wed Dec 20 14:27:31 UTC 2023 by runner@fv-az975-901 using go1.21.5 linux/amd64

### Operating System and Environment details

```sh
ubuntu@ip-10-170-116-99:~/my-vitess-example/examples/local$ cat /etc/os-release
PRETTY_NAME="Ubuntu 22.04.3 LTS"
NAME="Ubuntu"
VERSION_ID="22.04"
VERSION="22.04.3 LTS (Jammy Jellyfish)"
VERSION_CODENAME=jammy
ID=ubuntu
ID_LIKE=debian
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
UBUNTU_CODENAME=jammy

ubuntu@ip-10-170-116-99:~/my-vitess-example/examples/local$ uname -sr
Linux 6.2.0-1017-aws

ubuntu@ip-10-170-116-99:~/my-vitess-example/examples/local$ uname -m
x86_64

### Log Fragments

```sh
cat /home/ubuntu/my-vitess-example/examples/local/vtdataroot/tmp/vtadmin-web.out
(node:8672) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/home/ubuntu/my-vitess-example/web/vtadmin/node_modules/.bin/serve:4
import { cwd as getPwd, exit, env as env2, stdout } from "node:process";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1274:20)
    at Module._compile (node:internal/modules/cjs/loader:1320:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
    at Module.load (node:internal/modules/cjs/loader:1197:32)
    at Module._load (node:internal/modules/cjs/loader:1013:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:128:12)
    at node:internal/main/run_main_module:28:49

Node.js v18.19.0
hq6 commented 9 months ago

I was able to workaround this by manually adding a package.json to .bin with the following contents.

{
          "type": "module"
}
notfelineit commented 9 months ago

Thanks for catching this! We'll take a look.

hq6 commented 8 months ago

After the web UI loaded, it displayed everything as 0 even though there are tables when I query with MySQL in this example.

Screenshot 2024-01-08 at 5 18 17 PM
skanadian commented 7 months ago

The package.json fix works for me.

After the web UI loaded, it displayed everything as 0 even though there are tables when I query with MySQL in this example.

You can modify web/vtadmin/build/assets/index-*.js by searching for VITE_VTADMIN_API_ADDRESS and setting it correctly. ie VITE_VTADMIN_API_ADDRESS:"http://host.fqdn:14200"

ajm188 commented 7 months ago

hi @hq6, is this still happening for you? i'm not able to reproduce it

czxin788 commented 4 months ago

The bug is still exists in vitess-19.0.4.

vitess@database-vitess01:~/vitess/examples/local$ ../common/scripts/vtadmin-up.sh
vtadmin-api http-origin set to "http://10.221.252.139:14201"
vtadmin-api is running!
  - API: http://10.221.252.139:14200
  - Logs: /home/vitess/vitess/examples/local/vtdataroot/tmp/vtadmin-api.out
  - PID: 38005

Building vtadmin-web...
../common/scripts/../../../web/vtadmin/build.sh: line 22: ../common/scripts/../../../web/vtadmin/../../build.env: No such file or directory

Installing nvm...

nvm is already installed!

Configuring Node.js 18.16.0

Downloading and installing node v18.16.0...
Local cache found: ${NVM_DIR}/.cache/bin/node-v18.16.0-linux-x64/node-v18.16.0-linux-x64.tar.xz
Computing checksum with sha256sum
Checksums do not match: 'a347961ab69a8af7028100cca92fe1f5935ca1d1e74ed07f071a84eb4dda2b3c' found, '44d93d9b4627fe5ae343012d855491d62c7381b236c347f7666a7ad070f26548' expected.
Checksum check failed!
Removing the broken local cache...
Downloading https://npmmirror.com/mirrors/node//v18.16.0/node-v18.16.0-linux-x64.tar.xz...
####################################################################################################################################################################################################### 100.0%####################################################################################################################################################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v18.16.0 (npm v9.5.1)
Creating default alias: default -> 18.16.0 (-> v18.16.0)
npm notice 
npm notice New major version of npm available! 9.5.1 -> 10.7.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.7.0
npm notice Run npm install -g npm@10.7.0 to update!
npm notice 

Setting VITE_VTADMIN_API_ADDRESS to "http://10.221.252.139:14200"

> vtadmin@0.1.0 build
> vite build

(node:38486) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/home/vitess/vitess/web/vtadmin/node_modules/.bin/vite:2
import { performance } from 'node:perf_hooks'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47

Node.js v18.16.0
vtadmin-web is running!
  - Browser: http://10.221.252.139:14201
  - Logs: /home/vitess/vitess/examples/local/v tdataroot/tmp/vtadmin-web.out
  - PID: 38495
czxin788 commented 4 months ago

I have solved this bug: rm -rf /home/vitess/vitess/web/vtadmin/node_modules and re excute this scirpt ../common/scripts/vtadmin-up.sh，then it is successfull.

vitess@database-vitess01:~/vitess/examples/local$ ../common/scripts/vtadmin-up.sh
vtadmin-api http-origin set to "http://10.221.252.139:14201"
vtadmin-api is running!
  - API: http://10.221.252.139:14200
  - Logs: /home/vitess/vitess/examples/local/vtdataroot/tmp/vtadmin-api.out
  - PID: 40462

Building vtadmin-web...
../common/scripts/../../../web/vtadmin/build.sh: line 22: ../common/scripts/../../../web/vtadmin/../../build.env: No such file or directory

Installing nvm...

nvm is already installed!

Configuring Node.js 18.16.0

v18.16.0 is already installed.
Now using node v18.16.0 (npm v9.5.1)

Setting VITE_VTADMIN_API_ADDRESS to "http://10.221.252.139:14200"

> vtadmin@0.1.0 build
> vite build

vite v4.5.2 building for production...
transforming (47) node_modules/react-query/es/core/mutationCache.jsBrowserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
node_modules/@protobufjs/inquire/index.js (12:18) Use of eval in "node_modules/@protobufjs/inquire/index.js" is strongly discouraged as it poses security risks and may cause issues with minification.
✓ 1229 modules transformed.
build/assets/chevronUp-3d6782a5.svg              0.18 kB │ gzip:   0.16 kB
build/assets/chevronDown-02f94e73.svg            0.19 kB │ gzip:   0.16 kB
build/assets/download-8ef290b4.svg               0.21 kB │ gzip:   0.18 kB
build/assets/delete-a9184ef9.svg                 0.23 kB │ gzip:   0.18 kB
build/assets/info-2617ee9d.svg                   0.34 kB │ gzip:   0.22 kB
build/assets/circleAdd-cfd7e5db.svg              0.35 kB │ gzip:   0.22 kB
build/assets/alertFail-8056b6e4.svg              0.35 kB │ gzip:   0.23 kB
build/assets/checkSuccess-f8fd1dbb.svg           0.36 kB │ gzip:   0.23 kB
build/assets/search-3261bac7.svg                 0.41 kB │ gzip:   0.26 kB
build/assets/question-a67b2492.svg               0.46 kB │ gzip:   0.28 kB
build/assets/runQuery-edfab4ed.svg               0.49 kB │ gzip:   0.28 kB
build/assets/open-405dd348.svg                   0.49 kB │ gzip:   0.33 kB
build/index.html                                 0.90 kB │ gzip:   0.49 kB
build/assets/bug-5b6edb54.svg                    0.99 kB │ gzip:   0.54 kB
build/assets/topology-0032b65e.svg               1.62 kB │ gzip:   0.85 kB
build/assets/NotoMono-Regular-41fd7ccc.ttf     107.85 kB
build/assets/NotoSans-Regular-c8cff31f.ttf     313.14 kB
build/assets/NotoSans-SemiBold-43207822.ttf    313.72 kB
build/assets/NotoSans-Bold-c6a598dd.ttf        313.79 kB
build/assets/index-fcc11d1f.css                 87.90 kB │ gzip:  15.07 kB
build/assets/index-b009e421.js               3,207.20 kB │ gzip: 535.97 kB

(!) Some chunks are larger than 500 kBs after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ built in 41.83s
vtadmin-web is running!
  - Browser: http://10.221.252.139:14201
  - Logs: /home/vitess/vitess/examples/local/vtdataroot/tmp/vtadmin-web.out
  - PID: 40960

image

notfelineit commented 4 months ago

Great glad it works for you! The latest version on main has this bug fixed. For others that come across it, please pull latest on main, run make build, and try the script again 🙂

The change has been backported to latest-18-19 as well.

sklasing commented 1 month ago

Bug continues on 19.0.5