Claude Code + Better Stack: बस यही एक एरर डिबगिंग सेटअप आपको चाहिए

BBetter Stack
컴퓨터/소프트웨어창업/스타트업AI/미래기술

Transcript

00:00:00Better Stack में एरर ट्रैकिंग वाकई बहुत प्रभावशाली है।
00:00:02यह आपके द्वारा बनाए जाने वाले किसी भी तरह के ऐप को सपोर्ट करता है,
00:00:04सेशन रिप्ले रेंडर करता है,
00:00:05और आपको एक ऐसा प्रॉम्प्ट भी देता है जिसे आप
00:00:07ज़रूरी जानकारी के साथ किसी भी AI कोडिंग एजेंट में डाल सकते हैं
00:00:10ताकि आपको एरर जल्दी ठीक करने में मदद मिल सके।
00:00:11लेकिन ब्राउज़र खोलना और एरर को अपने कोडिंग एजेंट में
00:00:13पेस्ट करना वास्तव में कुशल नहीं है,
00:00:15खासकर अगर आपके पास निपटने के लिए बहुत सारे एरर हों।
00:00:17यहीं पर Better Stack MCP सर्वर काम आता है,
00:00:20जो आपके डीबगिंग प्रोसेस को काफी तेज़ कर देता है
00:00:22क्योंकि यह आपके एजेंट को एरर के बारे में सारी जानकारी देता है
00:00:25जिसका उपयोग वह टर्मिनल में इसे ठीक करने के लिए कर सकता है।
00:00:27आइए देखें कि यह बिल्कुल कैसे काम करता है।
00:00:28और शुरू करने से पहले, सब्सक्राइब करना न भूलें।
00:00:30तो इस डेमो के लिए, हम अपने वीडियो इम्यूलेशन ऐप
00:00:36के एक एरर को ठीक करने जा रहे हैं।
00:00:37अब यह एक असली एरर है।
00:00:39यह वैसा नहीं है जिसे मैंने इस वीडियो के लिए बनाया हो
00:00:41और यह कभी-कभी आता रहता है।
00:00:43इसलिए मैं इसे लाइव दोहराने की कोशिश करने वाला हूँ।
00:00:44और यह तब होता है जब भी मैं कोई वीडियो अपलोड करता हूँ।
00:00:46तो मैं Kent C. Dodds के बारे में बनाया गया एक शॉर्ट अपलोड करूँगा,
00:00:49जो आपको Better Stack चैनल पर मिल सकता है।
00:00:51मैं एक प्रीसेट चुनूँगा।
00:00:52मुझे यह पसंद है क्योंकि यह मुझे Fallout की याद दिलाता है।
00:00:55और मैं डेवलपर टूल्स को इन्स्पेक्ट करने जा रहा हूँ।
00:00:57हमारे पास पहले से ही दो एरर हैं,
00:00:59लेकिन यह वह नहीं है जिसे हम ठीक करने वाले हैं।
00:01:01और नया एरर तब आता है जब मैं थोड़ा स्क्रबर घुमाता हूँ।
00:01:03तो मैं इसे घुमाऊँगा और उम्मीद है कि यह ट्रिगर हो जाएगा,
00:01:06जो आखिरकार हो जाता है।
00:01:08और यह रहा, एक अनकॉट सिक्योरिटी एरर,
00:01:10जो टाइमलाइन को स्क्रॉल होने से रोकता है।
00:01:12अब, चूंकि यह एक React ऐप है,
00:01:14मैंने इसे Better Stack से जोड़ा है
00:01:15Sentry React SDK का उपयोग करके।
00:01:17और मैं Better Stack के विशिष्ट DSN का उपयोग कर रहा हूँ,
00:01:19जिसे आप किसी एप्लिकेशन को कनेक्ट करके,
00:01:22ऐप का प्रकार चुनकर आसानी से प्राप्त कर सकते हैं,
00:01:24और फिर इस प्रॉम्प्ट को खोजने के लिए नीचे स्क्रॉल करें,
00:01:27जिसे आप कॉपी करके अपने AI एजेंट में पेस्ट कर सकते हैं।
00:01:29और यह पूरे सेटअप का ध्यान रखता है।
00:01:30और उसके बाद,
00:01:31हम देख सकते हैं कि हमें Better Stack में एरर मिल रहे हैं।
00:01:33तो यहाँ वह है जो हाल ही में ट्रिगर हुआ था
00:01:34लगभग छह मिनट पहले।
00:01:35और अगर हम इस पर क्लिक करते हैं, तो हमें बहुत सारा डेटा मिल सकता है,
00:01:38जैसे ब्राउज़र की जानकारी,
00:01:39और वे सटीक स्टेप्स जिनके कारण यह एरर आया।
00:01:41और हम AI से इसे समझाने के लिए यहाँ क्लिक भी कर सकते हैं।
00:01:44हम उस एरर तक ले जाने वाले हर काम का
00:01:46एक अनाम सेशन रिप्ले भी देख सकते हैं।
00:01:48लेकिन अभी के लिए, Claude code का उपयोग करके इसे ठीक करने पर ध्यान दें।
00:01:51अब हम AI प्रॉम्प्ट पर क्लिक कर सकते हैं
00:01:53और इस प्रॉम्प्ट को सीधे Claude code में कॉपी कर सकते हैं,
00:01:55लेकिन यह बहुत उबाऊ हो सकता है
00:01:57अगर हमारे पास निपटने के लिए बहुत सारे एरर हों।
00:01:59तो आइए इस जानकारी को सीधे Claude code में प्राप्त करें
00:02:02Better Stack MCP सर्वर का उपयोग करके,
00:02:04जिसे मैंने पहले ही सेटअप कर लिया है,
00:02:05लेकिन आप इस कमांड को चलाकर
00:02:07या अपने कोडिंग हार्नेस के कॉन्फ़िगरेशन को एडिट करके
00:02:10और Better Stack में साइन इन करके ऐसा कर सकते हैं।
00:02:11अब MCP सर्वर हमें बहुत सारे उपयोगी टूल तक पहुँच देता है।
00:02:15और अगर आप कॉन्टेक्स्ट बचाना चाहते हैं,
00:02:16तो आप Claude सेटिंग्स JSON में
00:02:18डिफर्ड टूल लोडिंग चालू कर सकते हैं,
00:02:19जो केवल उन टूल्स को लोड करता है जिनकी आपको ज़रूरत है
00:02:21बजाय इसके कि सब कुछ कॉन्टेक्स्ट में डाल दिया जाए।
00:02:23अब, क्योंकि मैं पहले से ही प्रोजेक्ट की डायरेक्टरी में हूँ,
00:02:26मैं इस तरह का प्रॉम्प्ट लिख सकता हूँ,
00:02:27"इस एप्लिकेशन के लिए सभी एरर विवरण दें।"
00:02:29और Claude code सही ऐप खोजने के लिए सही टूल्स का उपयोग करता है
00:02:32और मुझे नवीनतम एरर का सारांश देता है।
00:02:35अब यह पहले से ही बहुत शक्तिशाली है
00:02:36क्योंकि आप इसे नियमित रूटीन के रूप में चला सकते हैं
00:02:40और जब भी कोई नया एरर आए तो यह आपको ईमेल भेज सकता है,
00:02:42WhatsApp या Telegram पर पिंग कर सकता है,
00:02:44या Claude से नए मुद्दों के समाधान के साथ
00:02:46स्वचालित रूप से PR भी बनवा सकता है।
00:02:47अभी के लिए, बस इस सिक्योरिटी एरर का विवरण प्राप्त करते हैं,
00:02:50जिसके लिए इसने पहले ही एक प्रॉम्प्ट सुझाया है।
00:02:52लेकिन मैं जो करने जा रहा हूँ वह यह है कि इससे पूछूँगा
00:02:54कि क्या इस एरर से संबंधित कोई और एरर हैं,
00:02:56ताकि उन्हें एक साथ ठीक किया जा सके।
00:02:58और अब यह समानांतर में कोड बेस का विवरण प्राप्त कर रहा है
00:03:01और यह मुझे समस्या का मूल कारण बता रहा है
00:03:03एक सुझाए गए समाधान के साथ
00:03:04और मुझे बताया कि 404 एरर एक अलग समस्या है।
00:03:07इसलिए यह उन्हें एक साथ समूहबद्ध नहीं करेगा।
00:03:08अब आइए Claude से सिक्योरिटी समस्या को ठीक करने,
00:03:10एक नई फीचर ब्रांच बनाने और पुल रिक्वेस्ट बनाने के लिए कहें,
00:03:12जो इसने बहुत जल्दी कर दिया है।
00:03:14और PR को देखते हुए,
00:03:16हम बदली गई फाइलों पर नज़र डालेंगे।
00:03:17और मुझे विश्वास नहीं हो रहा कि कोड की बस यह एक लाइन
00:03:20सब कुछ ठीक कर देती है।
00:03:21इसलिए मैं इसे लोकली टेस्ट करने जा रहा हूँ
00:03:23और कुछ मिनटों तक स्क्रबर घुमाने के बाद,
00:03:25मैं विश्वास के साथ कह सकता हूँ कि मैं एरर को दोबारा नहीं देख पा रहा हूँ।
00:03:27तो अब PR को मर्ज कर दिया गया है
00:03:29और इस स्तर पर, हम कुछ बहुत ही शानदार कर सकते हैं।
00:03:31Better Stack में मैन्युअल रूप से जाने
00:03:33और रिज़ॉल्व बटन पर क्लिक करने के बजाय,
00:03:35मैं बस नए बदलावों को पुल कर सकता हूँ,
00:03:36फिर Claude को यह जाँचने के लिए कह सकता हूँ कि समाधान लागू है
00:03:38और यदि है, तो Better Stack में समस्या को हल करें।
00:03:41तो अब इसने पुष्टि कर दी है कि समाधान लागू है
00:03:43और यह Better Stack में तीन सिक्योरिटी समस्याओं को हल कर रहा है,
00:03:45जो इसने तब किया जब मैं बात कर रहा था।
00:03:47तो अगर हम Better Stack UI पर वापस जाते हैं,
00:03:49तो हम देख सकते हैं कि यह समस्या हल हो गई है
00:03:51और इसके सभी पिछले उदाहरण भी हल हो गए हैं।
00:03:53और हम इन स्टेप्स को बार-बार दोहरा सकते हैं
00:03:56जब तक कि हम अपने ऐप के हर एक एरर को ठीक न कर लें।
00:03:58मेरा वास्तव में मानना है कि चीजें
00:04:00इसी दिशा में जा रही हैं।
00:04:01हम एजेंटों का अधिक और UI या ब्राउज़र पर जाने का
00:04:03कम उपयोग करेंगे क्योंकि यह अधिक सुविधाजनक है।
00:04:07इसलिए मैं आपको Better Stack MCP सर्वर देखने की सलाह देता हूँ
00:04:09यह देखने के लिए कि यह आपके डीबगिंग वर्कफ़्लो को
00:04:11तेज़ करने के लिए बिल्कुल क्या कर सकता है।
00:04:12और अगर आप खुद MCP सर्वर के बारे में
00:04:14अधिक विवरण जानना चाहते हैं,
00:04:16तो James का यह वीडियो देखें।

