Remix错误处理最佳实践 #

export class AppError extends Error {
  constructor(
    message: string,
    public status: number = 500,
    public code?: string
  ) {
    super(message);
    this.name = "AppError";
  }
}

export class NotFoundError extends AppError {
  constructor(message: string = "资源不存在") {
    super(message, 404, "NOT_FOUND");
    this.name = "NotFoundError";
  }
}

export class UnauthorizedError extends AppError {
  constructor(message: string = "请先登录") {
    super(message, 401, "UNAUTHORIZED");
    this.name = "UnauthorizedError";
  }
}

export class ForbiddenError extends AppError {
  constructor(message: string = "禁止访问") {
    super(message, 403, "FORBIDDEN");
    this.name = "ForbiddenError";
  }
}

export class ValidationError extends AppError {
  constructor(
    public errors: Record<string, string[]>,
    message: string = "验证失败"
  ) {
    super(message, 422, "VALIDATION_ERROR");
    this.name = "ValidationError";
  }
}

import { json } from "@remix-run/node";

export function handleError(error: unknown) {
  console.error(error);
  
  if (error instanceof AppError) {
    return json(
      { 
        error: error.message, 
        code: error.code,
        errors: error instanceof ValidationError ? error.errors : undefined
      },
      { status: error.status }
    );
  }
  
  if (error instanceof Response) {
    return error;
  }
  
  return json(
    { error: "服务器内部错误", code: "INTERNAL_ERROR" },
    { status: 500 }
  );
}

import type { LoaderFunctionArgs } from "@remix-run/node";
import { json } from "@remix-run/node";

export async function loader({ params }: LoaderFunctionArgs) {
  try {
    const post = await getPost(params.id);
    
    if (!post) {
      throw new NotFoundError("文章不存在");
    }
    
    return json({ post });
  } catch (error) {
    return handleError(error);
  }
}

interface ErrorLog {
  message: string;
  stack?: string;
  url: string;
  userId?: string;
  timestamp: Date;
  userAgent?: string;
}

export async function logError(error: unknown, request: Request) {
  const errorLog: ErrorLog = {
    message: error instanceof Error ? error.message : String(error),
    stack: error instanceof Error ? error.stack : undefined,
    url: request.url,
    timestamp: new Date(),
    userAgent: request.headers.get("User-Agent") || undefined,
  };
  
  // 发送到日志服务
  if (process.env.NODE_ENV === "production") {
    await sendToLogService(errorLog);
  } else {
    console.error(errorLog);
  }
}

import { useEffect } from "react";
import { useRouteError } from "@remix-run/react";

export function ErrorBoundary() {
  const error = useRouteError();
  
  useEffect(() => {
    logError(error);
  }, [error]);
  
  return (
    <div>
      <h1>出错了</h1>
      <p>我们已记录此错误</p>
    </div>
  );
}

import { Link, useRouteError, isRouteErrorResponse } from "@remix-run/react";

export function ErrorBoundary() {
  const error = useRouteError();
  
  let title = "出错了";
  let message = "发生未知错误";
  let action = <Link to="/">返回首页</Link>;
  
  if (isRouteErrorResponse(error)) {
    switch (error.status) {
      case 404:
        title = "页面不存在";
        message = "您访问的页面可能已被移除或暂时不可用";
        break;
      case 401:
        title = "请先登录";
        message = "您需要登录后才能访问此页面";
        action = <Link to="/login">前往登录</Link>;
        break;
      case 403:
        title = "禁止访问";
        message = "您没有权限访问此页面";
        break;
      case 500:
        title = "服务器错误";
        message = "服务器发生错误，请稍后重试";
        break;
    }
  }
  
  return (
    <div className="error-page">
      <div className="error-content">
        <h1>{title}</h1>
        <p>{message}</p>
        <div className="error-actions">
          {action}
          <button onClick={() => window.location.reload()}>
            刷新页面
          </button>
        </div>
      </div>
    </div>
  );
}

import { useRevalidator, useNavigate, Link } from "@remix-run/react";

export function ErrorBoundary() {
  const error = useRouteError();
  const revalidator = useRevalidator();
  const navigate = useNavigate();
  
  const handleRetry = () => {
    revalidator.revalidate();
  };
  
  const handleGoBack = () => {
    navigate(-1);
  };
  
  return (
    <div className="error-page">
      <h1>出错了</h1>
      <p>{error.message}</p>
      <div className="actions">
        <button onClick={handleRetry}>重试</button>
        <button onClick={handleGoBack}>返回上一页</button>
        <Link to="/">返回首页</Link>
      </div>
    </div>
  );
}

import { z } from "zod";
import { json } from "@remix-run/node";

export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const result = schema.safeParse(Object.fromEntries(formData));
  
  if (!result.success) {
    throw new ValidationError(result.error.flatten().fieldErrors);
  }
  
  try {
    const item = await createItem(result.data);
    return redirect(`/items/${item.id}`);
  } catch (error) {
    return handleError(error);
  }
}

import { useActionData, Form } from "@remix-run/react";

export default function NewItem() {
  const actionData = useActionData<typeof action>();
  
  return (
    <Form method="post">
      {actionData?.code === "VALIDATION_ERROR" && (
        <div className="alert alert-error">
          请修正以下错误后重试
        </div>
      )}
      
      <div>
        <label>标题</label>
        <input name="title" />
        {actionData?.errors?.title && (
          <p className="error">{actionData.errors.title.join(", ")}</p>
        )}
      </div>
      
      <button type="submit">提交</button>
    </Form>
  );
}

export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url);
  
  if (url.searchParams.get("format") === "json") {
    try {
      const data = await fetchData();
      return json({ success: true, data });
    } catch (error) {
      return json(
        { success: false, error: "获取数据失败" },
        { status: 500 }
      );
    }
  }
  
  // HTML响应
  // ...
}

import { useFetcher } from "@remix-run/react";

export function useApiAction(action: string) {
  const fetcher = useFetcher();
  
  const submit = async (data: Record<string, any>) => {
    fetcher.submit(data, {
      method: "post",
      action,
      encType: "application/json",
    });
  };
  
  return {
    submit,
    data: fetcher.data,
    error: fetcher.data?.success === false ? fetcher.data.error : null,
    isLoading: fetcher.state !== "idle",
  };
}

app/
├── errors/
│   ├── classes.ts       # 错误类定义
│   ├── handler.ts       # 错误处理函数
│   └── logger.ts        # 错误日志
├── components/
│   └── ErrorBoundary.tsx
└── routes/
    └── *.tsx            # 各路由的ErrorBoundary