14、Remix 中的错误处理与会话管理

Remix 中的错误处理与会话管理

1. Remix 错误处理

在 Remix 中，错误处理是构建稳定应用的重要部分。通过嵌套错误边界，我们能够优雅地处理各种错误，提升用户体验。

1.1 嵌套错误边界的力量

嵌套错误边界允许我们在特定的路由模块中处理错误，而不会影响整个应用的显示。例如，在费用详情页面实现嵌套错误边界后，即使出现 404 错误，用户仍然可以停留在费用概览页面，错误被限制在嵌套的 ErrorBoundary 组件内，避免了全屏错误信息的显示。

以下是费用删除函数的代码示例，展示了可能出现错误的情况：

async function deleteExpense(request: Request, id: string): Promise<Response> {
    const referer = request.headers.get('referer');
    const redirectPath = referer || '/dashboard/expenses';
    try {
        await db.expense.delete({ where: { id } });
    } catch (err) {
        throw new Response('Not found', { status: 404 });
    }
    if (redirectPath.includes(id)) {
        return redirect('/dashboard/expe