[NODE JS] Express'te 404 Sayfası Oluşturma

Silverhand · Pazartesi saat 10:31'de

[NODE JS] Express'te 404 Sayfası Oluşturma

Kullanıcılar bazen var olmayan sayfalara erişmeye çalışır. Yanlış URL yazmış olabilirler, bir link kırılmış olabilir veya bir sayfa kaldırılmış olabilir. Bu durumlarda kullanıcıya düzgün bir 404 sayfası göstermek hem profesyonel bir izlenim bırakır hem de kullanıcının ne yapması gerektiğini anlamasına yardımcı olur. Express'te varsayılan olarak bir 404 handler yoktur, bunu kendiniz eklemeniz gerekir.

Express'te 404 handler eklemek basit: tüm route tanımlarınızdan sonra bir middleware eklersiniz. Express route'ları yukarıdan aşağıya kontrol eder ve hiçbir route eşleşmezse son middleware'e ulaşır. İşte bu middleware'de 404 yanıtını döndürürsünüz. Önemli olan bu middleware'in route'lardan sonra ama error handler'dan önce olmasıdır.

Ben bir keresinde 404 handler'ı express.static middleware'inden önce eklemiştim. Tüm statik dosyalar 404 dönmeye başladı çünkü Express dosyaya bakmadan 404 handler'a düşüyordu. Middleware sıralamasını düzelttikten sonra sorun çözüldü. Bu deneyim bana middleware sıralamasının ne kadar önemli olduğunu bir kere daha gösterdi.

API ve web uygulamaları için farklı 404 yanıtları vermeniz gerekir. API isteklerinde JSON döndürmeniz, web isteklerinde HTML sayfası göstermeniz daha uygun olur. Accept header'ını kontrol ederek veya URL prefix'ine bakarak hangi formatı döndüreceğinize karar verebilirsiniz.

İyi bir 404 sayfası sadece "Sayfa bulunamadı" demekle kalmamalı. Ana sayfaya link vermeli, arama kutusu sunmalı ve belki popüler sayfaları listelemelidir. Kullanıcıyı sitenizde tutmak istiyorsanız 404 sayfasını bir fırsata çevirmelisiniz. Bazı siteler 404 sayfalarını yaratıcı ve eğlenceli yaparak marka imajlarını güçlendiriyor.

404 loglamak da önemli. Hangi URL'lerin 404 döndürdüğünü takip ederek kırık linkleri tespit edebilir, yanlış yönlendirmeleri düzeltebilir ve kullanıcı deneyimini iyileştirebilirsiniz. Özellikle SEO açısından 404 sayısını minimumda tutmak önemli. Google Search Console'dan da 404 sayfalarını takip edebilirsiniz.

SPA uygulamalarında 404 yönetimi biraz farklı. React, Vue gibi framework'lerde client-side routing kullanılır. Tarayıcı doğrudan bir URL'ye gittiğinde Express'in bu URL'yi bilmesi gerekir. Genellikle tüm bilinmeyen route'lar index.html'e yönlendirilir ve routing client tarafında yapılır. Ama API endpoint'leri için yine sunucu tarafında 404 döndürmeniz gerekir.

Arama motorları 404 status code'unu görünce o sayfayı indekslemez. Bu yüzden gerçekten var olmayan sayfalar için doğru status code'u döndürmek SEO açısından kritik. Yanlışlıkla 200 dönderseniz soft 404 oluşur ve arama motorları bunu sayfanız varmış gibi indeksler.

JavaScript:

const express = require('express');
const path = require('path');
const app = express();

app.use(express.json());
app.use(express.static(path.join(__dirname, 'public')));

// ===== NORMAL ROUTE'LAR =====

app.get('/', (req, res) => {{
  res.send('<h1>Ana Sayfa</h1><p>Hosgeldiniz!</p>');
}});

app.get('/hakkimizda', (req, res) => {{
  res.send('<h1>Hakkimizda</h1><p>Biz bir teknoloji firmasiyiz.</p>');
}});

app.get('/iletisim', (req, res) => {{
  res.send('<h1>Iletisim</h1><p>info@example.com</p>');
}});

// API route'lari
app.get('/api/urunler', (req, res) => {{
  res.json([{{ id: 1, ad: 'Laptop' }}, {{ id: 2, ad: 'Telefon' }}]);
}});

app.get('/api/kullanicilar', (req, res) => {{
  res.json([{{ id: 1, ad: 'Ahmet' }}, {{ id: 2, ad: 'Zeynep' }}]);
}});

// ===== 404 LOGLAMA =====

const notFoundLogs = [];

