Bu yazıda Nuxt 3 içinde hataları nasıl yakalayacağımızı ele alacağız.
Projelerimizde çeşitli sebeplerle hatalar çıkabiliyor. Bu hatalar geliştirdiğimiz dil, platform, framework veya başka etkenler sebebiyle derleme zamanında, çalışma zamanında, server tarafta veya client tarafta birçok alt başlıklar altında bir hayli sayıda karşımıza çıkabiliyor. Bizim görevimiz hataları mümkün olduğunca erken tespit edip gidermek. Her ne kadar geliştirme aşamasında önlemler alsak da çalışma zamanında birçok hatayla karşılaşmaya devam edebiliyoruz.
Şimdi Nuxt 3 içinde çalışma zamanında hataları nasıl yakalayabileceğimizi ve log dosyasına yazabileceğimizi görelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
import fs from 'fs' export default defineNuxtPlugin((nuxtApp) => { const handleError = function (error: any, instance: any, info: any) { let file_name = (new Date()).toISOString().split('T')[0] let logs_folder = './logs' let log_full_path = `${logs_folder}/${file_name}` let err = `\r\n----------------------------------------------------------------------------------------------------\r\n${error}\r\n` fs.appendFile(log_full_path, err, 'utf-8', (err) => { if (err) { if (err.code === 'ENOENT') { console.log('Dosya bulunamadı, yeni bir dosya oluşturuluyor...'); fs.mkdir(logs_folder, { recursive: true }, (err) => { if (err) { console.error('Klasör oluşturma hatası:', err); } else { // Klasör başarıyla oluşturuldu veya zaten var. fs.writeFile(log_full_path, '', 'utf-8', (err) => { if (err) return console.log('Dosya bir sebeple oluşturulamıyor..', err) }) handleError(error, instance, info) } }); } else { console.error('Beklenmeyen bir hata oluştu:', err); } } }) } // Genel hatalar nuxtApp.vueApp.config.errorHandler = (error, instance, info) => { // Genel olarak bir hata oluştuğunda burada işlem yapabilirsiniz. const environment = process.client ? 'client' : 'server' if (environment === 'server'){ handleError(error, instance, info) } } // Vue tarafından fırlatılan hatalar nuxtApp.hook('vue:error', (error, instance, info) => { // Vue özelinde bir hata oluştuğunda burada işlem yapabilirsiniz. const environment = process.client ? 'client' : 'server' if (environment === 'server'){ handleError(error, instance, info) } }) }) |
Öncelikle handleError ile başlayalım. Bu fonksiyon içinde Nuxt tarafından bize verilen hata bilgisini log dosyasına yazmaya çalışıyoruz. Burada önemli olan log dosyasının daha önceden var olup olmadığı. Eğer dosya yoksa hata vereceği için öncelikle onun önlemini alıyoruz. Ardından log dosyasını oluşturup içine yazmaya başlıyoruz.
Log yazma fonksiyonumuz hazır olduktan sonra bunu sadece server tarafında çağırmak için gerekli kontrolü yapıyoruz. Eğer client tarafında çağrılırsa dosya yazma gerçekleşemeyeceği için başka bir hata daha verecektir.
Yukarıdaki kod örneğini error-handler.ts adıyla plugins klasöründe oluşturun. eğer bu klasör yoksa onu da siz oluşturun. Ardından denemek için projenizde test.vue adında bir dosya oluşturun ve içeriğini aşağıdaki gibi doldurun.
|
1 2 3 4 5 6 7 8 9 10 |
<template> <div>500 error..</div> </template> <script setup type="text/javascript"> throw createError({ statusCode: 500, message: 'Bir hata oluştu..', }); </script> |
Oluşturduğunuz test dosyasına tarayıcıdan ulaştığınızda 500 hatasını alacaksınız ve projenizin içindeki logs klasöründe hata yazılmış olacak.
Bu örnekte log bilgisini doğruca dosyaya yazdık ama siz herhangi bir APM aracını kullanıyorsanız bilgileri ona gönderebilir veya veritabanına da yazabilirsiniz.
Faydalı olması dileğiyle..
Bir sonraki yazıda görüşmek üzere.
İlk Yorumu Siz Yapın