SvelteKit: Error in load function の原因と解決策

概要

SvelteKitのload関数でデータ取得やバリデーションエラーが発生した場合の対処法です。

エラーメッセージ

``` 500: Internal Error Error in load function ```

原因

fetch失敗: 外部APIへの接続エラー
認証エラー: セッションが無効
存在しないデータ: 404相当
型エラー: undefinedアクセス

解決策

1. errorヘルパーを使用

```typescript // src/routes/users/[id]/+page.server.ts import { error } from ‘@sveltejs/kit’; import type { PageServerLoad } from ‘./$types’;

export const load: PageServerLoad = async ({ params, fetch }) => { const response = await fetch(`/api/users/${params.id}`);

if (!response.ok) { if (response.status === 404) { throw error(404, ‘User not found’); } throw error(500, ‘Failed to load user’); }

return { user: await response.json() }; }; ```

2. +error.svelteを作成

```svelte

{#if $page.status === 404} Go back home {/if} ```

3. 認証チェック

```typescript // src/routes/admin/+layout.server.ts import { redirect } from ‘@sveltejs/kit’; import type { LayoutServerLoad } from ‘./$types’;

export const load: LayoutServerLoad = async ({ locals }) => { if (!locals.user) { throw redirect(303, ‘/login’); }

if (!locals.user.isAdmin) { throw error(403, ‘Admin access required’); }

return { user: locals.user }; }; ```

4. フォームバリデーション

```typescript // src/routes/contact/+page.server.ts import { fail } from ‘@sveltejs/kit’; import type { Actions } from ‘./$types’;

export const actions: Actions = { default: async ({ request }) => { const data = await request.formData(); const email = data.get(’email’);

if (!email || typeof email !== 'string') {
  return fail(400, { email, missing: true });
}

if (!email.includes('@')) {
  return fail(400, { email, invalid: true });
}

// 処理を続行
return { success: true };

} }; ```

よくある間違い

throw new Error()を使う（errorヘルパーを使うべき）
サーバーloadでブラウザAPIを使用
+page.tsと+page.server.tsの混同

SvelteKit: Error in load function

概要