function log404(req) {{
  const logEntry = {{
    timestamp: new Date().toISOString(),
    method: req.method,
    url: req.originalUrl,
    ip: req.ip,
    userAgent: req.get('User-Agent'),
    referer: req.get('Referer') || 'Dogrudan erisim',
  }};
  notFoundLogs.push(logEntry);
  console.warn(`[404] ${{req.method}} ${{req.originalUrl}} - Referer: ${{logEntry.referer}}`);

  // Son 1000 kaydi tut
  if (notFoundLogs.length > 1000) {{
    notFoundLogs.splice(0, notFoundLogs.length - 1000);
  }}
}}

// 404 loglarini gormek icin admin endpoint'i
app.get('/admin/404-logs', (req, res) => {{
  // URL'ye gore grupla
  const grouped = {{}};
  notFoundLogs.forEach(log => {{
    if (!grouped[log.url]) {{
      grouped[log.url] = {{ count: 0, lastSeen: log.timestamp }};
    }}
    grouped[log.url].count++;
    grouped[log.url].lastSeen = log.timestamp;
  }});

  const sirali = Object.entries(grouped)
    .sort((a, b) => b[1].count - a[1].count)
    .map(([url, info]) => ({{ url, ...info }}));

  res.json({{
    toplam: notFoundLogs.length,
    benzersizUrl: sirali.length,
    enCokAranan: sirali.slice(0, 20),
  }});
}});

// ===== 404 HANDLER =====
// Tum route'lardan SONRA tanimlanmali

app.use((req, res, next) => {{
  log404(req);

  // Accept header'a gore format sec
  if (req.accepts('json') && req.url.startsWith('/api/')) {{
    // API istekleri icin JSON
    return res.status(404).json({{
      hata: 'Endpoint bulunamadi',
      url: req.originalUrl,
      method: req.method,
      mesaj: 'Lutfen API dokumantasyonunu kontrol edin',
      mevcutEndpointler: [
        'GET /api/urunler',
        'GET /api/kullanicilar',
      ],
    }});
  }}

  // Web istekleri icin HTML
  res.status(404).send(`
    <!DOCTYPE html>
    <html lang="tr">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>404 - Sayfa Bulunamadi</title>
      <style>
        * {{ margin: 0; padding: 0; box-sizing: border-box; }}
        body {{
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
          background: #0a0a0a; color: #e0e0e0;
          display: flex; justify-content: center; align-items: center;
          min-height: 100vh; text-align: center; padding: 20px;
        }}
        .container {{ max-width: 600px; }}
        .error-code {{
          font-size: 120px; font-weight: 800; color: #333;
          line-height: 1; margin-bottom: 10px;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }}
        h1 {{ font-size: 28px; margin-bottom: 16px; color: #fff; }}
        p {{ font-size: 16px; color: #999; margin-bottom: 30px; line-height: 1.6; }}
        .links {{ display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }}
        .links a {{
          display: inline-block; padding: 12px 28px;
          background: #1a1a2e; color: #667eea; text-decoration: none;
          border-radius: 8px; border: 1px solid #333;
          transition: all 0.2s;
        }}
        .links a:hover {{ background: #667eea; color: #fff; border-color: #667eea; }}
        .url {{ color: #666; font-size: 14px; margin-top: 30px; word-break: break-all; }}
      </style>
    </head>
    <body>
      <div class="container">
        <div class="error-code">404</div>
        <h1>Sayfa Bulunamadi</h1>
        <p>Aradiginiz sayfa tasinmis, silinmis veya hic var olmamis olabilir.</p>
        <div class="links">
          <a href="/">Ana Sayfa</a>
          <a href="/hakkimizda">Hakkimizda</a>
          <a href="/iletisim">Iletisim</a>
        </div>
        <p class="url">Aranan: ${{req.originalUrl}}</p>
      </div>
    </body>
    </html>
  `);
}});

// Error handler
app.use((err, req, res, next) => {{
  console.error('[HATA]', err.message);
  res.status(500).json({{ hata: 'Sunucu hatasi' }});
}});

app.listen(3000, () => {{
  console.log('404 ornekleri sunucusu port 3000\'de');
}});

404 sayfası küçük bir detay gibi görünse de kullanıcı deneyiminde büyük fark yaratır. Profesyonel bir 404 sayfası kullanıcıya "bu site bakımlı ve düzenli" mesajı verir. Bozuk bir 404 sayfası veya varsayılan tarayıcı hatası ise kötü bir izlenim bırakır. Biraz zaman ayırıp güzel bir 404 sayfası tasarlayın.

Best Studio · Çarşamba saat 16:45'de

Emeğiniz ve katkınız için teşekkür ederiz!
Konunuz gerekli incelemelerden geçerek onaylandı. Topluluğumuza katkılarınızın devamını bekliyoruz.
İyi forumlar!

[NODE JS] Express'te 404 Sayfası Oluşturma

Silverhand