लोड हो रहा है...

त्रुटि प्रबंधन संदर्भ

रिएक्ट (React) में त्रुटि प्रबंधन संदर्भ एक महत्वपूर्ण अवधारणा है जो एप्लिकेशन की स्थिरता और विश्वसनीयता सुनिश्चित करती है। आधुनिक Single Page Applications (SPAs) में जहां कई जटिल और पुन: उपयोग योग्य कंपोनेंट्स होते हैं, असिंक्रोनस डेटा फेचिंग और डायनामिक स्टेट अपडेट के दौरान त्रुटियाँ सामान्य हैं। यदि इन त्रुटियों को व्यवस्थित तरीके से हैंडल नहीं किया गया, तो यह पूरे एप्लिकेशन को प्रभावित कर सकता है या अनपेक्षित व्यवहार उत्पन्न कर सकता है।
रिएक्ट में Error Boundaries जैसी सुविधाएँ प्रदान करता है, जो कि क्लास कंपोनेंट्स के रूप में लागू होती हैं। ये विशेष कंपोनेंट्स उनके चाइल्ड कंपोनेंट्स में आने वाली त्रुटियों को पकड़ते हैं और एक वैकल्पिक UI प्रदर्शित करते हैं, जिससे पूरे एप्लिकेशन का क्रैश होने से बचाव होता है। साथ ही, try/catch ब्लॉक्स और Promise.catch का उपयोग असिंक्रोनस ऑपरेशंस में त्रुटियों को सुरक्षित रूप से संभालने के लिए किया जाता है।
इस संदर्भ में डेवलपर्स सीखेंगे कि कैसे त्रुटि संवेदनशील कंपोनेंट्स बनाएँ, Error Boundaries को प्रभावी रूप से लागू करें, असिंक्रोनस त्रुटियों को प्रबंधित करें और प्रदर्शन अनुकूलन के माध्यम से एप्लिकेशन की स्थिरता बढ़ाएँ। यह ज्ञान जटिल रिएक्ट एप्लिकेशन के निर्माण में अत्यंत उपयोगी है और इसे पेशेवर फ्रंटेंड विकास में अपनाना आवश्यक है।

मूल उदाहरण

jsx

JSX Code

import React, { Component, useState } from 'react';

class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}

static getDerivedStateFromError(error) {
return { hasError: true };
}

componentDidCatch(error, info) {
console.error("कैप्चर की गई त्रुटि:", error, info);
}

render() {
if (this.state.hasError) {
return <h2>इस कंपोनेंट में एक त्रुटि हुई है।</h2>;
}
return this.props.children;
}
}

function त्रुटिपूर्णकंपोनेंट() {
const [count, setCount] = useState(0);

if (count === 3) {
throw new Error("काउंटर लिमिट पार कर गया!");
}

return ( <div> <p>वर्तमान काउंटर: {count}</p>
<button onClick={() => setCount(count + 1)}>इंक्रिमेंट करें</button> </div>
);
}

export default function App() {
return ( <ErrorBoundary>
<त्रुटिपूर्णकंपोनेंट /> </ErrorBoundary>
);
}

उपरोक्त उदाहरण में ErrorBoundary एक क्लास कंपोनेंट है जो उसके चाइल्ड कंपोनेंट्स में आने वाली त्रुटियों को पकड़ता है। getDerivedStateFromError त्रुटि होने पर स्टेट को अपडेट करता है ताकि वैकल्पिक UI दिखाया जा सके। componentDidCatch त्रुटि और कंपोनेंट स्टैक को कंसोल में लॉग करता है, जिससे डेवलपर को डीबगिंग में आसानी होती है।
त्रुटिपूर्णकंपोनेंट एक सिम्पल फ़ंक्शनल कंपोनेंट है जो काउंटर 3 पर एक त्रुटि उत्पन्न करता है। ErrorBoundary के अंदर इसे रेंडर करने से, यह त्रुटि केवल इस कंपोनेंट तक सीमित रहती है और पूरे एप्लिकेशन को प्रभावित नहीं करती। useState के माध्यम से स्टेट को सुरक्षित तरीके से मैनेज किया गया है, जिससे सीधे स्टेट म्यूटेशन से बचा जा सके।
यह पैटर्न असिंक्रोनस डेटा फेचिंग, ग्लोबल स्टेट मैनेजमेंट और नेस्टेड कंपोनेंट्स के साथ भी इस्तेमाल किया जा सकता है। Sentry या LogRocket जैसे एक्सटर्नल मॉनिटरिंग टूल्स के साथ इंटीग्रेट करके वास्तविक समय में त्रुटियों का ट्रैक रखना संभव है।

व्यावहारिक उदाहरण

jsx

JSX Code

import React, { useState, useEffect } from 'react';

