面试题：SvelteKit 路由错误捕获机制及自定义 404 页面的关联

Question

详细说明 SvelteKit 路由错误捕获的原理，以及在捕获到错误后，如何根据不同类型的错误（例如路由不存在、服务器端渲染错误等），正确引导到自定义的 404 页面，并保证用户体验的连贯性，结合代码示例说明更好。

Answer 1

SvelteKit 路由错误捕获原理

1. 错误边界概念：SvelteKit 利用类似于 React 错误边界的机制来捕获路由中的错误。在 SvelteKit 应用程序中，路由模块（.svelte 文件在 routes 目录下）以及服务器端渲染逻辑都可能出现错误。
2. 错误捕获位置：
   • 客户端：在客户端导航期间，如果路由组件渲染过程中抛出错误，SvelteKit 会捕获该错误。
   • 服务器端：在服务器端渲染（SSR）时，当处理路由请求的服务器端代码（如 load 函数或服务器端路由处理逻辑）抛出错误，也会被捕获。

根据不同类型错误引导到自定义 404 页面并保证用户体验连贯性

1. 区分错误类型：
   • 路由不存在：SvelteKit 会在路由解析阶段判断请求的路由是否存在。如果不存在，会抛出特定的错误。
   • 服务器端渲染错误：通常是由于 load 函数中的异步操作失败、数据库查询错误等导致。
2. 自定义 404 页面处理：
   • 创建自定义 404 页面：在 src/routes 目录下创建 404.svelte 文件。

   <!-- src/routes/404.svelte -->
   <script>
       // 可以在这里添加一些 404 页面特定的逻辑
   </script>
   
   <main>
       <h1>Page Not Found</h1>
       <p>The page you are looking for does not exist.</p>
   </main>
   

   • 捕获错误并引导到 404 页面：
     • 在客户端：可以在 src/app.ts 中捕获全局错误并导航到 404 页面。

     // src/app.ts
     import { handleError } from '@sveltejs/kit';
     
     export const handle: handleError = ({ error, event }) => {
         if (error.code === 'PAGE_NOT_FOUND') {
             return {
                 status: 404,
                 redirect: '/404'
             };
         }
         // 处理其他类型错误，例如服务器端渲染错误
         return {
             status: 500,
             redirect: '/500' // 假设存在自定义的 500 错误页面
         };
     };
     

     • 在服务器端：在 src/hooks.server.ts 中捕获服务器端错误并返回 404 响应或重定向到 404 页面。

     // src/hooks.server.ts
     import type { Handle } from '@sveltejs/kit';
     
     export const handle: Handle = async ({ event, resolve }) => {
         try {
             return await resolve(event);
         } catch (error) {
             if (error.code === 'PAGE_NOT_FOUND') {
                 return new Response('Not Found', {
                     status: 404,
                     headers: {
                         'Location': '/404'
                     }
                 });
             }
             // 处理其他服务器端错误
             return new Response('Internal Server Error', { status: 500 });
         }
     };
     

通过上述方式，SvelteKit 能够有效地捕获不同类型的路由错误，并将用户引导到自定义的 404 页面，保证了用户体验的连贯性。