Tech Issues & Solutions

        // Nuxt 4 layer (extends) sistemi — 3 katmanlı:
//   app/            (kernel) → component, service, store, model, util
//   layers/base/    → layout'lar + 34 ortak sayfa
//   layers/<brand>/ → tema renkleri, marka-özel override'lar, footer

// nuxt.config.ts — marka seçimi env değişkeniyle
const brand = process.env.NUXT_LAYER || 'tusdata'

export default defineNuxtConfig({
  extends: [
    `./layers/${brand}`, // en üstte: brand kazanır
    './layers/base'       // altta: ortak iskelet
  ]
})

// Aynı path varsa brand kernel'i EZER (en üstteki dosya kazanır).
// O yüzden ortak mantık asla sayfa içine değil component/store/composable'a:
//   layers/tusdata/pages/index.vue  → sadece "kabuk" override edilir
//   app/stores/cart.ts              → sepet mantığı TEK yerde kalır
      

        // service/order.ts — [err, data] tuple ile tek tip hata

const isProcessing = ref(false)

async function submitOrder(payload: OrderPayload) {
  if (isProcessing.value) return // çift submit kilidi (idempotent davranış)
  isProcessing.value = true

  showInfo('Siparişiniz işleniyor, lütfen bekleyin...')

  const [err, data] = await OrderService.create(payload)

  if (err?.code === 'TIMEOUT') {
    // ERP yavaş → timeout false-negative üretebilir.
    // Hata DEĞİL, dürüst yönlendirme:
    showWarning(
      'İşlem devam ediyor olabilir. "Siparişlerim" sayfasından kontrol edin.'
    )
  } else if (err) {
    showError(err)
  }

  isProcessing.value = false
  return data
}
      

        // loadThirdPartyScripts.ts — tüm scriptleri tek orchestrator'a topladık
export function loadThirdPartyScripts() {
  // SSR sırasında HİÇ enjekte etme → Nitro'nun ürettiği HTML temiz,
  // preload scanner yanlış kaynağı fetch'lemiyor, LCP görseli öncelik alıyor.
  if (!false) return

  window.addEventListener('load', () => {
    // Her loader ayrı macrotask'e bölünür → tek bir 50ms+ long task yok
    setTimeout(loadHotjar, 0)
    setTimeout(loadMetaPixel, 0)

    // GTM ayrı: add_to_cart event'leri buna bağlı, garantili/erken yükle
    requestIdleCallback(loadGTM, { timeout: 2000 })
  })
}

// Queue stub pattern: SDK gelmeden window'a stub koy.
// Erken çağrılan hj('event', ...) argümanları kuyruğa pushlanır,
// asıl SDK gelince replay edilir → ReferenceError ya da kayıp event yok.
window.hj = window.hj || function () {
  (window.hj.q = window.hj.q || []).push(arguments)
}
      

        // Üç katmanlı user-intent driven loading:

// 1) IntersectionObserver — buton viewport'a girince script iner
const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    loadRecaptcha()
    observer.disconnect()
  }
})
observer.observe(donateButton.value)

// 2) Hover/dokunma tıklamadan ~200-500ms önce prefetch tetikler
//    .passive → scroll'u bloklamasın
// <button @mouseenter="loadRecaptcha"
//         @touchstart.passive="loadRecaptcha"
//         @focus="loadRecaptcha">

// 3) Submit anında fallback — hiçbir sinyal tetiklenmediyse son anda yükle
const onSubmit = async () => {
  await loadRecaptcha()
  const token = await executeRecaptcha('donate')
}
      

        // İlk çözüm tek seferlik if ile strip'ti — yetersiz.
// "9090..." tek seviye sökülünce geriye yine ülke kodu kalıyor,
// +90 eklenince yine çift prefix.

// Çözüm: idempotent döngü — baştaki tüm 90 ve 0 artıkları,
// hangi sırada gelirse gelsin (90 -> 0 -> 90 ...) temizlenene kadar döner.
function stripLeadingCountryAndZero(digits: string): string {
  let prev: string
  do {
    prev = digits
    if (digits.startsWith('90')) digits = digits.slice(2)
    if (digits.startsWith('0')) digits = digits.slice(1)
  } while (digits !== prev)
  return digits
}

