tRPC के साथ एंड-टू-एंड type-safe APIs · पाठ

त्रुटियों का फ़ॉर्मैटिंग और फ़ील्ड-स्तरीय सत्यापन प्रतिक्रिया

tRPC त्रुटियों का स्वरूप अनुकूलित करें और क्लाइंट को स्पष्ट फ़ील्ड-स्तरीय सत्यापन संदेश उपलब्ध कराएँ।

पाठ 4, कुल 4 में से13 चरण

त्रुटियों का फ़ॉर्मैटिंग और फ़ील्ड-स्तरीय सत्यापन प्रतिक्रिया, CoddyKit पर tRPC के साथ एंड-टू-एंड type-safe APIs का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह tRPC के साथ एंड-टू-एंड type-safe APIs सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। tRPC के साथ एंड-टू-एंड type-safe APIs पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

त्रुटियों का प्रारूप क्यों बनाएँ

आप tRPC त्रुटियाँ उत्पन्न और पकड़ सकते हैं। लेकिन क्लाइंट को अक्सर संरचित त्रुटि डेटा चाहिए होता है, विशेषकर सत्यापन से मिले फ़ील्ड-स्तर के संदेश, ताकि उन्हें फ़ॉर्म के इनपुट के पास दिखाया जा सके।

errorFormatter विकल्प

आरंभ करते समय tRPC, errorFormatter के माध्यम से वैश्विक स्तर पर त्रुटि का प्रारूप बदलने देता है।

const t = initTRPC.create({
  errorFormatter({ shape }) {
    return shape;
  },
});

Zod त्रुटियों का पता लगाना

जब Zod का इनपुट असफल होता है, तो tRPC उसे त्रुटि के कारण के रूप में जोड़ देता है। आप इसका पता लगाकर इसे उपलब्ध करा सकते हैं।

import { ZodError } from "zod";

errorFormatter({ shape, error }) {
  const isZod = error.cause instanceof ZodError;
  return { ...shape, data: { ...shape.data, isZod } };
}

समतल की गई फ़ील्ड त्रुटियाँ जोड़ना

Zod समस्याओं को एक fieldErrors मानचित्र में समतल कर सकता है, जो हर फ़ील्ड को उसके संदेशों से जोड़ता है।

const zodError = error.cause instanceof ZodError
  ? error.cause.flatten().fieldErrors
  : null;
return { ...shape, data: { ...shape.data, zodError } };

क्लाइंट को क्या मिलता है

अब क्लाइंट को एक संरचित ऑब्जेक्ट मिलता है, जिसे वह फ़ॉर्म फ़ील्ड से जोड़ सकता है।

// e.g. { zodError: { email: ["Invalid email"] } }

क्लाइंट पर त्रुटियाँ पढ़ना

त्रुटि पकड़ें और प्रारूपित डेटा पढ़ें।

try {
  await client.signup.mutate(input);
} catch (err) {
  const fields = err.data?.zodError;
  // show fields.email next to the input
}

HTTP स्थिति कोड

इस प्रारूप में एक ऐसा कोड शामिल होता है जो HTTP स्थिति से जुड़ा होता है। यह क्लाइंट के लिए UNAUTHORIZED और BAD_REQUEST पर अलग-अलग प्रतिक्रिया देने में उपयोगी है।

// shape.data.code === "BAD_REQUEST"
// shape.data.httpStatus === 400

आंतरिक जानकारी उजागर न करना

सावधान रहें: उत्पादन परिवेश में स्टैक ट्रेस या आंतरिक संदेश उजागर न करें। त्रुटियों का ऐसा प्रारूप बनाएँ जिसमें केवल सुरक्षित और उपयोगकर्ता को दिखाए जाने योग्य विवरण हों।

कच्ची त्रुटि लॉग करना

डीबग करने के लिए सर्वर पर पूरी त्रुटि लॉग करें और क्लाइंट को उसका साफ़ किया हुआ संस्करण भेजें।

errorFormatter({ shape, error }) {
  console.error(error); // full detail in server logs
  return shape;        // safe shape to client
}

सुसंगत त्रुटि अनुबंध

सभी प्रक्रियाओं में त्रुटि का एकसमान प्रारूप होने से आपका फ्रंटएंड एक ही पुनः उपयोग योग्य सहायक के माध्यम से त्रुटियाँ संभाल सकता है।

क्लाइंट सहायक का पुनः उपयोग

क्योंकि हर प्रक्रिया में त्रुटि का वही प्रारूप होता है, इसलिए ऐसा एक सहायक लिखें जो किसी भी असफल कॉल के लिए fieldErrors और शीर्ष-स्तरीय संदेश निकाल सके।

function parseError(err) {
  return { fields: err.data?.zodError, message: err.message };
}

त्वरित जाँच

त्रुटि का प्रारूप बनाने के बारे में अपनी समझ जाँचें।

पुनरावलोकन

आपने उपयोगी त्रुटि प्रतिक्रिया देना सीखा:

  • errorFormatter वैश्विक स्तर पर त्रुटि का प्रारूप बदलता है
  • ZodError कारणों का पता लगाएँ और fieldErrors उपलब्ध कराएँ
  • सर्वर पर पूरा विवरण लॉग करें और क्लाइंट को साफ़ किया हुआ प्रारूप भेजें

अच्छी तरह बनाए गए त्रुटि प्रारूपों से फ़ॉर्म और क्लाइंट बनाना बहुत आसान हो जाता है।

शुरुआत निःशुल्क

एआई शिक्षक के साथ tRPC के साथ एंड-टू-एंड type-safe APIs सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम
10
पाठ
40

अक्सर पूछे जाने वाले प्रश्न

क्या “त्रुटियों का फ़ॉर्मैटिंग और फ़ील्ड-स्तरीय सत्यापन प्रतिक्रिया” पाठ निःशुल्क है?

हाँ — tRPC के साथ एंड-टू-एंड type-safe APIs अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “त्रुटियों का फ़ॉर्मैटिंग और फ़ील्ड-स्तरीय सत्यापन प्रतिक्रिया” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। tRPC के साथ एंड-टू-एंड type-safe APIs पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“त्रुटियों का फ़ॉर्मैटिंग और फ़ील्ड-स्तरीय सत्यापन प्रतिक्रिया” में मैं क्या सीखूँगा?

tRPC त्रुटियों का स्वरूप अनुकूलित करें और क्लाइंट को स्पष्ट फ़ील्ड-स्तरीय सत्यापन संदेश उपलब्ध कराएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ tRPC के साथ एंड-टू-एंड type-safe APIs का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या tRPC के साथ एंड-टू-एंड type-safe APIs शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर tRPC के साथ एंड-टू-एंड type-safe APIs शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“त्रुटियों का फ़ॉर्मैटिंग और फ़ील्ड-स्तरीय सत्यापन प्रतिक्रिया” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस tRPC के साथ एंड-टू-एंड type-safe APIs पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर tRPC के साथ एंड-टू-एंड type-safe APIs पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

  1. tRPC त्रुटियों को शालीनता से संभालना
  2. कस्टम त्रुटि प्रकार
  3. क्रमबद्धीकरण के लिए डेटा रूपांतरक
  4. त्रुटियों का फ़ॉर्मैटिंग और फ़ील्ड-स्तरीय सत्यापन प्रतिक्रिया
← tRPC के साथ एंड-टू-एंड type-safe APIs पर वापस जाएँ