Error Message (Error / ErrorMessage) Usage Guide

Overview

Error feedback in the project falls into four scenarios:

Scenario	Implementation	Notes
Form validation	ErrorMessage component	Red text on error, green check when valid
Full-screen error page	ErrorShower component (Error.tsx)	Wavy-animated ERROR display
API error	Fetcher + Result + toast	Shows a translated toast.error when code != "0"
Error copy	ErrorMessage message namespace	error key → localized copy mapping

---

ErrorMessage — form validation hint

A controlled validation hint, wired to react-hook-form's errors / isSubmitted.

import ErrorMessage from "@/common/components/i18n/ErrorMessage";

<ErrorMessage message={errors.userName?.message} submitted={isSubmitted} />

Prop	Type	Required	Description
message	string	No	Error copy; shows red text when set
submitted	boolean	Yes	Whether submitted; shows a green check when valid and submitted
messageClass	string	No	Error text class, default text-red-600
rightClass	string	No	Green check class, default text-red-600

Render logic: has message → red text; no message and submitted → green check; otherwise empty.

---

ErrorShower — wavy ERROR animation

The full-screen error component exported from Error.tsx; it splits "ERROR" into characters with motion-plus's splitText and animates them in a wave.

import ErrorShower from "@/common/components/Error";

<ErrorShower error="404 Not Found" />

Prop	Type	Required	Description
error	string	Yes	The error copy to display

Dependencies: motion + motion-plus (splitText). Styles are injected via an inline <style>.

---

Result — API response protocol

Fetcher parses every response as a Result; any code other than "0" is treated as a business error.

interface Result {
    code: string;       // "0" means success
    message?: string;   // error copy (used when not translated)
    data: any;          // business payload
    key?: string;       // error key (for i18n)
    instruction?: string;
}

Fetcher logic (simplified):

const result = await response.json() as Result;
if (result.code != "0") {
    const message = translator ? translator(result.key) : result.message;
    toast.error(message);  // react-hot-toast
}

So it first looks up result.key in the ErrorMessage namespace, then falls back to result.message.

---

ErrorMessage message namespace

The ErrorMessage namespace in messages/default/{locale}.json maps error keys to copy; the server-returned key is passed to translator.

key	English (example)
system_server_error	System error, please retry later...
global_parameter_null	Parameter must not be empty...
class_not_found	Class not found...

When adding a new error, agree on a key on the server and add matching copy to en.json / zh.json under ErrorMessage.