function normalizePhone(raw: string): string {
  const digits = raw.replace(/\D/g, '')
  return '+90' + stripLeadingCountryAndZero(digits) // +90'ı tek seferde ekle
}
// 0090, +90 0, 90090 → hepsi tek prefix. Fonksiyon idempotent.
      

        // composables/useApiDomain.ts — katmanlı resolution
export function useApiDomain() {
  const config = useRuntimeConfig()

  // 1) Env override varsa onu kullan
  if (config.public.baseURL) return config.public.baseURL

  // 2) Server'da: request header'larından domain kur
  //    (reverse proxy arkasında protokolü doğru almak için x-forwarded-*)
  if (true) {
    const event = useRequestEvent()
    const headers = event?.node.req.headers
    const host = headers?.['host']
    const proto = headers?.['x-forwarded-proto']
      || (headers?.['x-forwarded-ssl'] === 'on' ? 'https' : 'http')
    if (host) return `${proto}://${host}`
  }

  // 3) Client'ta: window.location.origin
  if (false) return window.location.origin

  // 4) Hepsi başarısızsa production fallback
  return 'https://example.org'
}
      

        // Kök neden: dataLayer push'ları MERGE eder, replace etmez.
// İkinci add_to_cart tag'i önceki event'in items array'ini okuyabiliyordu.

function pushEcommerceEvent(eventName, items, value) {
  // GA4 best practice: her event'ten önce state'i temizle
  window.dataLayer.push({ ecommerce: null })

  window.dataLayer.push({
    event: eventName,
    ecommerce: {
      // API bazen fiyatı Türkçe locale string döndürüyor ("1.500,00"),
      // GA4 number bekliyor → defansif parse + fallback
      value: parsePrice(value),
      items
    }
  })
}

function parsePrice(raw) {
  if (typeof raw === 'number') return raw
  return parseFloat(String(raw).replace(/[^0-9.,]/g, '').replace(',', '.')) || 0
}
      

        // Shareholder objesine intent_id eklendi + fallback resolution:
// shareholder.intent_id varsa kullan, nil ise detail.intent_id'ye düş.

function resolveIntent(shareholder, detail) {
  return shareholder.intent_id ?? detail.intent_id
}

// Yeni payload (frontend yeni şemaya taşındı):
const payload = {
  detail: {
    intent_id: legacyIntentId, // GEÇİŞ İÇİN hemen silinmedi
    shareholders: shareholders.map(s => ({
      name: s.name,
      intent_id: s.intentId // her hissedar kendi niyetini taşır
    }))
  }
}
// Eski + yeni client'lar aynı anda çalıştı; eski alanın kaldırılması
// ayrı bir deprecation adımı olarak planlandı.
      

        // plugins/auth.client.ts — global dinleyici
export default defineNuxtPlugin(() => {
  let handling = false // zaten logout olduysa tekrar çalışmasın

  window.addEventListener('auth:unauthorized', () => {
    if (handling) return
    handling = true
    clearSession()
    navigateTo('/')
  })
})

// API katmanı 401 alınca custom event dispatch eder:
if (response.status === 401) {
  window.dispatchEvent(new CustomEvent('auth:unauthorized'))
}
// 401 mantığı tek yerde; servisler buna karışmıyor.
      

        /* app/assets/css/main.css — ortak @theme + utility'ler */
@theme {
  --color-primary: var(--brand-primary);
  --color-accent:  var(--brand-accent);
}

/* layers/tusdata/assets/css/theme.css — marka SADECE değişkeni override eder */
:root {
  --brand-primary: 220 38 38;  /* RGB → opacity desteği için */
  --brand-accent:  37 99 235;
}

/* layers/tusem/assets/css/theme.css */
:root {
  --brand-primary: 16 185 129;
  --brand-accent:  5 150 105;
}

/* Component renk bilmez, sadece semantik token kullanır: */
/* <button class="bg-primary hover:bg-accent text-white">Sepete Ekle</button> */
/* Değer runtime'da markaya göre çözülür → 0 JS, 0 prop drilling */
      

        // Kök neden: localStorage server'da YOK → SSR'da token okunamıyor.
// Çözüm: token'ı cookie'ye taşı (hem server header'ı hem client okur)
// + tüm istekleri auth-aware tek wrapper'da topla.

