Not found /_app/immutable/assets/xxx

[kamerat]

Describe the bug

We're hosting sveltekit with SSR in a Docker container that's hosted in azure. We have datadog to track errors and we tend to see about 3 to 30 of these 404's a day on our small-medium site.

We played around with azure cdn cache, but when we enabled this, the errors really came to show, so we disabled the azure cache. When doing so, it went back to it's normal occurance.

This issue is the same as this question posted a while ago; #7057

Example error for a 404 asset:

Error: Not found: /_app/immutable/assets/_layout-c5c8ebf1.css
at resolve (file:///app/server/index.js:2276:18)
at resolve (file:///app/server/index.js:2163:34)
at Object.handle (file:///app/server/chunks/hooks.server.js:379:10)
at runMicrotasks (<anonymous>)
at runNextTicks (node:internal/process/task_queues:61:5)
at processImmediate (node:internal/timers:437:9)
at async respond (file:///app/server/index.js:2161:22)
at async Array.ssr (file:///app/handler-393b2283.js:1102:3)

What might be the cause of this type of error, Is it just something that happenes when document is out of sync with assets, or is it something we can do to keep this from happening?

Reproduction

Logs

No response

System Info

System:
    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M1
    Memory: 347.42 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.1 - /usr/local/bin/node
    npm: 8.11.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 110.0.5481.100
    Safari: 15.6.1
  npmPackages:
    @sveltejs/adapter-node: next => 1.0.0-next.85 
    @sveltejs/kit: ^1.0.1 => 1.0.1 
    svelte: ^3.44.0 => 3.55.0 
    vite: ^4.0.3 => 4.0.3

Severity

annoyance

Additional Information

No response

[dummdidumm]

My guess: You deploy a new version, the user is still using the old version and doing a navigation to a not-yet-loaded page where they need to request an asset (JS file or whatever), which then fails. It's more visible when turning CDN off since the CDN is caching the outdated assets from your previous deployment for a while.
SvelteKit should do a full-page reload if it sees that a navigation wasn't successful. I'm not sure if this also applies to CSS files though.

[Conduitry]

I think it is JS files only, but that's fine since any pages that are loaded for client-side nav also have a JS portion. When one of these requests fails with a 404, SvelteKit will automatically request /_app/version.json, and if that's change, it will turn the navigation into a full page reload rather that a client-side SPA navigation.

[Rich-Harris]

Something we should document: you can detect version changes and proactively opt in to full page reloads by setting a version.pollInterval in your config and using it to disable the client-side router:

<!-- src/routes/+layout.svelte -->
<script>
  import { updated } from '$app/stores';
</script>

<main data-sveltekit-reload={$updated ? '' : 'off'}>
  <slot />
</main>

Edit: if you're using $app/state (which is the modern equivalent of $app/stores):

<!-- src/routes/+layout.svelte -->
<script>
  import { updated } from '$app/state';
</script>

<main data-sveltekit-reload={updated.current ? '' : 'off'}>
  <slot />
</main>

[snuffyDev]

@Rich-Harris #9089 (comment)

Firstly, excuse me for my ignorance, but I've been getting similar errors on Sentry for an app at work, and I've been tasked with investigating it (3 weeks in, currently writing a 3rd Notion document 😮‍💨). Seeing your response gave me a few questions about this.

The docs for the updated config option currently states:

Not all navigations will result in an error though, for example if the JavaScript for the next page is already loaded.

1. Would a pre-rendered SPA (using static adapter) potentially be one of the cases where a navigation wouldn't trigger a full-page reload?
2. Would it be safe to assume that Sentry (and similar platforms) would be reporting a lot of false positives?
   • Example: User is on https://my-fake.app/, they navigate to https://my-fake.app/profile. Although the page loads perfectly fine, Sentry still reports that there was an error.

I appreciate any insight, and if this wasn't the appropriate place to ask, I can create a Discussion. This potentially could save me a lot of time, thank you!

[dummdidumm]

1. Not necessarily. If some assets are not loaded yet, and they are required for the next page you're about to navigate to, you'll also run into the 404 in case of a new version
2. Yes, everytime you deploy a new version you'll likely get some false positives in the sense that there are errors reported but your users likely won't notice anything

[kristjanmar]

I think the built-in functionality for detecting an app update and switching to a full page reload may be unreliable in some cases.

When the user gets a 404 on one of the chunks to be imported, I can see the call for __version.json but the user still goes to an error page when clicking on the link.

I can see the errors in Sentry and I can confirm via Session Replay that the error page +error.svelte is indeed showing to the user instead of the page that the user wanted to navigate to. So it's not a false positive error report.

This appears to happen randomly and I am unable to replicate it myself. But it's definitely happening for some users.

The error is usually "Importing a module script failed" or "Failed to fetch dynamically imported module" -- so perhaps the client is still trying to load one of the files from the previous release?

[Rich-Harris]

That's odd — those are the errors that usually lead to a request for version.json followed by a reload. Unless version.json is somehow the same before and after the redeploy?

[kevinrenskers]

Something we should document: you can detect version changes and proactively opt in to full page reloads by setting a version.pollInterval in your config and using it to disable the client-side router:

<!-- src/routes/+layout.svelte -->
<script>
  import { updated } from '$app/stores';
</script>

<main data-sveltekit-reload={$updated ? '' : 'off'}>
  <slot />
</main>

I'm also trying to solve the extremely common Failed to fetch dynamically imported module error and came across this issue, and this comment from @Rich-Harris. Sadly using this code I get the following error in my console:

Error: Cannot subscribe to 'updated' store on the server outside of a Svelte component, as it is bound to the current request via component context. This prevents state from leaking between users.For more information, see https://kit.svelte.dev/docs/state-management#avoid-shared-state-on-the-server

Looking at https://kit.svelte.dev/docs/modules#$app-stores-updated it didn't really make it clearer to me how to use this properly.

[dummdidumm]

I don't get this error given that code snippet. Please open a separate issue with a reproduction repo if the issue persists.

[kevinrenskers]

I haven't seen it anymore after that one time, no idea what caused it 🤷‍♂️

[vettloffah]

That's odd — those are the errors that usually lead to a request for version.json followed by a reload. Unless version.json is somehow the same before and after the redeploy?

We are getting this error on our site hosted on Vercel. I've had two separate people report that they are getting a 404 error, even after refreshing the page. And the error in the console looks like this:

If they open an incognito window, it loads fine. So I assume they have an old tab open like mentioned above.

We have a webhook automatically re-deploying the branch on vercel after a few different events, such as updating a product in our ecommerce store, inventory stock level updates, or editing one of our marketing pages. I would say on average it is re-deployed once 30 minutes - 1 hour.

Is it likely that the version.json doesn't get updated in this context?

CC @Rich-Harris

[magic-thomas]

Same error here.

package versions..

├── @sveltejs/adapter-node@1.2.3
├── @sveltejs/kit@1.13.0
├── svelte-check@3.1.4
├── svelte@3.57.0

[magic-thomas]

Something we should document: you can detect version changes and proactively opt in to full page reloads by setting a version.pollInterval in your config and using it to disable the client-side router:

<!-- src/routes/+layout.svelte -->
<script>
  import { updated } from '$app/stores';
</script>

<main data-sveltekit-reload={$updated ? '' : 'off'}>
  <slot />
</main>

After following this, I got errors from all js file.

So I made trick. I exchanged two values.

<main data-sveltekit-reload={$updated ? 'off' : ''}>

But it showed same results.

I don't have deep knowledge, so just wish somebody can solve this issue.