SPA’da 404 Hatalarını Sunucu Tarafında Etkili Bir Şekilde Yönetmek

illustration : Tisna Permadi

Problemin Tanımı

Kullanıcı bir SPA’daki belirli bir adrese doğrudan erişmeye çalıştığında, sunucu bu adres için özel bir HTML sayfası bulamaz ve sonuç olarak bir 404 hata mesajı döndürür.
Ancak, SPA yapıları genellikle bu durumu yönetebilmek için yapılandırılır ve kullanıcının karşılaştığı bu 404 hata sayfası yerine uygulamanın ana (index.html) sayfasını döndürürler.
Bu durum, kullanıcının sorunsuz bir deneyim yaşamasını sağlar fakat sunucu tarafında izleme ve hata kaydı sistemleri için kafa karıştırıcı olabilir. Çünkü sistem, gerçekte bir hata olmasına rağmen, 200 OK yanıtı alır.

Bu makalede, SPA’larınızda 404 hatalarını sunucu tarafında nasıl etkin bir şekilde yönetebileceğinizi, React için adım adım açıklamalar ve kod örnekleriyle ele alacağız.

SPA ve Yönlendirme: Temel İşleyiş

SPA’lar, tek bir HTML sayfası üzerinden tüm uygulama içeriğini dinamik olarak yükleyerek kullanıcıya kesintisiz bir deneyim sunar. Ancak, sunucunun dinamik olarak oluşturulan rotalardan habersiz oluşu, doğrudan URL erişiminde 404 hatalarına yol açabilir. Bu, sunucu tarafında 404 hatalarını kaydetme, SEO ve kullanıcı deneyimi için ciddi sorunlar yaratabilir. İlk adımımız, bu sorunu anlamak ve ardından çözüm yollarını araştırmaktır.

404 Hata İşleme için React Router Yapılandırması

React Router, SPA’larda 404 hatalarını yönetmek için güçlü bir araçtır. Aşağıda, React Router kullanarak nasıl bir catch-all rota oluşturacağınızı ve tanımlanmamış rotaları 404 sayfasına nasıl yönlendireceğinizi gösteren bir kod örneği bulunmaktadır:

import React from 'react';
import {Route, Link, Routes} from 'react-router-dom';

export default function App() {
  return (
    <div>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              {/* 👇️ link to catch all route */}
              <Link to="/does-not-exist">Catch all route</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/about" element={<About />} />
          <Route path="/" element={<Home />} />

          {/* 👇️ only match this when no other routes match */}
          <Route path="*" element={<PageNotFound />} />
        </Routes>
      </div>
    </div>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function PageNotFound() {
  return (
    <div>
      <h2>404 Page not found</h2>
    </div>
  );
}

<Route path="*"> komponenti, tanımlanmamış tüm yolları PageNotFound komponentine yönlendirir. Böylece kullanıcı yanlış bir URL girdiğinde uygun bir 404 hata sayfası ile karşılaşır.

bu noktada window.location.href="/404" ile yönlendirme yapmak istemci tarafında pencereyi yenileyecek ve istek önce Ngnix sunucusuna yönlenecektir. catch-all route elemanımızı aşağıdaki gibi değiştirebiliriz.

<Route path="/404" element={<PageNotFound />} />
<Route path="*" element={() => {
    return <>{(window.location.href = "/404")}</>
  }}
/>

Ngnix tarafında 404 hatası aldıktan sonra SPA içinde /404 adlı route’a yönlenecek ve artık sayfa bulunamadı hatasını burada gösterebiliriz.

Nginx ile SPA Yönlendirmesi

SPA’lar için Nginx yapılandırması, sunucu tarafında etkin bir yönlendirme sağlar. Aşağıdaki Nginx yapılandırma örneği, istenen URL’nin bulunamaması durumunda index.html dosyasına düşmesini sağlar. Bu, SPA'nın kendi içinde rota yönetimini sağlar.

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    error_page 404 /404;

    location = /404 {
        internal;
        root   /usr/share/nginx/html;
        try_files /index.html;
    }
}

Bu yapılandırmada, try_files yönergesi Nginx'e önce istenen URI'yi aramasını, bulamazsa index.html dosyasını sunmasını söyler.

SPA Çeşitleri İçin Uygulama

Bu yaklaşım, React dışında Vue, Angular gibi diğer JavaScript framework’leri ile çalışan SPA’lar için de uygulanabilir. Her framework için yönlendirme çözümleri farklılık gösterir, ancak Nginx ve Docker yapılandırması büyük ölçüde aynı kalır. Önemli olan, tüm geçersiz yolların anlamlı bir 404 sayfasına yönlendirilmesini sağlamaktır.

Sunucu Tarafında 404 Hatalarının Takibi

Nginx’in loglama özellikleri, 404 hatalarının sunucu tarafında etkin bir şekilde takip edilmesini sağlar. access_log ve error_log yönergeleri, kullanıcıların hangi URL'lere erişmeye çalıştığını ve hangi hatalarla karşılaştığını anlamanıza yardımcı olur. Bu bilgiler, kullanıcı deneyimini iyileştirecek değişiklikler yapmanız ve SEO stratejinizi geliştirmeniz için önemlidir.

Buraya kadar okuduğunuz için teşekkür ederim. Umarım faydalı bir yazı olmuştur.