SvelteKit Hooks実践：handleError・handleFetch・hooks.client.tsでエラー処理とfetch制御を学ぶ

import type { Handle, HandleServerError } from '@sveltejs/kit';
import { redirect } from '@sveltejs/kit';
import { getSession } from '$lib/server/session';

/* ── handle（第2回と同じ） ── */
const PROTECTED_ROUTES = ['/mypage'];

export const handle: Handle = async ({ event, resolve }) => {
  const sessionId = event.cookies.get('session_id');
  event.locals.user = sessionId ? getSession(sessionId) : null;
  const isProtected = PROTECTED_ROUTES.some((r) => event.url.pathname.startsWith(r));
  if (isProtected && !event.locals.user) {
    redirect(303, `/login?redirectTo=${event.url.pathname}`);
  }
  const response = await resolve(event);
  response.headers.set('X-Frame-Options', 'SAMEORIGIN');
  return response;
};

/* ── handleError（今回追加） ── */
export const handleError: HandleServerError = ({ error, event, status, message }) => {
  // 404 はログ不要（正常な「ページが見つからない」アクセス）
  if (status !== 404) {
    // サーバー側でスタックトレース付きのログを記録
    console.error(`[handleError] ${status} ${event.url.pathname}`, error);
  }

  // ブラウザに返すエラーオブジェクト
  // message はそのまま返す（error() で指定したメッセージ）
  // スタックトレースや内部情報は絶対に返さない
    return {
      message: status === 404 ? 'ページが見つかりません' : message,
    };
};

import type { Handle, HandleServerError, HandleFetch } from '@sveltejs/kit';

// ... handle と handleError は省略 ...

export const handleFetch: HandleFetch = ({ request, fetch, event }) => {
  const url = new URL(request.url);

  // 自サイトの /api/* へのリクエストをインターセプト
  if (url.origin === event.url.origin && url.pathname.startsWith('/api/')) {
    // 認証ヘッダーを自動付与（サーバー間通信のため Cookie は自動では届かない）
        const sessionId = event.cookies.get('session_id') ?? '';
        return fetch(new Request(request, {
      headers: {
        ...Object.fromEntries(request.headers),
        'x-session-id': sessionId,
      },
        }));
  }

  // その他のリクエストはそのまま通す
  return fetch(request);
};

import { writable } from 'svelte/store';

export type Toast = { id: string; message: string; type: 'error' | 'info' };

export const toasts = writable<Toast[]>([]);

export function addToast(message: string, type: Toast['type'] = 'error') {
  const id = Math.random().toString(36).slice(2);
  toasts.update((t) => [...t, { id, message, type }]);
  // 4秒後に自動で消す
  setTimeout(() => toasts.update((t) => t.filter((x) => x.id !== id)), 4000);
}

import type { HandleClientError } from '@sveltejs/kit';
import { addToast } from '$lib/toast';

export const handleError: HandleClientError = ({ error, status, message }) => {
  // 404 はトースト不要（ページが存在しないだけ）
  if (status !== 404) {
    // エラーメッセージをトーストで通知
        addToast(message ?? '予期しないエラーが発生しました', 'error');
    console.error('[client error]', error);
  }

  // +error.svelte の $page.error.message に入る値を返す
  return { message: message ?? '予期しないエラーが発生しました' };
};

<script lang="ts">
  import { toasts } from '$lib/toast';
</script>

<div class="toast-container">
  {#each $toasts as toast (toast.id)}
    <div class="toast toast-{toast.type}">
      {toast.message}
    </div>
  {/each}
</div>

<style>
  .toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; display: flex; flex-direction: column; gap: 8px; z-index: 9999; }
  .toast { padding: 12px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; max-width: 320px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
  .toast-error { background: #a32d2d; color: #fff; border-left: 4px solid #f47d7d; }
  .toast-info  { background: #185fa5; color: #fff; border-left: 4px solid #7eb8f7; }
</style>

<script lang="ts">
    import ToastContainer from '$lib/components/ToastContainer.svelte';
</script>

<header>
  <nav>
    <a href="/">SvelteShop</a>
    <a href="/products">商品一覧</a>
    <a href="/mypage">マイページ</a>
  </nav>
</header>

<main>
  <slot />
</main>

<!-- 全ページでトーストを表示できるようにルートレイアウトに配置 -->
<ToastContainer />