Fix NotFoundError in SvelteKit in Production

SvelteKit 404 Errors in Production

SvelteKit handles routing both on the server and client. Production 404s usually stem from adapter misconfiguration or pages that aren't prerendered and the server doesn't handle.

Adapter Configuration

Choose the right adapter for your hosting:

// svelte.config.js
// For Node.js server (Kubernetes, Docker, VPS)
import adapter from '@sveltejs/adapter-node';

// For static hosting (Netlify, Vercel static, GitHub Pages)
import adapter from '@sveltejs/adapter-static';

// For Vercel
import adapter from '@sveltejs/adapter-vercel';

Static Adapter: Missing Pages

With adapter-static, only prerendered pages exist. Dynamic routes return 404:

// src/routes/+layout.ts
export const prerender = true;  // Prerender all pages

// src/routes/blog/[slug]/+page.ts
export const prerender = true;
export async function entries() {
  // Tell SvelteKit which slugs to prerender
  const posts = await getPosts();
  return posts.map(post => ({ slug: post.slug }));
}

Custom 404 Page

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

<h1>{$page.status}</h1>
<p>{$page.error?.message || 'Page not found'}</p>

Fallback Page

For SPAs with adapter-static:

export default {
  kit: {
    adapter: adapter({
      fallback: '404.html' // or 'index.html' for SPA mode
    })
  }
};

Hosting Configuration

# netlify.toml
[[redirects]]
  from = "/*"
  to = "/404.html"
  status = 404

Bugsly captures both server-side and client-side 404 errors in SvelteKit, showing whether the failure happened during SSR or client navigation.