fix: note password access

Signed-off-by: Innei <i@innei.in>

Author: Innei

src/app/(app)/error.tsx

@@ -4,10 +4,8 @@ import { useEffect } from 'react'
 
 // import { captureException } from '@sentry/nextjs'
 
-import { NotFound404 } from '~/components/common/404'
 import { NormalContainer } from '~/components/layout/container/Normal'
 import { StyledButton } from '~/components/ui/button'
-import { isRequestError, pickStatusCode } from '~/lib/is-error'
 
 // eslint-disable-next-line react/display-name
 export default ({ error, reset }: any) => {
@@ -16,21 +14,13 @@ export default ({ error, reset }: any) => {
     // captureException(error)
   }, [error])
 
-  if (isRequestError(error) && pickStatusCode(error) === 404) {
-    return (
-      <div className="flex min-h-[calc(100vh-10rem)] flex-col center">
-        <NotFound404 />
-      </div>
-    )
-  }
-
   return (
     <NormalContainer>
       <div className="flex min-h-[calc(100vh-10rem)] flex-col center">
         <h2 className="mb-5">
           <p>
             服务端渲染页面时出现了错误，可能是 Next.js 服务访问 API
-            超时。请刷新重试。
+            数据发生异常。请刷新重试。
           </p>
           <p>
             多次出现错误请联系开发者 <a href="mailto:i@innei.in">Innei</a>

src/app/(app)/notes/[id]/layout.tsx

@@ -2,15 +2,18 @@
 import { Suspense } from 'react'
 import type { Metadata } from 'next'
 
+import { BizErrorPage } from '~/components/common/BizErrorPage'
 import { buildRoomName, RoomProvider } from '~/components/modules/activity'
 import { CommentAreaRootLazy } from '~/components/modules/comment'
+import { NotePasswordForm } from '~/components/modules/note'
 import { NoteFontSettingFab } from '~/components/modules/note/NoteFontFab'
 import { NoteMainContainer } from '~/components/modules/note/NoteMainContainer'
 import { TocFAB } from '~/components/modules/toc/TocFAB'
 import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition'
 import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile'
 import { getOgUrl } from '~/lib/helper.server'
 import { getSummaryFromMd } from '~/lib/markdown'
+import { unwrapRequest } from '~/lib/request.server'
 import {
   CurrentNoteDataProvider,
   SyncNoteDataAfterLoggedIn,
@@ -30,7 +33,9 @@ export const generateMetadata = async ({
   }
 }): Promise<Metadata> => {
   try {
-    const data = (await getData(params)).data
+    const res = await getData(params)
+
+    const data = res.data
     const { title, text } = data
     const description = getSummaryFromMd(text ?? '')
 
@@ -66,7 +71,25 @@ export default async (
 ) => {
   const { params } = props
   const { id: nid } = params
-  const data = await getData(params)
+  const { data, error, status, bizMessage } = await unwrapRequest(
+    getData(params),
+  )
+
+  if (status === 403) {
+    return (
+      <Paper>
+        <NotePasswordForm />
+        <CurrentNoteNidProvider nid={nid} />
+      </Paper>
+    )
+  }
+
+  if (error) {
+    if (bizMessage) {
+      return <BizErrorPage status={status} bizMessage={bizMessage} />
+    }
+    throw error
+  }
 
   const { id: noteObjectId, allowComment } = data.data
 

src/app/(app)/notes/error.tsx

@@ -1,9 +1,11 @@
 /* eslint-disable react/no-unknown-property */
 export const NotFound404 = () => {
   return (
-    <div className="absolute inset-0 flex flex-col space-y-6 center">
-      <$404SVG className="size-[400px]" />
-      <p>这颗星球还没有知识哦，去其他地方探索吧</p>
+    <div className="min-h-[500px]">
+      <div className="fixed inset-0 flex flex-col space-y-6 center">
+        <$404SVG className="size-[400px]" />
+        <p>这颗星球还没有知识哦，去其他地方探索吧</p>
+      </div>
     </div>
   )
 }

src/components/common/404.tsx

@@ -0,0 +1,20 @@
+import type { FC } from 'react'
+
+export const BizErrorPage: FC<{
+  bizMessage: string
+  status: number
+}> = ({ bizMessage, status }) => {
+  return (
+    <div className="flex min-h-[calc(100vh-10rem)] flex-col center">
+      <h2 className="mb-5 flex flex-col gap-2 text-center">
+        <p>数据接口请求出现错误</p>
+        <p>
+          HTTP Status: <strong>{status}</strong>
+        </p>
+        <p>
+          错误信息：<strong>{bizMessage}</strong>
+        </p>
+      </h2>
+    </div>
+  )
+}

src/components/common/BizErrorPage.tsx

@@ -17,7 +17,8 @@ import type React from 'react'
 import type { createInitialValue } from './providers'
 
 import { useIsLogged } from '~/atoms/hooks'
-import { apiClient, getErrorMessageFromRequestError } from '~/lib/request'
+import { apiClient } from '~/lib/request'
+import { getErrorMessageFromRequestError } from '~/lib/request.shared'
 import { jotaiStore } from '~/lib/store'
 import { toast } from '~/lib/toast'
 

src/components/modules/comment/CommentBox/hooks.tsx

@@ -3,10 +3,10 @@ import { env } from 'next-runtime-env'
 import { isClientSide, isDev } from '~/lib/env'
 
 export const API_URL: string = (() => {
-  if (isDev) return env('NEXT_PUBLIC_API_URL')
+  if (isDev) return env('NEXT_PUBLIC_API_URL') || ''
 
   if (isClientSide && env('NEXT_PUBLIC_CLIENT_API_URL')) {
-    return env('NEXT_PUBLIC_CLIENT_API_URL')
+    return env('NEXT_PUBLIC_CLIENT_API_URL') || ''
   }
 
   return env('NEXT_PUBLIC_API_URL') || '/api/v2'

src/constants/env.ts

@@ -4,6 +4,8 @@ import { notFound } from 'next/navigation'
 
 import { RequestError } from '@mx-space/api-client'
 
+import { getErrorMessageFromRequestError } from './request.shared'
+
 export const requestErrorHandler = (error: Error | RequestError) => {
   if (
     error instanceof RequestError &&
@@ -13,3 +15,46 @@ export const requestErrorHandler = (error: Error | RequestError) => {
   }
   throw error
 }
+
+export async function unwrapRequest<T>(requestPromise: Promise<T>): Promise<{
+  data: T
+  status: number
+  error: null
+  bizMessage?: undefined
+}>
+// @ts-expect-error
+export async function unwrapRequest<T>(requestPromise: Promise<T>): Promise<{
+  data: null
+  status: number
+  error: Error
+  bizMessage: string
+}>
+
+export async function unwrapRequest<T>(requestPromise: Promise<T>) {
+  try {
+    const data = await requestPromise
+    return {
+      status: 200,
+      data,
+      error: null,
+    }
+  } catch (error) {
+    if (error instanceof RequestError) {
+      if (error.status === 404) {
+        notFound()
+      }
+
+      return {
+        status: error.status || 500,
+        error,
+        data: null,
+        bizMessage: getErrorMessageFromRequestError(error),
+      }
+    }
+    return {
+      status: 500,
+      error: 'Internal Server Error',
+      data: null,
+    }
+  }
+}

src/lib/is-error.ts

@@ -0,0 +1,17 @@
+import type { FetchError } from 'ofetch'
+
+import { RequestError } from '@mx-space/api-client'
+
+export const getErrorMessageFromRequestError = (error: RequestError) => {
+  if (!(error instanceof RequestError)) return (error as Error).message
+  const fetchError = error.raw as FetchError
+  const messagesOrMessage = fetchError.response?._data?.message
+  const bizMessage =
+    typeof messagesOrMessage === 'string'
+      ? messagesOrMessage
+      : Array.isArray(messagesOrMessage)
+        ? messagesOrMessage[0]
+        : undefined
+
+  return bizMessage || fetchError.message
+}