Key Takeaway

Better Stack MCP सर्वर और Claude code का एकीकरण डीबगिंग वर्कफ़्लो को ऑटोमेट करता है, जहाँ AI एजेंट टर्मिनल से ही एरर का विश्लेषण कर, कोड ठीक कर और PR मर्ज होने के बाद डैशबोर्ड पर समस्याओं को हल कर सकता है।

Highlights

  • Better Stack MCP सर्वर AI कोडिंग एजेंटों को सीधे टर्मिनल में एरर डेटा भेजकर ब्राउज़र और IDE के बीच मैन्युअल कॉपी-पेस्ट की ज़रूरत को खत्म करता है।

  • Sentry React SDK का उपयोग करके React ऐप्स को Better Stack के विशिष्ट DSN से जोड़ने पर एरर विवरण, ब्राउज़र जानकारी और सेशन रिप्ले डेटा प्राप्त होता है।

  • Claude code में 'deferred tool loading' सेटिंग को चालू करने से केवल आवश्यक टूल्स लोड होते हैं, जिससे टोकन की बचत होती है और AI का कॉन्टेक्स्ट विंडो सुरक्षित रहता है।

  • AI एजेंट केवल एक कमांड के साथ कोड बेस का विश्लेषण करके एरर को ठीक करने के लिए नई फीचर ब्रांच और पुल रिक्वेस्ट (PR) बना सकता है।

  • Better Stack API के माध्यम से Claude सीधे टर्मिनल से हल किए गए एरर को डैशबोर्ड पर 'Resolved' मार्क कर सकता है, जिससे UI खोलने की आवश्यकता नहीं रहती।

