十六、错误处理：码头出事，不要炸掉整个港

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

export function ErrorBoundary() {
  const error = useRouteError();

  if (isRouteErrorResponse(error)) {
    return (
      <div>
        <h2>{error.status} {error.statusText}</h2>
        <p>{String(error.data ?? "当前泊位处理失败")}</p>
      </div>
    );
  }

  if (error instanceof Error) {
    return (
      <div>
        <h2>系统故障</h2>
        <p>{error.message}</p>
      </div>
    );
  }

  return <div>未知错误</div>;
}

root
└── ships
    └── ships.$shipId
        └── ships.$shipId.edit