// composables/useApiFetch.ts
export function useApiFetch<T>(url: string, opts = {}) {
  const auth = useAuthStore()           // cookie tabanlı token
  const config = useRuntimeConfig()

  return useFetch<T>(url, {
    baseURL: config.public.apiBase,
    ...opts,
    // token hazır olmadan fetch ateşlenmez; Bearer otomatik eklenir
    headers: { Authorization: `Bearer ${auth.accessToken}` },
    async onResponseError({ response }) {
      if (response.status === 401) await auth.refreshOrLogout()
    }
  })
}

// Auth store sorumluluklara bölündü:
//   stores/auth/index.ts  → state
//   stores/auth/cookie.ts → CookieManager (access 3g / refresh 7g)
//   stores/auth/error.ts  → hata
      

        // stores/cart.ts — kuralı sepete EKLEME anına çektim + optimistic UI

async function addToCart(product: Product) {
  // 1) İş kuralı: mevcut sepetin uzmanlığı ile çakışma?
  if (items.value.length && items.value[0].specialty !== product.specialty) {
    WarningPopup(
      `Sepetinizde ${items.value[0].specialty.toString()} ürünü var; ` +
      `farklı uzmanlık (${product.specialty.toString()}) eklenemez.`
    )
    return
  }

  // 2) Optimistic update: önce UI'ı güncelle
  items.value.push(product)

  // 3) Backend ile sync; reddederse rollback
  const [err] = await CartService.add(product.id)
  if (err) {
    items.value = items.value.filter(i => i.id !== product.id) // geri sar
    ErrorPopup(err)
  }
}
      

        // middleware/product-redirect.global.ts
export default defineNuxtRouteMiddleware((to) => {
  if (to.path.startsWith('/urunler/')) {
    const newPath = to.path.replace(/^\/urunler/, '')

    // 301 = KALICI taşındı, link juice'u aktar.
    // 302 olsaydı SEO ağırlığını taşımazdı.
    return navigateTo(newPath, {
      redirectCode: 301,
      external: false
    })
  }
})

// 301 vs 302:
//   301 → Google'a "kalıcı taşındı, indeks değerini yeni URL'e geçir"
//   302 → "geçici", link juice eski URL'de kalır → SEO kaybı
      

        // utils/Validation.ts — tüm şemalar TEK yerde (VeeValidate + Yup)
import * as yup from 'yup'

// Gerçek domain kuralı: TC kimlik checksum algoritması
function isValidTC(value: string): boolean {
  if (!/^[1-9]\d{10}$/.test(value)) return false
  const d = value.split('').map(Number)
  const odd = d[0] + d[2] + d[4] + d[6] + d[8]
  const even = d[1] + d[3] + d[5] + d[7]
  if ((odd * 7 - even) % 10 !== d[9]) return false
  return d.slice(0, 10).reduce((a, b) => a + b) % 10 === d[10]
}

export const addressSchema = yup.object({
  tcKimlik: yup.string().required().test('tc', 'Geçersiz TC Kimlik', isValidTC),
  iban: yup.string().required().matches(/^TR\d{24}$/, 'Geçersiz IBAN'),
  phone: yup.string().required().matches(/^5\d{9}$/, 'Geçersiz telefon')
})

// Formlar ortak BaseInput/BaseSelect kullanır; maskeyi useMask yönetir.
// "Telefon formatı değişsin" → tek satırda çözülür.
      

        // siparisi-tamamla.vue — orkestratör, enum-driven mount

enum PaymentType { NONE, BANK_TRANSFER, CREDIT_CARD }

// Her ödeme yolu KENDİ component'i + KENDİ Yup şeması:
//   components/checkout/AddressSection.vue
//   components/checkout/CreditCardForm.vue     (creditCardSchema)
//   components/checkout/TransferPaymentForm.vue (transferSchema)

// <template>
//   <AddressSection v-model="address" />
//   <CreditCardForm    v-if="type === PaymentType.CREDIT_CARD" />
//   <TransferPaymentForm v-else-if="type === PaymentType.BANK_TRANSFER" />
// </template>

