Claude Code + Better Stack: Satu-satunya Setup Debugging Error yang Anda Butuhkan

Bahasa IndonesiaالعربيةDeutschEnglishEspañolFrançaisहिन्दी日本語한국어PortuguêsРусский中文
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00Pelacakan kesalahan di Better Stack sangat mengesankan.
00:00:02Ini mendukung segala jenis aplikasi yang ingin Anda bangun,
00:00:04merender pemutaran ulang sesi,
00:00:05dan bahkan memberi Anda prompt yang bisa Anda masukkan
00:00:07ke agen coding AI mana pun dengan informasi penting
00:00:10untuk membantu Anda memperbaiki kesalahan dengan cepat.
00:00:11Tapi tidak efisien jika harus membuka peramban
00:00:13dan menempelkan kesalahan tersebut ke agen coding Anda,
00:00:15terutama jika ada banyak kesalahan yang harus ditangani.
00:00:17Di sinilah server MCP Better Stack berperan,
00:00:20mempercepat proses debug Anda secara masif
00:00:22dengan memberikan agen semua informasi tentang kesalahan Anda
00:00:25yang bisa digunakannya untuk memperbaikinya di terminal.
00:00:27Mari kita lihat cara kerjanya secara mendetail.
00:00:28Dan sebelum itu, jangan lupa untuk berlangganan.
00:00:30Untuk demo ini, kita akan memperbaiki sebuah kesalahan
00:00:36pada aplikasi emulasi video saya.
00:00:37Ini adalah kesalahan yang nyata.
00:00:39Bukan yang saya buat-buat untuk video ini
00:00:41dan ini terjadi sesekali.
00:00:43Jadi saya akan mencoba mereplikanya secara langsung.
00:00:44Dan ini terjadi setiap kali saya mengunggah video.
00:00:46Saya akan mengunggah video pendek tentang Kent C. Dodds,
00:00:49yang bisa Anda temukan di kanal Better Stack.
00:00:51Saya akan memilih sebuah preset.
00:00:52Saya menyukai ini karena mengingatkan saya pada Fallout.
00:00:55Dan saya akan memeriksa alat pengembang.
00:00:57Kita sudah memiliki dua kesalahan,
00:00:59tapi bukan ini yang akan kita perbaiki.
00:01:01Kesalahan baru muncul jika saya menggeser kursor ke sana kemari.
00:01:03Saya akan mencobanya dan semoga kesalahannya terpicu,
00:01:06dan akhirnya memang terjadi.
00:01:08Ini dia, kesalahan keamanan yang tidak tertangkap,
00:01:10yang mencegah linimasa untuk bergeser.
00:01:12Karena ini adalah aplikasi React,
00:01:14saya telah menghubungkannya ke Better Stack
00:01:15menggunakan SDK React Sentry.
00:01:17Dan saya menggunakan DSN khusus Better Stack,
00:01:19yang bisa Anda dapatkan dengan mudah dengan menghubungkan aplikasi,
00:01:22memilih jenis aplikasi yang ingin dilacak kesalahannya,
00:01:24lalu gulir ke bawah untuk menemukan prompt ini,
00:01:27yang bisa Anda salin dan tempel ke agen AI Anda.
00:01:29Dan itu akan menangani seluruh pengaturannya.
00:01:30Setelah itu,
00:01:31kita bisa melihat adanya kesalahan di Better Stack.
00:01:33Ini adalah kesalahan yang baru saja terpicu
00:01:34sekitar enam menit yang lalu.
00:01:35Jika diklik, kita akan mendapatkan banyak data,
00:01:38seperti informasi peramban,
00:01:39langkah-langkah tepat yang menyebabkan kesalahan ini.
00:01:41Kita bahkan bisa klik di sini agar AI menjelaskannya kepada kita.
00:01:44Kita juga bisa menonton pemutaran ulang sesi anonim
00:01:46dari semua yang mengarah pada kesalahan tersebut.
00:01:48Tapi sekarang, mari fokus memperbaikinya memakai Claude Code.
00:01:51Kita bisa mengeklik prompt AI
00:01:53dan menyalin prompt ini langsung ke Claude Code,
00:01:55tapi ini bisa sangat membosankan
00:01:57jika Anda memiliki banyak kesalahan yang ingin ditangani.
00:01:59Jadi mari dapatkan informasi ini langsung ke Claude Code
00:02:02dengan menggunakan server MCP Better Stack,
00:02:04yang sudah saya siapkan sebelumnya,
00:02:05tapi Anda bisa melakukannya dengan menjalankan perintah ini
00:02:07atau mengedit konfigurasi harness coding Anda
00:02:10dan masuk ke akun Better Stack.
00:02:11Server MCP memberi kita akses ke banyak alat yang berguna.
00:02:15Dan jika Anda ingin menghemat konteks,
00:02:16Anda bisa mengaktifkan pemuatan alat yang ditunda
00:02:18di pengaturan JSON Claude,
00:02:19yang hanya akan memuat alat-alat yang Anda butuhkan
00:02:21daripada memasukkan semuanya ke dalam konteks.
00:02:23Sekarang, karena saya sudah berada di direktori proyek,
00:02:26saya bisa menulis prompt seperti,
00:02:27berikan semua detail kesalahan untuk aplikasi ini.
00:02:29Claude Code menggunakan alat yang tepat untuk menemukan aplikasi yang benar
00:02:32dan memberi saya ringkasan kesalahan terbaru.
00:02:35Ini sudah sangat luar biasa
00:02:36karena Anda bisa menjalankannya secara rutin
00:02:40dan mengirimi Anda email setiap kali ada kesalahan baru,
00:02:42memberitahu Anda via WhatsApp atau Telegram,
00:02:44atau bahkan membuat Claude membuat PR secara otomatis
00:02:46dengan perbaikan untuk masalah-masalah baru.
00:02:47Untuk saat ini, mari kita lihat detail kesalahan keamanan ini,
00:02:50yang mana dia sudah menyarankan sebuah prompt.
00:02:52Tapi yang akan saya lakukan adalah bertanya
00:02:54apakah ada kesalahan lain yang terkait dengan ini,
00:02:56sehingga semuanya bisa diperbaiki bersamaan.
00:02:58Sekarang dia mendapatkan detail basis kode secara paralel
00:03:01dan memberi tahu saya akar penyebab masalahnya
00:03:03beserta saran perbaikan
00:03:04dan memberi tahu bahwa kesalahan 404 adalah masalah terpisah.
00:03:07Jadi dia tidak akan mengelompokkannya jadi satu.
00:03:08Sekarang mari minta Claude memperbaiki masalah keamanan tersebut
00:03:10di cabang fitur baru dan membuat pull request,
00:03:12yang dilakukannya dengan sangat cepat.
00:03:14Dan melihat PR tersebut,
00:03:16kita akan melihat file yang berubah.
00:03:17Saya tidak percaya hanya dengan satu baris kode ini
00:03:20semuanya bisa diperbaiki.
00:03:21Jadi saya akan mengujinya secara lokal
00:03:23dan setelah mencoba menggeser kursor selama beberapa menit,
00:03:25saya yakin bahwa kesalahannya tidak bisa direproduksi lagi.
00:03:27Jadi sekarang PR-nya sudah digabungkan
00:03:29dan pada tahap ini, kita bisa melakukan sesuatu yang keren.
00:03:31Alih-alih pergi ke UI Better Stack secara manual
00:03:33dan mengeklik tombol resolve,
00:03:35saya cukup menarik perubahan baru,
00:03:36lalu menyuruh Claude memeriksa apakah perbaikannya sudah terpasang
00:03:38dan jika sudah, selesaikan masalah tersebut di Better Stack.
00:03:41Sekarang dia sudah mengonfirmasi perbaikannya terpasang
00:03:43dan sedang menyelesaikan tiga masalah keamanan di Better Stack,
00:03:45yang dia lakukan selagi saya berbicara.
00:03:47Jika kita kembali ke antarmuka Better Stack,
00:03:49kita bisa melihat masalah ini telah diselesaikan
00:03:51demikian juga dengan semua kemunculan sebelumnya.
00:03:53Dan kita bisa mengulangi langkah-langkah ini terus-menerus
00:03:56sampai kita memperbaiki setiap kesalahan di aplikasi kita.
00:03:58Saya benar-benar percaya bahwa ini adalah arah
00:04:00tujuan segala sesuatunya berkembang.
00:04:01Kita akan lebih sering menggunakan agen dan jarang mengunjungi UI
00:04:03atau peramban kita karena ini jauh lebih nyaman.
00:04:07Jadi saya sarankan Anda mencoba server MCP Better Stack
00:04:09untuk melihat persis apa yang bisa dilakukannya
00:04:11untuk mempercepat alur kerja debugging Anda.
00:04:12Dan jika Anda ingin tahu lebih banyak detail
00:04:14tentang server MCP itu sendiri,
00:04:16silakan tonton video ini dari James.

