TanStackAdvanced
Error Handling — পূর্ণাঙ্গ
API error shapes, interceptor message, retry policy ও query error UI — বাংলায়।
9টি অংশবাংলা ভাষায়
প্রোডাক্টের সবচেয়ে গুরুত্বপূর্ণ অংশ — ব্যর্থতা কীভাবে দেখাবে। আমরা একটি standard error shape নেব:
lib/axios.ts-এ error normalizerts
ts
import axios from "axios";
export function getErrorMessage(error: unknown): string {
if (axios.isAxiosError(error)) {
// server থেকে আমাদের shape: { message: string }
const serverMsg = error.response?.data?.message;
if (typeof serverMsg === "string") return serverMsg;
if (error.code === "ECONNABORTED") return "সময় বেশি লেগেছে, আবার চেষ্টা করুন";
if (!error.response) return "নেটওয়ার্ক সমস্যা — ইন্টারনেট চেক করুন";
return "সার্ভারে কিছু ভুল হয়েছে";
}
return error instanceof Error ? error.message : "অজানা ভুল";
}retry policy
query-client-এts
ts
queries: {
retry: (failureCount, error) => {
// 4xx হলে retry নেই (সেটা আমাদের ভুল/ব্যবহারকারীর ভুল)
if (axios.isAxiosError(error) && error.response?.status < 500) {
return false;
}
// 5xx/নেটওয়ার্ক হলে ২-৩ বার
return failureCount < 2;
},
refetchOnWindowFocus: false,
},server route-এ error handling
app/api/products/route.tsts
ts
export async function POST(request: NextRequest) {
const body = await request.json();
const parsed = productSchema.safeParse(body);
if (!parsed.success) {
return Response.json(
{ message: "তথ্য ঠিক নেই", issues: parsed.error.issues },
{ status: 400 },
);
}
try {
const product = await prisma.product.create({
data: parsed.data,
});
return Response.json(product, { status: 201 });
} catch {
return Response.json(
{ message: "product তৈরি করা যায়নি, পরে চেষ্টা করুন" },
{ status: 500 },
);
}
}form-এ error permanent
- mutation
onError→toast.error(getErrorMessage(error)) - form error →
form.formState.errors→ FieldError-এ - query error →
isErrorbranch-এ retry button - Devtools — inspect mutation-এর error tab
ঠিক করুন যেভাবেই হোক
Error আড়াল করবেন না। user-কে বুঝতে হবে কী হয়নি এবং কী করা যায় (retry button / error text)। প্রতিটি error-এ কমপক্ষে একটি recovery path দিন।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।