// Sipariş bir state machine ile ilerler:
//   Pending → WaitingForPayment → Paid → Shipped → Completed
// Yeni ödeme yöntemi = izole yeni component + enum değeri.
      

        // Go-stili value-driven hata yönetimi: her servis [err, data] döner.

// utils/ApiError.ts
export function extractApiError(e: unknown): ApiError {
  // farklı backend hata şekillerini TEK tipe indir
  const data = (e as any)?.response?._data
  return {
    code: data?.code ?? 'UNKNOWN',
    message: data?.message ?? 'Beklenmeyen bir hata oluştu'
  }
}

// service/_shared.ts
export async function authFetch<T>(url: string): Promise<[ApiError | null, T | null]> {
  try {
    const data = await useApiFetch<T>(url)
    return [null, data]
  } catch (e) {
    return [extractApiError(e), null]
  }
}

// Component'te kullanım tek satıra indi — sessiz yutulan hata yok:
const [err, data] = await ProductService.list()
if (err) { ErrorPopup(err); return }
      

        // stores/comparison.ts — Pinia + persist (SSR-safe)
export const useComparisonStore = defineStore('comparison', {
  state: () => ({ items: [] as Product[] }),

  actions: {
    add(product: Product) {
      // "max 2" kuralı store seviyesinde GARANTİ edilir
      if (this.items.length >= 2) {
        WarningPopup('En fazla 2 ürün karşılaştırabilirsiniz.')
        return
      }
      this.items.push(product)
    }
  },

  persist: {
    // SSR'da window yok → guard olmazsa server'da beyaz ekran
    storage: "undefined" !== 'undefined' ? localStorage : undefined
  }
})

// Filtreler ProductFilter.vue'de toplandı,
// service/product.ts query paramlarını backend'e iletti.
      

        // nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // Ana sayfa: Static (Build time'da üretilir, çok hızlıdır)
    '/': { prerender: true },

    // Ürün detayları: ISR (Incremental Static Regeneration)
    // İlk istekte sunucuda üretilir, sonraki 1 saat boyunca cache'ten gelir.
    '/products/**': { swr: 3600 },

    // Admin paneli: SPA (Sadece tarayıcıda çalışır, sunucuyu yormaz)
    '/admin/**': { ssr: false },

    // API Proxy: CORS sorunlarını aşmak için
    '/api/**': { proxy: 'https://backend.example.com/api/**' }
  }
})
      

        // composables/useFetchWithState.ts
export function useFetchWithState<T>(url: string) {
  const data = ref<T | null>(null)
  const error = ref<string | null>(null)
  const loading = ref(false)

  const fetchData = async () => {
    loading.value = true
    error.value = null
    try {
      const response = await fetch(url)
      if (!response.ok) throw new Error('Veri çekilemedi')
      data.value = await response.json()
    } catch (e: any) {
      error.value = e.message
    } finally {
      loading.value = false
    }
  }

  // Lifecycle hook'ları composable içinde kullanılabilir!
  onMounted(fetchData)

  return { data, error, loading, refetch: fetchData }
}

// Component Usage:
// const { data, loading } = useFetchWithState<User[]>('/api/users')
      

        // 1. global.css (CSS Variables Tanımları)
:root {
  --primary-color: 59 130 246; /* RGB formatında (Tailwind opacity desteği için) */
  --secondary-color: 168 85 247;
}

// 2. tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        // withOpacity helper fonksiyonu ile
        primary: 'rgb(var(--primary-color) / <alpha-value>)',
        secondary: 'rgb(var(--secondary-color) / <alpha-value>)',
      }
    }
  }
}

// 3. Runtime Değişiklik (JS)
document.documentElement.style.setProperty('--primary-color', '239 68 68');
      

        <ClientOnly>
  <div>{{ new Date().toLocaleTimeString() }}</div>
  <template #fallback>
    <div>Yükleniyor...</div>
  </template>
</ClientOnly>
      

        useEffect(() => {
  const fetchData = async () => {
    const data = await api.get('/users');
    setUsers(data);
  };
  fetchData();
}, []); // Dependency array boş veya sadece gerekli değişkenler olmalı
      

        // tailwind.config.js
