Advertisement
  1. Code
  2. Performance

Pemantauan Kesalahan dan Kinerja untuk Aplikasi Web & Mobile Menggunakan Raygun

Scroll to top
Read Time: 9 min
This post is part of a series called Raygun Tools for Performance and Error Monitoring.
Raygun Real User Monitoring: Know Your Users' Experience
Raygun APM: Annihilate Performance Issues
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Indonesian (Bahasa Indonesia) translation by Ridho Anbia Habibullah (you can also view the original English article)

Memperbaiki bug jauh lebih mudah bila Anda tahu bagaimana hal itu terjadi, tapi itu mungkin tidak selalu terjadi. Begitu perangkat lunak di jalankan, yang tersisa bagi Anda hanya belas kasihan para pelanggan, yang mungkin tidak selalu melaporkan kerusakan itu.

Saat kode mengalamin kerusakan, Anda mencatat kesalahan pada file log, dan karenanya melanjutkan perjalanan pengembang untuk melacak terjadinya bug dengan melihat melalui file log. Menebak akar penyebab kecelakaan dari file log mungkin memerlukan banyak waktu berharga Anda.

Apakah ada cara yang lebih mudah untuk memecahkan masalah kerusakan dalam aplikasi perangkat lunak Anda? Raygun menawarkan serangkaian solusi menarik untuk mengawasi kesalahan saat muncul di aplikasi web dan seluler Anda.

Dari dokumentasi resmi, Raygun menawarkan:

Lengkapi visibilitas ke masalah yang dialami pengguna dan alat alur kerja untuk menyelesaikannya dengan cepat sebagai satu tim.

Raygun menawarkan empat alat untuk membuatnya lebih mudah untuk berurusan dengan kesalahan dan crash dalam aplikasi Anda:

  • Alat Pelacak Kerusakan Raygun membantu Anda memantau dan meniru setiap kecelakaan dan kesalahan yang terjadi pada aplikasi Anda.
  • Alat Pemantauan Pengguna Nyata membantu menangkap setiap sesi pengguna dan informasi terkait lainnya untuk mengukur pengalaman pengguna.
  • Alat Pelacakan Pengguna membantu mengkategorikan kerusakan dan kesalahan berdasarkan pengguna aplikasi.
  • Alat Pelacakan Deployment Raygun memudahkan pelacakan setiap rilis dan menunjukkan bagaimana hal itu mempengaruhi keseluruhan kinerja aplikasi perangkat lunak.

Dalam tutorial ini, Anda akan belajar bagaimana mengintegrasikan alat Raygun dengan aplikasi web Anda untuk memantau dan melacak bug. Untuk tutorial ini, Anda akan mengintegrasikan alat Raygun dengan aplikasi web Angular.

Memulai dengan Raygun

Anda bisa menggunakan Raygun dengan sejumlah bahasa pemrograman dan kerangka kerja. Untuk tutorial ini, mari kita lihat bagaimana cara memulai menggunakan Raygun dengan aplikasi web Angular.

Untuk memulai, Anda perlu membuat akun di Raygun. Setelah membuat akun, Anda akan diberi layar untuk memilih bahasa atau framework yang diinginkan.

Raygun - Select Framework To Integrate WithRaygun - Select Framework To Integrate WithRaygun - Select Framework To Integrate With

Dalam tutorial ini, Anda akan belajar bagaimana memulai dengan menggunakan Raygun pada aplikasi web Angular.

Menggunakan Angular Dengan Raygun

Dari daftar kerangka kerja, pilih Framework Angular. Anda akan disuguhkan pada layar untuk memilih Angular (v2 +) atau Angular1.x.

Raygun - Angular Framework SelectedRaygun - Angular Framework SelectedRaygun - Angular Framework Selected

Karena Anda akan belajar bagaimana memadukan Raygun dengan Angular 4, fokus pada tab Angular (v2 +).

Sebelum mengintegrasikan Raygun dengan Angular, Anda perlu membuat aplikasi Angular. Mari kita mulai dengan membuat aplikasi Angular.

Pertama, Anda perlu menginstal CLI Angular secara global.

Buat aplikasi Angular menggunakan CLI Angular .

Buat aplikasi Sudut menggunakan CLI Sudut.

Navigasikan ke direktori proyek dan jalankan aplikasi.

