Sometimes 404 page is not displaying correctly

[wojtekmaj]

Describe the bug

We currently show an empty page if a package (or anything else for that matter) doesn't exist:

https://npmx.dev/package/thisdoesnotexistttt

Additional context

No response

Logs

[JuanjoSalvador]

It shows a 404 page for me.

[alex-key]

@wojtekmaj You might had "hydration error". It causes empty page. And there is an issue for it.

[wojtekmaj]

Actually not. Every time I access this page via the link I've shared, I'm getting a bunch of different errors:

npm.antfu.dev/thisdoesnotexistttt:1   Failed to load resource: the server responded with a status of 404 ()
hook.js:608  TypeError: Cannot destructure property 'bum' of 'e' as it is null.
    at me (runtime-core.esm-bundler.js:6695:13)
    at de (runtime-core.esm-bundler.js:6599:7)
    at Object.remove (runtime-core.esm-bundler.js:1168:9)
    at de (runtime-core.esm-bundler.js:6609:20)
    at me (runtime-core.esm-bundler.js:6704:7)
    at de (runtime-core.esm-bundler.js:6599:7)
    at he (runtime-core.esm-bundler.js:6718:7)
    at de (runtime-core.esm-bundler.js:6623:9)
    at me (runtime-core.esm-bundler.js:6704:7)
    at de (runtime-core.esm-bundler.js:6599:7)
overrideMethod @ hook.js:608
127.0.0.1:31415/connect:1   Failed to load resource: net::ERR_CONNECTION_REFUSED
/api/registry/install-size/thisdoesnotexistttt:1   Failed to load resource: the server responded with a status of 404 ()
/skills/thisdoesnotexistttt:1   Failed to load resource: the server responded with a status of 502 ()
/skills/thisdoesnotexistttt:1   Failed to load resource: the server responded with a status of 502 ()
/api/registry/analysis/thisdoesnotexistttt:1   Failed to load resource: the server responded with a status of 502 ()
/api/registry/readme/thisdoesnotexistttt:1   Failed to load resource: the server responded with a status of 502 ()
/api/registry/readme/thisdoesnotexistttt:1   Failed to load resource: the server responded with a status of 502 ()
/api/registry/analysis/thisdoesnotexistttt:1   Failed to load resource: the server responded with a status of 502 ()
thisdoesnotexistttt:1   Failed to load resource: the server responded with a status of 404 ()

Hitting refresh causes 404 page to show up and then I only see the following remaining errors in the console:

thisdoesnotexistttt:1   GET https://npmx.dev/package/thisdoesnotexistttt 404 (Not Found)
index.mjs:21   POST http://127.0.0.1:31415/connect net::ERR_CONNECTION_REFUSED
(anonymous) @ index.mjs:21
a @ ofetch.CWycOUEr.mjs:274
o @ ofetch.CWycOUEr.mjs:332
o @ useConnector.ts:114
s @ useConnector.ts:157
(anonymous) @ useConnector.ts:101
(anonymous) @ runtime-core.esm-bundler.js:3080
Jn @ runtime-core.esm-bundler.js:199
Yn @ runtime-core.esm-bundler.js:206
t.__weh @ runtime-core.esm-bundler.js:3060
dr @ runtime-core.esm-bundler.js:385
u @ runtime-core.esm-bundler.js:1913
mount @ runtime-core.esm-bundler.js:4201
t.mount @ runtime-dom.esm-bundler.js:1863
UB @ entry.js:65
await in UB
(anonymous) @ entry.js:73

[alex-key]

@wojtekmaj For me it opens regular 404 with clean console 👀

[wojtekmaj]

Yeah now it opens a regular 404 for me as well. But It didn't just 10 minutes ago, and didn't yesterday, so clearly something is up.

[alex-key]

This trace is quite suspicious

[wojtekmaj]

I think that's unrelated, as with this error, 404 page correctly shows up. Nonetheless, that's triggered by our CLI connector which is invoked when you have npmx-settings in localStorage.