Tech TutorBangla Web Documentation
Portfolio
HomeHTMLCSSTailwind CSSJavaScriptTypeScriptReactNext.jsNode.jsExpressSocket.IOExpoWordPressPostgreSQLPrismaPostgresNestJSMongoDBDockerTanStackTanStack TableRTK QueryGitGitHub
  • TanStack Documentation42টি অধ্যায়
প্রযুক্তি নির্বাচন
HomeHTMLCSSTailwind CSSJavaScriptTypeScriptReactNext.jsNode.jsExpressSocket.IOExpoWordPressPostgreSQLPrismaPostgresNestJSMongoDBDockerTanStackTanStack TableRTK QueryGitGitHub
  • Project Overview
  • Architecture
  • Folder Structure
  • Setup Next.js
  • Axios Setup
  • API Client
  • API Types
  • Query Install
  • Query Provider
  • Query Keys
  • Data Fetching
  • States
  • Devtools
  • Create Mutation
  • Update Mutation
  • Delete Mutation
  • Cache Invalidation
  • Optimistic Update
  • Pagination
  • Search
  • Filtering
  • Sorting
  • TanStack Table
  • Table Explore
  • Table Columns
  • Table Actions
  • React Hook Form
  • Zod Validation
  • Create Form
  • Edit Form
  • Dialog Modal
  • Delete Confirmation
  • Complete CRUD Flow
  • Full Integration
  • Error Handling
  • Loading States
  • Reusable Components
  • Production
  • Complete Project
  • Common Mistakes
  • Best Practices
  • Interview Q&A
  1. Docs
  2. TanStack
  3. Error Handling — পূর্ণাঙ্গ
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 → isError branch-এ retry button
  • Devtools — inspect mutation-এর error tab
ঠিক করুন যেভাবেই হোক

Error আড়াল করবেন না। user-কে বুঝতে হবে কী হয়নি এবং কী করা যায় (retry button / error text)। প্রতিটি error-এ কমপক্ষে একটি recovery path দিন।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।
আগেরAPI + Query + Table + Form — একসাথেপরেরLoading States — Skeleton ও spinner
এই পেজে
Tech Tutor

বাংলায় ওয়েব ডেভেলপমেন্ট ডকুমেন্টেশন শিখুন — ধাপে ধাপে।

Homeসব ডকুমেন্টেশনQuick Startআমার নোটস

© 2026 Tech Tutor. বাংলায় শিখুন, বাংলায় গড়ুন।

mdanamolhasan1998@gmail.com