Anda akan memiliki aplikasi yang berjalan di http: // localhost: 4200 /.

Angular App Default HomeAngular App Default HomeAngular App Default Home
Pasanglah raygub4js library dengan menggunakan Node Package Manager (npm).

Di dalam folder src / config, buat file bernama app.raygun.setup.ts.

Salin kode pengaturan dari Step 2 dari Angular (v2 +) dan tempelkan ke file app.raygun.setup.ts.

Raygun Error Handling CodeRaygun Error Handling CodeRaygun Error Handling Code

Impor RaygunErrorHandler di file app.module.ts di dalam aplikasi Angular, dan tambahkan handler kesalahan kustom. Berikut adalah bagaimana file app.module.ts terlihat:

Sekarang Anda telah menambahkan handler kesalahan kustom RaygunErrorHandler, yang akan menangani kesalahan.

Mari tambahkan beberapa kode untuk membuat kesalahan. Impor Router di file app.component.ts.

Mengubah konstruktor metode seperti ditunjukkan:

Kode di atas akan melempar kesalahan saat Anda menjalankan aplikasi karena belum diimpor di AppModule. Mari kita lihat bagaimana Raygun menangkap kesalahannya. Simpan perubahan di atas dan restart aplikasi.

Arahkan browser Anda ke http://localhost:4200. Periksa browser konsol dan Anda akan memiliki kesalahan log.

Raygun Dashboard

Saat menjalankan aplikasi, Anda akan mengalami kesalahan saat masuk di konsol browser.

Dari aplikasi Raygun, klik pada tab Dashboard di sisi kiri, dan Anda akan memiliki informasi rinci tentang permintaan yang login oleh Raygun

Raygun DashboardRaygun DashboardRaygun Dashboard

Seperti yang terlihat di dasbor Raygun, ini menunjukkan jumlah sesi, permintaan terkini, jumlah kesalahan, dll, yang terkait dengan aplikasi Angular yang Anda konfigurasikan dengan Raygun.

Raygun Dashboard - Recent RequestsRaygun Dashboard - Recent RequestsRaygun Dashboard - Recent Requests

Klik permintaan terakhir yang ditampilkan di sisi kanan dasbor, dan Anda akan memiliki informasi terperinci yang terkait dengan permintaan tertentu.

Raygun - Detailed Request InfoRaygun - Detailed Request InfoRaygun - Detailed Request Info

Pelaporan kerusakan Raygun

Aplikasi crash adalah skenario umum saat menangani aplikasi perangkat lunak. Banyak sekali crash ini terjadi dalam skenario real-time dan karena itu sulit untuk dilacak tanpa sistem pelaporan kecelakaan yang tepat.

Raygun menyediakan alat yang disebut Crash Reporting yang memberikan wawasan yang lebih dalam aplikasi macet. Mari kita lihat bagaimana Crash Reporting bekerja.

Anda memiliki bug dalam aplikasi Angular Anda yang menabrak itu. Mari kita lihat bagaimana itu mendapat dilaporkan menggunakan Raygun Crash Reporting.

Klik tab Crash Reporting dari menu di sisi kiri. Anda akan memiliki laporan kesalahan yang tercantum.

Raygun Crash Reporting Raygun Crash Reporting Raygun Crash Reporting

Di tab Raygun crash reporting, ini menunjukkan kesalahan yang terjadi pada aplikasi. Pada tab yang ditunjukkan di atas, kesalahan telah dikategorikan ke dalam Active, Resolved, Ignored, dan Permanertly ignore.

Kesalahan yang Anda temukan saat menjalankan aplikasi telah dicatat di bawah tab Active.

Saat mengklik eror yang tercantum, Anda akan diarahkan ke halaman lain dengan informasi rinci terkait dengan kesalahan tersebut. Pada halaman ini, Anda akan memiliki informasi seperti ringkasan kesalahan, informasi HTTP, rincian lingkungan di mana kesalahan terjadi (seperti OS, browser, dll.), Informasi kesalahan mentah, dan jejak tumpukan kesalahan.

Raygun Detailed Error InformationRaygun Detailed Error InformationRaygun Detailed Error Information

