Error Page · PHP/Python/前端/Linux 等等學習筆記

[TOC] ## useFormState app/action.tsx ``` 'use server' import { redirect } from 'next/navigation' // 定義狀態類型 type State = { message?: string; success?: boolean; } | null; // 修改 action 函數的類型定義 export async function createUser(prevState: State, formData: FormData): Promise<State> { try { const res = await fetch('https://...') const json = await res.json() if (!res.ok) { return { message: '請輸入有效的郵箱地址', success: false } } return { message: '創建成功', success: true } } catch (error) { return { message: '發生錯誤，請稍后重試', success: false } } } ``` app/page.tsx ``` 'use client' import { useFormState } from 'react-dom' import { createUser } from '@/app/actions' export default function SignupForm() { // 初始化 formState const [state, formAction] = useFormState(createUser, null) return ( <form action={formAction}> {state?.message && ( <p className={state.success ? 'text-green-500' : 'text-red-500'}> {state.message} </p> )} <input type="email" name="email" /> <button type="submit">注冊</button> </form> ) } ``` > 表單的信息會提交給acton 出來,如果有錯誤的話,會再 state 中接收 ## Error Page - 錯誤會會拋向最近一層 ### 入門報錯 ``` import { Demo } from "."; export default function BlogPage() { throw new Error('Not implemented') return <div>Blog a <Demo /> </div> } ``` app/dashboard/error.tsx ``` 'use client' // Error boundaries must be Client Components import { useEffect } from 'react' export default function Error({ error, reset, }: { error: Error & { digest?: string } reset: () => void }) { useEffect(() => { // Log the error to an error reporting service console.error(error) }, [error]) return ( <div> <h2>Something went wrong!</h2> <button onClick={ // Attempt to recover by trying to re-render the segment () => reset() } > Try again </button> </div> ) } ``` ### global-error ``` 'use client' // Error boundaries must be Client Components export default function GlobalError({ error, reset, }: { error: Error & { digest?: string } reset: () => void }) { return ( // global-error must include html and body tags <html> <body> <h2>Something went wrong!</h2> <button onClick={() => reset()}>Try again</button> </body> </html> ) } ```