Absurd error reporting

[feryardiant]

Describe the bug

Melanjutkan investigasi "Misleading error report on Sentry" yang saya laporkan di project sebelah, issue tersebut juga terjadi di project ini. Dari investigasi sementara faktor utama nya adalah dari HTTP response dari Inertia, selain itu tidak menutup kemungkinan juga dari konfigurasi error reporting di @sentry/vue dan exception handler dari Laravel itu sendiri.

Sebagai contoh bisa coba reproduction step dibawah

Terdapat error log yang sama sekali gak relate dengan aktifitas yang dilakukan di UI.

Reproduction

1. Akses halaman login, https://skeleton.creasi.local/login
2. Buka DevTools > Console
3. Kosongkan field "Username" dan "Password", lalu klik tombol "Login"

Logs

• https://creasico.sentry.io/issues/4511961263

References

• https://inertiajs.com/error-handling
• https://docs.sentry.io/platforms/javascript/guides/vue/

[feryardiant]

Realize ternyata Sentry punya plugin untuk vite, harusnya ini akan ngebantu untuk tracing error dari sourcemaps.

Notes

• Auth token yang dibutuhkan oleh vite plugin adalah organization token, bukan per-user token di Sentry.
• Saat ini sudah saya set organization token di github yang bisa dipakai untuk semua public repo.
• Untuk development di local nanti saya share di group chat dev internal.

References

• https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps/#manual-setup-with-vite
• https://www.npmjs.com/package/@sentry/vite-plugin

[sentry-io[bot]]

Sentry issue: CREASI-SKELETON-55

[sentry-io[bot]]

Sentry issue: CREASI-SKELETON-57

[sentry-io[bot]]

Sentry issue: CREASI-SKELETON-4S

[feryardiant]

Diketahui bahwa error "Error in native event handler: Cannot read properties of undefined" diatas adalah disebabkan pada baris ini

https://github.com/creasico/laravel-project/blob/6d8136858bf6d96c639f3b017de12f44960e64e9/resources/client/pages/auth/login.vue#L25-L30

Saya menggunakan event.target dengan asumsi target nya adalah HTMLFormElement, namun pada penggunaan nya baik itu menggunakan tombol enter di keyboard setelah mengisi form maupun dengan melakukan klik tombol submit, event.target yang pertama kali di trigger adalah event dari button bukan form, karena itulah target.action nya undefined.

Solusi nya adalah

1. dengan menghapus event @click="submit" di button

   https://github.com/creasico/laravel-project/blob/6d8136858bf6d96c639f3b017de12f44960e64e9/resources/client/pages/auth/login.vue#L72-L81

2. dengan tidak menggunakan attribute action, melainkan langsung memanggil

   function submit() {
    model.post(route('login'), {
      onFinish: () => model.reset('password'),
    })
   }

3. semua benar