package page 504 or stuck flickering skeleton loader

[serhalp]

In this recording you can see I tried to load the same page (https://npmx.dev/skills) three times, with one success, one 504, and one failure with a flickering skeleton loader:

npmx.broken.package.page.mp4

In case this is useful, here's the 504 one:

504: GATEWAY_TIMEOUT Code: FUNCTION_INVOCATION_TIMEOUT ID: yul1::mmk6b-1769961619497-753e5f7c2715  

Function logs should be here but I don't have access: https://vercel.com/poetry/npmx.dev/7f4VTkR9JZg4wh24tLsSXBVVRwra/logs??requestIds=yul1%3A%3Ammk6b-1769961619497-753e5f7c2715

@vinnymac and @jellydeck have also seen this

I don't have reliable repro steps, unfortunately. It happens intermittently when loading an uncached package.

[serhalp]

I found what appears to be a reproducible case: https://npmx.dev/gatsby (but if it ever does successfully load, it will be cached and load successfully for everyone for some number of minutes...).

[DDeenis]

Looking into it right now. What I found so far:

• status is flip-flopping between pending and success after the package has been fetched
• Thousands of requests are being sent to fetch the package (all hit cache)

My repro steps:

• Re-run the dev server (to clear cache)
• Open http://127.0.0.1:3000/skills

[DDeenis]

Replacing useLazyAsyncData with useAsyncData removed flickering. Package info is still not being rendered sometimes, but that might be a separate issue.
@serhalp I'm not familiar with Nuxt, what's your thoughts?

[shamilkotta]

@serhalp @DDeenis i've opened a PR seems like the status flip was because of DownloadStatus component

[BoxenOfDonuts]

It appears the issues with the skills package specifically is that /skills/_payload.json is getting sent to the skills route handler, which then is throwing an error for invalid package name.

{
  "error": true,
  "url": "http://127.0.0.1:3000/skills/_payload.json?dev",
  "statusCode": 404,
  "statusMessage": "Server Error",
  "message": "Invalid package name format",
  "stack": [
    "Invalid package name format",
    "at createError (/home/joel/repos/npmx.dev/node_modules/.pnpm/h3@1.15.5/node_modules/h3/dist/index.mjs:71:15)",
    "at handleApiError (/home/joel/repos/npmx.dev/server/utils/error-handler.ts:17:10)",
    "at defineCachedEventHandler.maxAge (/home/joel/repos/npmx.dev/server/routes/skills/[...pkg].get.ts:66:0)",
    "at /home/joel/repos/npmx.dev/node_modules/.pnpm/nitropack@2.13.1_@upstash+redis@1.36.1_@vercel+kv@3.0.0_better-sqlite3@12.6.2_rolldown@1.0.0-rc.1/node_modules/nitropack/dist/runtime/internal/cache.mjs:259:25)",
    "at /home/joel/repos/npmx.dev/node_modules/.pnpm/nitropack@2.13.1_@upstash+redis@1.36.1_@vercel+kv@3.0.0_better-sqlite3@12.6.2_rolldown@1.0.0-rc.1/node_modules/nitropack/dist/runtime/internal/cache.mjs:107:12)",
    "at _resolve (/home/joel/repos/npmx.dev/node_modules/.pnpm/nitropack@2.13.1_@upstash+redis@1.36.1_@vercel+kv@3.0.0_better-sqlite3@12.6.2_rolldown@1.0.0-rc.1/node_modules/nitropack/dist/runtime/internal/cache.mjs:54:39)",
    "at get (/home/joel/repos/npmx.dev/node_modules/.pnpm/nitropack@2.13.1_@upstash+redis@1.36.1_@vercel+kv@3.0.0_better-sqlite3@12.6.2_rolldown@1.0.0-rc.1/node_modules/nitropack/dist/runtime/internal/cache.mjs:83:38)",
    "at async file:///home/joel/repos/npmx.dev/.nuxt/dev/index.mjs:367:19)",
    "at async Object.handler (/home/joel/repos/npmx.dev/node_modules/.pnpm/nitropack@2.13.1_@upstash+redis@1.36.1_@vercel+kv@3.0.0_better-sqlite3@12.6.2_rolldown@1.0.0-rc.1/node_modules/nitropack/dist/runtime/internal/cache.mjs:299:21)",
    "at async file:///home/joel/repos/npmx.dev/node_modules/.pnpm/h3@1.15.5/node_modules/h3/dist/index.mjs:2011:19)"
  ]
}