Saat menampilkan informasi yang terkait dengan kesalahan tertentu, Raygun memberi Anda fitur untuk mengubah keadaan kesalahan sesuai perbaikan Anda. Anda dapat mengubah status menjadi aktif, teratasi, diabaikan, dll.

Raygun Crash Reporting Error StatusRaygun Crash Reporting Error StatusRaygun Crash Reporting Error Status

Alat pelaporan kecelakaan Raygun menyediakan fitur untuk menambahkan komentar atas kesalahan, yang sangat membantu dalam membahas detail tentang bug saat bekerja dalam tim.

Raygun Crash Reporting Comment For ErrorRaygun Crash Reporting Comment For ErrorRaygun Crash Reporting Comment For Error

Pengaturan : Kecelakaan pelaporan 

Pelaporan kecelakaan datang dengan beberapa pengaturan yang memudahkan pengguna mengelola kesalahan yang terjadi pada aplikasi.

Ini memberi Anda pilihan untuk mengaktifkan hidup refresh, kencan pertama terlihat pada kelompok kesalahan, dan jumlah pengguna di dasbor.

Anda memiliki pilihan untuk membuat sebagian besar kesalahan perubahan status dan pilihan untuk menghapus semua kesalahan yang terjadi dalam aplikasi.

Raygun Crash Reporting SettingsRaygun Crash Reporting SettingsRaygun Crash Reporting Settings

Kecelakaan pelaporan: Inbound filter

Raygun memberikan pilihan untuk menyaring permintaan berdasarkan alamat IP, nama mesin, dll. Jika Anda tidak ingin melacak kesalahan dari alamat IP tertentu, Anda dapat membuat filter masuk, dan kesalahan dari aplikasi yang berjalan pada itu. Alamat IP tidak akan dilacak lebih jauh.

Mari kita mencoba untuk menambahkan filter untuk aplikasi yang berjalan pada 127.0.0.0.1 dan melihat jika itu akan dilacak.

Dari menu sisi kiri, pada tab Crash Reporting, klik pada link Inbound Filters. Tambahkan alamat IP 127.0.0.0.1 ke daftar filter.

Raygun Crash Reporting FIlterRaygun Crash Reporting FIlterRaygun Crash Reporting FIlter

Nah, jika Anda mencoba menjalankan aplikasi, saat menabraknya tidak akan terlacak di layar pelaporan tabrakan karena telah disaring.

Nah, jika Anda mencoba menjalankan aplikasi, saat menabraknya tidak akan terlacak di layar pelaporan tabrakan karena telah disaring.

Raygun pengguna Pelacakan

Sebagian besar masalah yang dihadapi saat pengguna menggunakan perangkat lunak tidak dilaporkan. Probabilitas pengguna yang frustrasi yang melaporkan sebuah masalah cukup rendah. Oleh karena itu, Anda cenderung kehilangan umpan balik pengguna untuk meningkatkan kualitas perangkat lunak Anda.

Raygun menyediakan pengguna yang terpengaruh Pelacakan Laporan. Laporan ini menunjukkan daftar pengguna dari aplikasi Anda yang telah menemukan kesalahan. Ini memberi gambaran penuh tentang bagaimana Users tertentu mengalami kesalahan tertentu. Anda dapat melihat laporan ini dengan mengklik tab Pengguna di sisi kiri layar.

Dalam aplikasi Angular Anda, Anda belum menggunakan fitur rincian pengguna yang terkena dampak Raygun. Oleh karena itu dalam laporan pelacakan pengguna yang terpengaruh, Anda akan menemukan rincian pengguna sebagai anonim beserta detail kesalahannya.

Klik tautan Pengguna Anon dari informasi pelacakan pengguna, dan Anda akan melihat informasi terperinci yang terkait dengan pengguna anonim tersebut. Detil seperti info kesalahan aktif, pengalaman pengguna, sesi, perangkat yang digunakan oleh pengguna, dan lain-lain, semuanya akan ditampilkan dalam laporan pengguna.

Raygun User Tracking Detailed ReportRaygun User Tracking Detailed ReportRaygun User Tracking Detailed Report

Anda dapat menambahkan info info pengguna ke file konfigurasi Raygun. Tambahkan kode berikut ke file config / app.raygun.setup.ts untuk mengirim info info pengguna ke Raygun.

Berikut adalah bagaimana file config / app.raygun.setup.ts terlihat:

