refactor: migrate error handling to TanStack Router and add RawError type

Signed-off-by: Noa Virellia <noa@requiem.garden>

client/cms/src/lib/types.ts

@@ -0,0 +1,6 @@
+export interface RawError {
+  code: number;
+  status: string;
+  error_id: string;
+  data: null;
+}

client/cms/src/routes/_workbenchLayout/profile.$userId.tsx

@@ -1,28 +1,26 @@
+import type { RawError } from '@/lib/types';
 import { createFileRoute } from '@tanstack/react-router';
 import { Suspense } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
 import { ProfileContainer } from '@/components/profile/profile.container';
 import { ProfileError } from '@/components/profile/profile.error';
 import { ProfileSkeleton } from '@/components/profile/profile.skeleton';
 
 export const Route = createFileRoute('/_workbenchLayout/profile/$userId')({
   component: RouteComponent,
+  errorComponent: ({ error }) => {
+    if ((error as unknown as RawError).code === 403)
+      return <ProfileError reason="用户个人资料未公开" />;
+    else return <ProfileError reason="获取用户个人资料失败" />;
+  },
 });
 
 function RouteComponent() {
   const { userId } = Route.useParams();
   return (
     <div className="flex h-full flex-col gap-6 px-4 py-6">
-      <ErrorBoundary fallbackRender={(error) => {
+      <Suspense fallback={<ProfileSkeleton />}>
-        if ((error.error as { code: number }).code === 403)
+        <ProfileContainer userId={userId} />
-          return <ProfileError reason="用户个人资料未公开" />;
+      </Suspense>
-        else return <ProfileError reason="获取用户个人资料失败" />;
-      }}
-      >
-        <Suspense fallback={<ProfileSkeleton />}>
-          <ProfileContainer userId={userId} />
-        </Suspense>
-      </ErrorBoundary>
     </div>
   );
 }

client/cms/src/routes/_workbenchLayout/profile.index.tsx

@@ -1,21 +1,21 @@
 import { createFileRoute, Navigate } from '@tanstack/react-router';
 import { Suspense } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
 import { ProfileError } from '@/components/profile/profile.error';
 import { ProfileSkeleton } from '@/components/profile/profile.skeleton';
 import { useUserInfo } from '@/hooks/data/useUserInfo';
 
 export const Route = createFileRoute('/_workbenchLayout/profile/')({
   component: RouteComponent,
+  errorComponent: () => {
+    return <ProfileError reason="获取用户个人资料失败" />;
+  },
 });
 
 function RouteComponent() {
   const { data } = useUserInfo();
   return (
-    <ErrorBoundary fallback={<ProfileError reason="获取用户个人资料失败" />}>
+    <Suspense fallback={<ProfileSkeleton />}>
-      <Suspense fallback={<ProfileSkeleton />}>
+      <Navigate to="/profile/$userId" params={{ userId: data.data!.user_id! }} />
-        <Navigate to="/profile/$userId" params={{ userId: data.data!.user_id! }} />
+    </Suspense>
-      </Suspense>
-    </ErrorBoundary>
   );
 }