function डेटाफेचर({ url }) {
const [data, setData] = useState(null);
const [error, setError] = useState(null);

useEffect(() => {
fetch(url)
.then(res => {
if (!res.ok) throw new Error("डेटा लोड करने में त्रुटि");
return res.json();
})
.then(setData)
.catch(setError);
}, [url]);

if (error) return <div>लोडिंग में त्रुटि: {error.message}</div>;
if (!data) return <div>डेटा लोड हो रहा है...</div>;

return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

export default function App() {
return <डेटाफेचर url="[https://jsonplaceholder.typicode.com/posts/1](https://jsonplaceholder.typicode.com/posts/1)" />;
}

Advanced रिएक्ट (React) Implementation

jsx

JSX Code

import React, { Component } from 'react';

class AdvancedErrorBoundary extends Component {
state = { hasError: false, error: null, errorInfo: null };

static getDerivedStateFromError(error) {
return { hasError: true, error };
}

componentDidCatch(error, errorInfo) {
this.setState({ errorInfo });
logErrorToService(error, errorInfo);
}

render() {
if (this.state.hasError) {
return ( <div> <h1>एक त्रुटि हुई है</h1>
<details style={{ whiteSpace: 'pre-wrap' }}>
{this.state.error && this.state.error.toString()} <br />
{this.state.errorInfo?.componentStack} </details> </div>
);
}
return this.props.children;
}
}

function logErrorToService(error, info) {
console.log("सर्विस को त्रुटि भेजें:", error, info);
}

export default AdvancedErrorBoundary;

रिएक्ट (React) में त्रुटि प्रबंधन के लिए सर्वोत्तम अभ्यासों में शामिल हैं: Error Boundaries का उपयोग, असिंक्रोनस ऑपरेशंस को सुरक्षित रूप से हैंडल करना, स्टेट म्यूटेशन से बचना और प्रदर्शन अनुकूलन। सामान्य गलतियाँ हैं: अत्यधिक prop drilling, अनावश्यक re-renders और uncontrolled state updates।
Performance को बेहतर बनाने के लिए React.memo, useCallback और useMemo का उपयोग किया जाता है। React DevTools और external monitoring tools जैसे Sentry त्रुटियों की पहचान और ट्रैकिंग में मदद करते हैं। सुरक्षा दृष्टिकोण से, detailed error messages को यूजर को न दिखाएं, केवल logs में स्टोर करें। यह प्रैक्टिस स्थिर, maintainable और high-performance React SPAs के निर्माण में सहायक है।

📊 संपूर्ण संदर्भ

रिएक्ट (React) Element/Method	Description	Syntax	Example	Notes
ErrorBoundary	चाइल्ड कंपोनेंट्स में त्रुटियों को पकड़ता है	<ErrorBoundary>{children}</ErrorBoundary>	<ErrorBoundary><त्रुटिपूर्णकंपोनेंट /></ErrorBoundary>	स्थानीय त्रुटि प्रबंधन
getDerivedStateFromError	त्रुटि पर स्टेट अपडेट करता है	static getDerivedStateFromError(error)	static getDerivedStateFromError(error) { return { hasError: true }; }	केवल क्लास कंपोनेंट्स
componentDidCatch	त्रुटि लॉगिंग	componentDidCatch(error, info)	componentDidCatch(error, info) { console.log(error, info); }	Monitoring के लिए
useState	लोकल स्टेट मैनेजमेंट	const [state, setState] = useState(initial)	const [count, setCount] = useState(0)	डायरेक्ट म्यूटेशन से बचें
useEffect	Effects और async operations	useEffect(() => {}, [dependencies])	useEffect(() => { fetchData(); }, []);	डेटा फेचिंग के लिए
try/catch	सिंक/असिंक त्रुटि हैंडलिंग	try { ... } catch(error) { ... }	try { const res = await fetch(url); } catch(e) { setError(e); }	State consistency
setState	क्लास कंपोनेंट्स के लिए स्टेट अपडेट	this.setState({ key: value })	this.setState({ hasError: true });	डायरेक्ट mutation से बचें
React.memo	अनावश्यक re-renders रोकता है	export default React.memo(Component)	export default React.memo(त्रुटिपूर्णकंपोनेंट);	Performance optimization
ErrorBoundaryFallback	Fallback UI	function Fallback() { return <div>Error</div>; }	<ErrorBoundary fallback={<Fallback />}><Component /></ErrorBoundary>	UX में सुधार

📊 Complete रिएक्ट (React) Properties Reference

Property	Values	Default	Description	रिएक्ट (React) Support
hasError	true, false	false	त्रुटि स्थिति दिखाता है	Class Components
error	Error object	null	त्रुटि ऑब्जेक्ट स्टोर करता है	Class Components
errorInfo	object	null	Component stack trace	Class Components
children	ReactNode	null	Child components	All Components
fallback	ReactNode	null	Fallback UI for errors	React 16+
getDerivedStateFromError	function	null	Update state on error	Class Components
componentDidCatch	function	null	Error capture method	Class Components
useState	function	null	State hook	Functional Components
useEffect	function	null	Effect hook	Functional Components
setState	function	null	State update for class components	Class Components
React.memo	function	null	Prevents unnecessary rerenders	Functional Components

त्रुटि प्रबंधन संदर्भ रिएक्ट (React) में स्थिर और विश्वसनीय कंपोनेंट्स बनाने की कुंजी है। Error Boundaries, सुरक्षित असिंक्रोनस ऑपरेशन हैंडलिंग और Performance optimization मिलकर एप्लिकेशन को क्रैश-प्रतिरोधी बनाते हैं। अगले कदमों में Performance profiling, global state management और monitoring tools का उपयोग शामिल है ताकि त्रुटियों की पहचान और प्रबंधन पेशेवर स्तर पर किया जा सके।

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा

त्रुटि प्रबंधन संदर्भ

इस ट्यूटोरियल को साझा करें

मूल उदाहरण

व्यावहारिक उदाहरण

Advanced रिएक्ट (React) Implementation

📊 संपूर्ण संदर्भ

📊 Complete रिएक्ट (React) Properties Reference

संबंधित खोज शब्द

🧠 अपने ज्ञान की परीक्षा करें

अपने ज्ञान की परीक्षा करें

📝 निर्देश

🚧 कोर्स जल्द आ रहा है

Course Name

उपलब्ध होने पर सूचना पाएं

अभी उपलब्ध

Coming Soon

Course Name