Key Takeaway

Alur kerja debugging menjadi 3x lebih cepat dengan mengintegrasikan server MCP Better Stack ke dalam Claude Code untuk mendeteksi, memperbaiki, dan menyelesaikan kesalahan aplikasi langsung dari terminal.

Highlights

  • Integrasi SDK React Sentry dengan DSN khusus Better Stack memungkinkan pelacakan kesalahan aplikasi secara otomatis.

  • Server Model Context Protocol (MCP) menghubungkan Claude Code langsung ke database kesalahan Better Stack tanpa melalui peramban.

  • Fitur pemutaran ulang sesi anonim menyediakan visualisasi langkah demi langkah yang menyebabkan terjadinya kesalahan pada aplikasi.

  • Claude Code mampu mengidentifikasi akar masalah, membuat cabang fitur baru, dan menghasilkan pull request perbaikan secara mandiri.

  • Perintah terminal memungkinkan penyelesaian status kesalahan (resolve) di dasbor Better Stack secara otomatis setelah verifikasi kode.

  • Opsi deferred tool loading dalam konfigurasi JSON Claude menghemat penggunaan konteks dengan hanya memuat alat saat dibutuhkan.

Timeline

Mekanisme Pemantauan Kesalahan Better Stack

  • SDK React Sentry menghubungkan aplikasi ke dasbor pelacakan kesalahan melalui DSN khusus.
  • Sistem menangkap data teknis mendalam termasuk informasi peramban dan urutan tindakan pengguna.
  • Prompt AI otomatis tersedia untuk menyalin konteks kesalahan ke agen coding eksternal.

