Garbled characters on the agent page in the development environment

[monsterkai233]

Bug description

localhost:8088 display normal, but localhost:9000 display garbled code

How to reproduce the bug

node: 18.19.1
superset: 4.0.1
https://superset.apache.org/docs/contributing/development/#webpack-dev-server

Screenshots/recordings

No response

Superset version

master / latest-dev

Python version

3.11

Node version

18 or greater

Browser

Chrome

Additional context

No response

Checklist

• I have searched Superset docs and Slack and didn't find a solution to my problem.
• I have searched the GitHub issue tracker and didn't find a similar bug report.
• I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

[dosubot]

@monsterkai233 Hello there! I'm here to help you with any bugs, questions, or contributions. Let's tackle this issue together while we wait for a human maintainer.

The garbled characters on localhost:9000 are likely due to the Webpack dev server not running. To resolve this, ensure that the Webpack dev server is started in parallel with the Flask server. Here are the steps:

1. Start the Flask server on port 8088:

   superset run -p 8088 --with-threads --reload --debugger --debug

2. In parallel, start the Webpack dev server on port 9000:

   npm run dev-server

Access http://localhost:9000 in your web browser. This setup ensures that the frontend assets are properly served and hot-reloaded, while backend requests are proxied to the Flask server running on port 8088 ^[1].

If the issue persists, check the webpack.config.js file for any misconfigurations related to the port, public path, or proxy settings ^[2].

To continue talking to Dosu, mention @dosu.

[monsterkai233]

嗨，你好！我在这里帮助您解决任何错误、问题或贡献。让我们一起解决这个问题，同时等待人工维护者。

出现乱码可能是由于 Webpack 开发服务器未运行。要解决此问题，请确保 Webpack 开发服务器与 Flask 服务器并行启动。步骤如下：localhost:9000

1. 在端口上启动 Flask 服务器：8088

   superset run -p 8088 --with-threads --reload --debugger --debug

2. 同时，在端口上启动 Webpack 开发服务器：9000

   npm run dev-server

在您的 Web 浏览器中访问。此设置可确保前端资产得到正确服务和热重新加载，同时后端请求被代理到在端口上运行的 Flask 服务器http://localhost:9000``8088 [1].

如果问题仍然存在，请检查文件是否存在与端口、公共路径或代理设置相关的任何错误配置webpack.config.js[2].

要继续与 Dosu 交谈，请提及 。

My webpack.config.js correctly configured, bug is same https://github.com/apache/superset/issues/29677

[rusackas]

Hmm... I'm getting this now too. Not sure how far back this goes...

[rusackas]

Ok, turns out this is a duplicate issue. Closing this one in favor of #29678

The linked issue provides a solution, but we're still in need of a fix to make localhost rather than your machine's IP address work as expected.

[SmithAdoph]

I encountered the same issue. It might be because the frontend and backend are deployed on different servers. When I deployed both locally, there was no garbled text. However, I'm unsure why the issue occurs when deployed on separate servers. The exact reason is unclear