Claude Code + Better Stack: الإعداد الوحيد الذي تحتاجه لتصحيح الأخطاء
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00تتبع الأخطاء في Better Stack مبهر للغاية.
00:00:02فهو يدعم أي نوع من التطبيقات التي تريد بناءها،
00:00:04ويعرض تسجيلات الجلسات،
00:00:05بل ويوفر لك مطالبة (prompt) يمكنك إدراجها
00:00:07في أي وكيل برمجة يعمل بالذكاء الاصطناعي مع معلومات مهمة
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ليتمكن من إصلاحها مباشرة في الوحدة الطرفية (terminal).
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لذا سأرفع فيديو قصيراً صنعته عن "كينت سي دودز"،
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:15باستخدام حزمة Sentry React SDK.
00:01:17وأستخدم DSN خاصاً بـ Better Stack،
00:01:19والذي يمكنك الحصول عليه بسهولة عبر ربط تطبيق،
00:01:22واختيار نوع التطبيق الذي تريد تتبع أخطائه،
00:01:24ثم النزول للأسفل لتجد هذه المطالبة،
00:01:27والتي يمكنك نسخها ولصقها في وكيل الذكاء الاصطناعي الخاص بك.
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ويمكننا حتى الضغط هنا ليقوم الذكاء الاصطناعي بشرحه لنا.
00:01:44كما يمكننا مشاهدة إعادة عرض جلسة مجهولة
00:01:46لكل ما حدث وصولاً إلى هذا الخطأ.
00:01:48لكن حالياً، لنركز على إصلاح ذلك باستخدام Claude code.
00:01:51يمكننا الضغط على مطالبة الذكاء الاصطناعي
00:01:53ونسخ هذه المطالبة مباشرة إلى Claude code،
00:01:55لكن هذا قد يكون مملاً للغاية
00:01:57إذا كان لديك الكثير من الأخطاء التي تريد معالجتها.
00:01:59لذا، لنحصل على هذه المعلومات مباشرة في Claude code
00:02:02باستخدام خادم Better Stack MCP،
00:02:04الذي قمت بإعداده مسبقاً،
00:02:05ولكن يمكنك القيام بذلك عبر تشغيل هذا الأمر
00:02:07أو تعديل إعدادات بيئة البرمجة الخاصة بك
00:02:10وتسجيل الدخول إلى Better Stack.
00:02:11خادم MCP يمنحنا الوصول إلى الكثير من الأدوات المفيدة.
00:02:15وإذا أردت توفير سياق الذاكرة (context)،
00:02:16يمكنك تفعيل خيار تحميل الأدوات المؤجل
00:02:18في ملف إعدادات Claude JSON،
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:42أو ينبهك على WhatsApp أو Telegram،
00:02:44أو حتى يجعل Claude ينشئ طلبات سحب (PRs) تلقائياً
00:02:46مع إصلاحات للمشكلات الجديدة.
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وبالنظر إلى طلب السحب،
00:03:16سنلقي نظرة على الملفات المتغيرة.
00:03:17لا أصدق أنه مجرد سطر واحد من الكود
00:03:20هو الذي أصلح كل شيء.
00:03:21لذا سأختبر هذا محلياً
00:03:23وبعد التمرير في الفيديو لبضع دقائق،
00:03:25أستطيع القول بثقة أنني غير قادر على تكرار الخطأ.
00:03:27الآن تم دمج طلب السحب
00:03:29وفي هذه المرحلة، يمكننا القيام بشيء رائع حقاً.
00:03:31بدلاً من الدخول يدوياً إلى Better Stack
00:03:33والضغط على زر الحل (resolve)،
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،
00:03:49يمكننا أن نرى أن هذه المشكلة قد حُلت
00:03:51وكذلك جميع حالات حدوثها السابقة.
00:03:53ويمكننا تكرار هذه الخطوات مراراً وتكراراً
00:03:56حتى نصلح كل خطأ في تطبيقنا.
00:03:58أؤمن بصدق أن هذا هو الاتجاه
00:04:00الذي تسير فيه الأمور.
00:04:01سنستخدم المزيد من الوكلاء ونقلل زيارة واجهات المستخدم
00:04:03أو المتصفح لأن ذلك أكثر راحة ببساطة.
00:04:07لذا أنصحكم بتجربة خادم Better Stack MCP
00:04:09لمعرفة ما يمكنه فعله بالضبط
00:04:11لتسريع سير عمل تصحيح الأخطاء لديكم.
00:04:12وإذا أردتم معرفة المزيد من التفاصيل
00:04:14حول خادم MCP نفسه،
00:04:16فشاهدوا هذا الفيديو من جيمس.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video