Timeline

मॉडर्न डीबगिंग और Better Stack की क्षमताएं

  • Better Stack हर प्रकार के ऐप के लिए एरर ट्रैकिंग और विस्तृत सेशन रिप्ले रेंडरिंग की सुविधा देता है।
  • MCP सर्वर AI एजेंटों को एरर की पूरी जानकारी सीधे टर्मिनल में उपलब्ध कराकर डीबगिंग की गति बढ़ाता है।

पारंपरिक डीबगिंग में ब्राउज़र खोलना और एरर विवरणों को मैन्युअल रूप से कोडिंग एजेंटों में पेस्ट करना एक धीमी प्रक्रिया है। Better Stack MCP सर्वर इस बाधा को दूर करता है। यह AI को वह सारा डेटा देता है जिसकी उसे टर्मिनल के भीतर ही कोड को समझने और ठीक करने के लिए आवश्यकता होती है।

लाइव एरर ट्रैकिंग और ऐप एकीकरण

  • React एप्लिकेशन में Better Stack को Sentry React SDK के माध्यम से कनेक्ट किया जाता है।
  • Better Stack डैशबोर्ड प्रत्येक एरर के लिए ब्राउज़र विवरण और उन सटीक चरणों को रिकॉर्ड करता है जिनसे एरर ट्रिगर हुआ।