Simpan perubahan di atas dan muat ulang aplikasi web Sudut. Buka konsol aplikasi Raygun dan klik tab Users dari menu sisi kiri. Anda akan dapat melihat pengguna baru ditampilkan dalam daftar pengguna yang terpengaruh.

Raygun UsersRaygun UsersRaygun Users

Klik pada nama pengguna untuk melihat rincian yang terkait dengan pengguna tertentu.

Raygun Real pengguna pemantauan

Alat Pemantauan Pengguna Real Raygun memberi Anda wawasan tentang sesi pengguna langsung. Ini memungkinkan Anda mengidentifikasi cara pengguna berinteraksi dengan aplikasi Anda dari lingkungan pengguna dan bagaimana pengaruhnya terhadap kinerja aplikasi Anda.

Mari jalankan aplikasi Angular Anda dan lihat bagaimana monitor dipantau di alat Pemantauan Real User. Klik pada tab Real User Monitoring di menu di sisi kiri. Anda akan dapat melihat rincian dan sesi pengguna langsung.

Raygun - Real User MonitoringRaygun - Real User MonitoringRaygun - Real User Monitoring

Dengan mengklik tab yang berbeda, Anda dapat memantau kinerja halaman yang diminta.

Raygun Real User Monitoring - PerformanceRaygun Real User Monitoring - PerformanceRaygun Real User Monitoring - Performance

Ini memberi informasi tentang halaman paling lambat dan paling banyak diminta. Berdasarkan sejumlah metrik, Anda dapat memantau halaman dengan waktu muat tinggi dan memperbaikinya untuk meningkatkan kinerja aplikasi.

Ada beberapa tab lain dalam Pemantauan Pengguna Nyata yang memberikan informasi berguna mengenai informasi pengguna berdasarkan parameter yang berbeda seperti peramban, platform, dan lokasi pengguna.

Raygun penggunaan pelacakan

Ini memberi informasi tentang halaman paling lambat dan paling banyak diminta. Berdasarkan sejumlah metrik, Anda dapat memantau halaman dengan waktu muat tinggi dan memperbaikinya untuk meningkatkan kinerja aplikasi.

Raygun menyediakan alat untuk melacak proses penyebaran dan untuk memantau rilis. Klik tab Deployments dari menu sisi kiri dan Anda akan diberi informasi tentang cara mengkonfigurasi Raygun dengan sistem penyebaran Anda. Setelah Anda telah dikonfigurasi, Anda akan dapat melihat laporan rinci yang terkait dengan setiap rilis.

Menyiapkan sistem pelacakan penerapan akan memungkinkan Anda mendapatkan wawasan yang lebih dalam mengenai setiap rilis. Anda dapat memantau tren dan melihat apakah Anda memperbaiki kualitas pembuatan atau menurunkannya. Dengan setiap rilis baru, Anda dapat membandingkan tingkat kesalahan dan melacak kesalahan baru yang dipotong di rilis.

Sebaiknya baca dokumentasi resmi untuk mengetahui cara mengintegrasikan pelacakan penyebaran Raygun dengan sistem penerapan Anda.

Membungkus itu

Dalam tutorial ini, Anda melihat bagaimana cara memulai menggunakan Raygun dengan aplikasi web Sudut. Anda belajar bagaimana menggunakan alat Pelaporan Kecelakaan untuk memantau dan melacak terjadinya kecelakaan. Dengan menggunakan alat Pemantauan Pengguna Riil, Anda melihat bagaimana memahami rincian pengalaman pengguna seperti waktu buka halaman, waktu muat rata-rata, dll.

Alat Pelacakan Pengguna memungkinkan Anda memantau dan mengkategorikan kesalahan dan mogok berdasarkan pengguna aplikasi. Alat Pelacakan Deployment membantu Anda melacak setiap pelepasan aplikasi untuk mogok dan kesalahan dan memungkinkan Anda mengetahui bagaimana hal itu mempengaruhi kesehatan keseluruhan aplikasi Anda.

Untuk informasi rinci tentang memadukan Raygun dengan bahasa dan kerangka kerja lainnya, saya akan merekomendasikan untuk membaca dokumentasi Raygun resmi.

Jika Anda memiliki pertanyaan dan komentar tentang tutorial hari ini, silahkan posting di bawah ini.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.