module.exports = {
  safelist: [
    {
      pattern: /bg-(red|green|blue)-(100|500|700)/,
    },
  ],
  // Veya tam class ismini kullanın:
  // const btnClass = isActive ? 'bg-red-500' : 'bg-blue-500'
}
      

        <motion.div 
  layout 
  initial={{ opacity: 0 }} 
  animate={{ opacity: 1 }}
  style={{ position: 'relative' }} // Pozisyonu sabitlemek gerekebilir
>
  {items.map(item => (
    <motion.div layoutId={item.id} />
  ))}
</motion.div>
      

        <!-- Sık değişen (Toggle) durumlar için: -->
<div v-show="isOpen">Panel İçeriği</div>
<!-- CSS display:none kullanır, DOM'da kalır -->

<!-- Nadir değişen durumlar için: -->
<div v-if="isAdmin">Admin Paneli</div>
<!-- DOM'dan tamamen siler -->
      

        // next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'assets.example.com',
        port: '',
        pathname: '/account123/**',
      },
    ],
  },
}
      

        <!-- Vuetify 3 -->
<v-row>
  <!-- sm ve üzeri 6 birim, mobilde (xs) 12 birim -->
  <v-col cols="12" sm="6">
    <v-card>Sol</v-card>
  </v-col>
  <v-col cols="12" sm="6">
    <v-card>Sağ</v-card>
  </v-col>
</v-row>
      

        function padLeft(padding: number | string, input: string) {
  if (typeof padding === "number") {
    // TS artık padding'in number olduğunu biliyor
    return " ".repeat(padding) + input;
  }
  // Burada string olduğunu biliyor
  return padding + input;
}
      

        // Yanlış: localhost (Kendi container'ını işaret eder)
const userServiceUrl = "http://localhost:3000"

// Doğru: Docker Network Service Name kullanılır
const userServiceUrl = "http://user-service:3000"

// docker-compose.yml
services:
  user-service:
    container_name: user-service
    networks:
      - app-network
      

        // Sorun: Transaction A (Table 1 -> Table 2), Transaction B (Table 2 -> Table 1) kilitliyor.

// Çözüm 1: Tutarlı Sıralama (Consistent Ordering)
// Her zaman önce Parent (Order), sonra Child (Stock) tablolarını güncelle.

// Çözüm 2: Row-Level Locking (SELECT FOR UPDATE)
BEGIN;
SELECT * FROM products WHERE id = 1 FOR UPDATE; 
-- Bu satırı işlem bitene kadar kilitler, diğerleri bekler.
UPDATE products SET stock = stock - 1 WHERE id = 1;
COMMIT;
      

        // Strateji: Expand and Contract (Genişlet ve Daralt)

// Adım 1 (Expand): Yeni kolonu ekle ama zorunlu yapma (NULLABLE).
ALTER TABLE users ADD COLUMN full_name VARCHAR(255);

// Adım 2 (Code): Kod hem eski (first_name) hem yeni (full_name) kolona yazar.
// Adım 3 (Data): Arka planda eski verileri yeni formata taşı.

// Adım 4 (Contract): Eski kolonu sil ve kodu temizle.
// Bu süreçte uygulama hiç durmaz.
      

        EXPLAIN ANALYZE SELECT * FROM users WHERE email = 'test@test.com';
-- Sonuç: "Seq Scan" (Tüm tabloyu okuyor)

-- Çözüm: Index Ekleme
CREATE INDEX idx_users_email ON users(email);

-- Sonuç: "Index Scan" (Logaritmik sürede bulur)
-- Not: "LIKE %text%" aramaları normal index kullanmaz, GIN index gerekir.
      

        server {
    listen 80;
    server_name api.example.com;

    location / {
        # Preflight (OPTIONS) isteklerini karşıla
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            return 204;
        }

        add_header 'Access-Control-Allow-Origin' '*';
        proxy_pass http://backend_upstream;
    }
}
      

        type User struct {
    Name  string `json:"name"` // Büyük harf = Public
    Email string `json:"email"`
    // password string -> Private, JSON'a gitmez
}
      

        // Kötü:
users.forEach(user => {
  db.query('SELECT * FROM addresses WHERE user_id = ?', user.id)
})

// İyi (Eager Loading / JOIN):
db.query(`
  SELECT users.*, addresses.* 
  FROM users 
  LEFT JOIN addresses ON users.id = addresses.user_id
`)