वीडियो इम्यूलेशन ऐप में टाइमलाइन स्क्रॉलिंग के दौरान आने वाला 'Security Error' इसका एक वास्तविक उदाहरण है। AI प्रॉम्प्ट जनरेटर का उपयोग करके SDK सेटअप और एरर रिपोर्टिंग को सरल बनाया गया है। इसमें अनाम सेशन रिप्ले की सुविधा भी शामिल है, जिससे डेवलपर एरर आने से ठीक पहले के यूजर एक्शन देख सकते हैं।

Claude Code और MCP सर्वर कॉन्फ़िगरेशन

  • MCP सर्वर सेटअप करने के लिए कोडिंग हार्नेस कॉन्फ़िगरेशन को एडिट करना या विशिष्ट कमांड चलाना पर्याप्त है।
  • Claude को दिए गए एक साधारण प्रॉम्प्ट से एप्लिकेशन के सभी सक्रिय एरर का सारांश प्राप्त किया जा सकता है।

स्वचालित समाधानों के लिए यह सेटअप ईमेल, WhatsApp या Telegram के माध्यम से नए एरर का अलर्ट भेज सकता है। 'Deferred tool loading' चालू करने से कॉन्टेक्स्ट मैनेजमेंट बेहतर होता है। यह सिस्टम नियमित रूटीन के रूप में काम कर सकता है जो नए मुद्दों का पता चलते ही स्वचालित रूप से सुधार सुझाता है।

स्वचालित समाधान और पुल रिक्वेस्ट निर्माण

  • AI एजेंट संबंधित एरर को पहचानकर उनके मूल कारण का विश्लेषण करता है और एक साथ सुधार का सुझाव देता है।
  • Claude code सीधे टर्मिनल से नई फीचर ब्रांच बनाता है और कोड में बदलाव करके PR तैयार करता है।

सुरक्षा समस्या को ठीक करने के बाद AI पुष्टि करता है कि समाधान प्रभावी है। इसके बाद वह Better Stack API का उपयोग करके डैशबोर्ड पर भी एरर को 'Resolved' मार्क कर देता है। यह पूरी प्रक्रिया डेवलपर्स को मैन्युअल UI इंटरैक्शन से मुक्त करती है और डीबगिंग को एक एजेंट-आधारित वर्कफ़्लो में बदल देती है।

Community Posts

No posts yet. Be the first to write about this video!

Write about this video