Nuxt.js Projelerinde Global Hata Yönetimi

Günümüzde frontend projeleri eskiye kıyasla daha karmaşık ve dinamik bir hale gelmiş durumdadırlar. Bu nedenle bir frontend projesi geliştirirken birçok parametreyi göz önünde bulundurmak zorundayız. Bu parametlerden biri de iyi bir hata yönetiminin yapılmasıdır.

İyi bir hata yönetimi ile birlikte istenmeyen durumlar karşısında projemiz çökmeyecek, hatanın sebebi kullanıcıya gösterilebilecek ve kullanıcı deneyimi artmış olacaktır.

Bir frontend projesinde uygulamanın gerçekleştirdiği veya bir sebepten dolayı gerçekleştiremediği işlemler ile ilgili bilgileri kullanıcıya göstermek önemlidir. Bu bilgiler snackbar ile kullanıcıya gösterilebilir.

Eğer Nuxt.js ile frontend projesi geliştiriyorsanız ve HTTP isteklerini axios ile yapıyorsanız, HTTP isteklerinden kaynaklanan hataların global olarak yakalanıp işlenmesi Axios Interceptors ile oldukça kolaydır.

Axios Interceptors Nedir?

Axios interceptors, her HTTP isteği veya yanıtında çağrılan fonksiyonlardır. HTTP istekleri ve yanıtları uygulama içinde ele alınmadan (“then” veya “catch” tarafından işlenmeden) önce bu fonksiyonlar yardımıyla ele alınabilirler.

Axios Interceptors İle Global Hata Yönetimi Yapmak

Axios’un Nuxt’a özel sürümü olan axios-module ile birlikte, projenize ekleyeceğiniz basit bir plugin ile global hata yönetimi yapmak mümkündür. Bunun için sırasıyla;

1. Plugins klasörü içine axios.js dosyasını oluşturup nuxt.config.js içerisine dahil edelim.

   	export default {
   	plugins: [
   	'~/plugins/axios'
   	]
   	}

   view raw nuxt.config.js hosted with ❤ by GitHub
   1. Artık $axios.onError ile birlikte HTTP hatalarını yakalayıp yönetebiliriz. Ayrıca ihtiyaca göre onError ile birlikte onRequest, onResponse, onRequestError ve onResponseError da kullanılabilir.

      	export default function ({ $axios, redirect }) {
      	$axios.onError(error => {
      	const code = parseInt(error.response && error.response.status)
      	if (code === 400) {
      	redirect('/400')
      	}
      	})
      	}

      view raw axios.js hosted with ❤ by GitHub
      Global hata yönetimi ile birlikte HTTP isteklerininin ve yanıtlarının merkezi olarak yönetilmesi, temiz ve sürdürülebilir bir mimari kurmamıza yardımcı olacaktır. Ayrıca olası hataların giderilmesi ve yeni özelliklerin eklenmesi çok daha kolay olacak, projenin bakım maliyeti düşecektir.

Kaynaklar

• https://axios.nuxtjs.org/helpers/

• https://axios.nuxtjs.org/extend

• https://material.io/components/snackbars#anatomy