Pelacakan kesalahan di Better Stack mendukung berbagai jenis aplikasi dengan kemampuan merender pemutaran ulang sesi. Pengembang mendapatkan akses ke log yang menunjukkan kesalahan keamanan yang mencegah pergeseran linimasa pada aplikasi emulasi video. Integrasi awal dilakukan dengan memasukkan prompt konfigurasi ke agen AI untuk menangani seluruh pengaturan SDK.

Integrasi Server MCP dan Claude Code

  • Server MCP memberikan akses langsung bagi agen AI ke seluruh alat dan data di akun Better Stack.
  • Konfigurasi deferred tool loading di pengaturan JSON mengoptimalkan efisiensi pemakaian token konteks.
  • Pencarian detail aplikasi dan ringkasan kesalahan terbaru dilakukan melalui perintah teks sederhana di terminal.

Menghubungkan Claude Code dengan server MCP menghilangkan kebutuhan untuk berpindah antara terminal dan peramban. Sistem ini memungkinkan otomatisasi tingkat lanjut seperti pengiriman notifikasi kesalahan via WhatsApp atau pembuatan pull request otomatis untuk setiap masalah baru yang terdeteksi. Pengembang cukup masuk ke akun Better Stack melalui harness coding untuk mengaktifkan sinkronisasi data ini.

Resolusi Kesalahan dan Otomatisasi Pull Request

  • Claude Code menganalisis basis kode secara paralel untuk membedakan antara masalah keamanan dan kesalahan navigasi 404.
  • Perbaikan satu baris kode dapat menyelesaikan masalah keamanan yang sulit direplikasi secara manual.
  • Sinkronisasi status kesalahan antara terminal lokal dan dasbor awan terjadi secara real-time.

Agen AI mampu mengonfirmasi apakah perbaikan telah terpasang dengan memeriksa perubahan kode terbaru setelah proses penggabungan (merge). Setelah verifikasi, Claude menyelesaikan tiga masalah keamanan di UI Better Stack secara otomatis tanpa intervensi manual di peramban. Pendekatan berbasis agen ini menggantikan interaksi UI tradisional untuk mempercepat siklus pengembangan dan debugging.

Community Posts

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

Write about this video