Dagster webserver pages cannot be displayed due to error: "Loading chunk x failed." when using VS Code Remote Explorer about dagster

[Sage0614]

@garethbrickman @gibsondan Can this bug catch people's attention? there are mulitple people reporting this on giuhub and slack, and it is not a minor bug, UI is completely unuseable to people encountered this without a fix.

[Sage0614]

@salazarm
Things I have tried and NOT worked:

1. restart dagster webserver
2. restart VSCode (which I ssh into the remote server on cloud)
3. restart the physical server where the dagster project is hosted
4. clear all cache on Chrome
5. install a brand new Firefox and try to open the WebUI on it
6. delete the entire dagster home folder and create a new one
7. create a new python environment and install a fresh dagster in it and try to open my local project with it
8. pkill all user processes

None of it works. it is not some problem that flash back and forth that sometime I can run the WebUI sometimes not, it is alway not work. since like a week ago.

I suspect dagster create some cache in the project folder where the WebUI points to, the suspection comes from the observation: for some of the projects I use dagster I can see the main page of WebUI, only the runs/development page are broken, for some of the projects I cannot see the WebUI working at all, not a single time, after 2014-02-11, so there are some difference between projects, and I don't know what it is.

beyond that, everything functions on CLI.

[Sage0614]

@Haunfelder you saved my life, this works for me as well. do you happen to know which extension setting causes this?

[Haunfelder]

Glad I could help. This error was causing me a major headache as well. I'm not sure if it's the remote explorer extension or vscode itself, but it's certainly caused by the automatic port forwarding process. It looks like there are a few issue threads popping up like this one,

microsoft/vscode#205782

[Sage0614]

update: deployment page sometimes works sometimes not, the runs page never works, no matter the materialization succeded or not,

and it happens on completely new dagster_home folder and a seperate python environment

[MeganBeckett]

I am also having this issue suddenly.

When I run dagster dev or dagit and try open up the localhost url, I just get a blank screen.

Sometimes I can get something to load and I get this error message:

Sorry, page can't be displayed.
Please report this error to the Dagster team via GitHub or Slack. Refresh the page to try again.
Loading chunk 639 failed.

I cannot run or test anything locally at the moment.

I posted on Slack too with some other screenshots: https://dagster.slack.com/archives/C01U954MEER/p1707904411573979

[Sage0614]

I am having this issue roughly since 2014-02-11 afternoon EDT, I have tried kill all user process, clear browser cache, reboot server, nothing works.

[garethbrickman]

@MeganBeckett For the "blank screen" issue, this may actually be the same as #19338. The solution then was opening localhost inside an Incognito browser tab just to eliminate any browser extensions or other non-default settings in your regular browser profile as possible causes.

Please do let us know if the ChunkLoadError still occurs within an Incognito browser tab as well- will be an important clue!

[Sage0614]

@garethbrickman I tried the Incognito mode, seems not solving the issue, still seeing:
http://127.0.0.1:3000/favicon.png net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)
and
http://127.0.0.1:3000/__next/static/chunks/main-....js net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)

I am not able to post screen shot as I am using dagster on company's computer, please let me know what information you need for dig in further

[Sage0614]

I have tried open it in Chrome and a completely newly installed Firefox browser, same blank screen

[Haunfelder]

I'm having the same issue. I haven't changed any dagster versions.

[MeganBeckett]

@garethbrickman Opening in an incognito window doesn't help, I still get the blank screen. When I inspect the page, the only errors I can find are related to this Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH

Same thing in a Firefox private window:

[salazarm]

@Sage0614 Have you tried restarting the dagster webserver? The HTML and JS being out of sync like this indicates that a stale / cached HTML response is being served from the webserver for a build other than the most recent build. Restarting the web server usually fixes that issue.

[salazarm]

@Sage0614 I'm trying to figure out how it's technically possible for you to encounter this error. Here is what I know:

1. The HTML is referencing JS that doesn't exist, that means the HTML was produced from a build different than the build that produced the JS.
2. We haven't received any widespread reports of Dagster being broken, so there's something about your setup specifically that is causing this.

Could the server hosting dagster-webserver have some kind of caching layer in front of it? It sounds like it because you say some pages work and other pages do not, that would mean some pages are/aren't cached.

[Haunfelder]

@salazarm If it helps, I am experiencing the exact same problem as @Sage0614 . None of the pages will load for me. When it first happened last week I got the side bar to load and the chunk error in the main screen. I deleted my virtual environment and recreated with the latest releases of all dagster libraries and I now get a blank screen as @MeganBeckett has shared.

It seems like webpack is having an issue parsing the javascript files.

I'm also running dagster on a remote server and forwarding the port with vscode like @Sage0614.

[salazarm]

@Haunfelder If you look inside of python_modules/dagster-webserver/dagster_webserver/webapp/build/_next do you see the path its trying to download there?

[Sage0614]

@salazarm
@Haunfelder
the server hosting the dagster-webserver is an AWS EC2 instance, I remote-ssh in it with VSCode, the browser is from a windows machine running on Amazon workspace, I can't say for sure whether there's a caching layer

[Haunfelder]

@salazarm , yes, both the css and js files in the error are in dagster_webserver/webapp/build/_next/static/chunks and dagster_webserver/webapp/build/_next/static/css and they appear to be loading in the browser (see screenshot).

[Haunfelder]

I disabled the cache in the network tab of chrome developer tools and finally got the UI to load. I tried this previously and was not successful, so it's possible this wasn't the fix. @Sage0614 , you may want to try doing the same and see if you have success.

[Sage0614]

@Haunfelder I can see the main page of UI now with your method, only the Runs tab have sth to show, the other tabs still cannot be displayed, similar to what @MeganBeckett showed, are you able to see all tabs?

[Sage0614]

@Haunfelder I don't think this solves my issue, it works for one project I tried (shows main page and runs tab works only) and for the other I tried it is still a completely blank page.

[Haunfelder]

@Sage0614 , you're right, only some of the tabs are working now. Assets and deployment both still have the chunk error. Runs, overview, and the main page appear to be working.

[Haunfelder]

I was able to get the ui working and I think the issue is with VScode's remote explorer extension. I manually forwarded the port in my ssh config file (~/.ssh/config) using the following,

LocalForward 3000 127.0.0.1:3000

and everything now works. I've searched the VScode and remote explorer extension issues, but haven't found anything similar. @Sage0614 and @MeganBeckett can you check if this solves your issue?

[garethbrickman]

Looks like the root cause is a known bug with port forwarding that is being fixed: microsoft/vscode-remote-release#9548

The fix is available in VS Code Insiders (early release) and will go out in the 1.87.1 release next week. Source