Həftə 7 · 13/23

Xoşbəxt yoldan kənarda

6 dəqiqəlik oxu

Kart oxuyucu «təsdiqləndi» deyir, amma bank mesajı gəlmir. Ödəniş olub, ya yox? Ən pisi budur: cihaz sənə bir şey deyib, amma həqiqət başqadır.

Hər şəbəkə sorğusunun dörd sonu var: uğur, rədd, server xətası, cavab yoxdur. İnterfeys dördü üçün də doğru bir şey deməlidir — və əvvəlcədən göstərdiyini geri ala bilməlidir.

setCount(c => c + 1);      // shown at once
await api.vote(id);        // if this throws, the number above is a lie

İki sətir. İkincisi uğursuz olanda birincisini kim geri qaytarır?

Çox deyilən söz: Kliklədim, işlədi.

Hər şəbəkə sorğusunun ən azı dörd nəticəsi var: uğur, rədd (4xx), server xətası (5xx), cavab yoxdur (timeout və ya internet yoxdur). İnterfeysin hər biri üçün doğru bir cavabı olmalıdır. Optimistic update geri qaytarılmalı və səbəbi izah edilməlidir.

Sənin kulvarında

Dörd nəticə və oflayn

Brauzerdə uğursuzluq görünən olmalıdır: rədd, server xətası, timeout və şəbəkəsizlik üçün ayrı-ayrı doğru mesaj. Oflayn halı çox vaxt unudulur, halbuki onu sınamaq bir düymə ilə mümkündür.

Fikir eynidir, rəqəmlər və alətlər fərqli. Seçimin brauzerində yadda qalır və bütün dərslərə tətbiq olunur.

Hər sorğunun dörd nəticəsi

Uğur, rədd (4xx), server xətası (5xx), cavab yoxdur. Timeout olmayan sorğu sonsuza qədər gözləyə bilər.

Sən bunu istə

try {
  const res = await fetch(url, { signal: AbortSignal.timeout(8000) });
  if (res.status === 401) return askToSignIn();
  if (!res.ok) return showError(await res.text());
  return render(await res.json());
} catch {
  return showOffline();   // timeout or no network
}

Optimistic, amma geri qaytarma ilə

Nəticəni dərhal göstərmək yaxşıdır, bir şərtlə: server rədd edəndə vəziyyət geri qayıdır və istifadəçi səbəbi bilir.

AI belə yazır

setCount((c) => c + 1);
api.vote(id);   // not awaited, errors ignored

Sən bunu istə

setCount((c) => c + 1);
try {
  await api.vote(id);
} catch (e) {
  setCount((c) => c - 1);
  toast(reasonFor(e));
}

Təkrar cəhd idempotentlik tələb edir

İdempotent olmayan POST-u təkrarlamaq ikiqat ödəniş və ya ikiqat post yarada bilər. Təkrarlanan əməliyyata idempotency açarı ver.

Sən bunu istə

const key = crypto.randomUUID();   // once per user action
await retry(() => fetch("/api/pay", {
  method: "POST",
  headers: { "Idempotency-Key": key },
  body,
}));

Diff oxuyanda soruş: AI-dan hər sorğu üçün cədvəl istə: uğur, 4xx, 5xx, timeout — istifadəçi hər halda nə görür?

Terminlər

failure mode: Bir şeyin konkret uğursuz olma yolu və o zaman baş verənlər.
optimistic update: Server cavab verməmişdən nəticəni göstərmək; rədd olunsa, geri qaytarmaq lazımdır.
rollback: Uğursuzluqdan sonra vəziyyəti əvvəlki halına qaytarmaq.
retry with backoff: Uğursuz sorğunu getdikcə artan fasilələrlə təkrarlamaq.
timeout: Cavabı nə qədər gözləyəcəyinin həddi; olmasa, interfeys sonsuza qədər donub qalır.
graceful degradation: Bir hissə çökəndə qalanının işləməyə davam etməsi.

İndi sən yoxla

1Server səsi rədd edəndə nə olur?

function onVote() {
  setCount((c) => c + 1);
  api.vote(postId);          // not awaited, errors ignored
}

2Girişdən sonra ekran «sənə təsdiq linki göndərdik» yazır. Amma giriş zamanı məktub göndərilmir. Hansı prinsip pozulub?

Hazır prompt

İngiliscədir, çünki terminlər ingiliscədir. Tərcümə etsən də terminləri saxla.

prompt

For <component>, list every network call. For each one, show
what the user sees on:
  success | 401/403 | 4xx validation error | 5xx | timeout | offline

Where state is updated optimistically, show the rollback path
and the message the user gets.
Where a request is retried, is the operation idempotent?
Where the UI claims something happened, is that claim true in every branch?

Then implement the missing cases.

Öz kodunda

1Brauzerin DevTools-unda şəbəkəni «offline» və «slow 3G» et, əsas axınlarından keç.
2Bir API endpoint-ini DevTools ilə blokla və nə baş verdiyinə bax.
3İnterfeysin yalan dediyi və ya donduğu hər yeri siyahıya al, sonra prompt ilə düzəlt.

Bunu görəndə bitib: Üç əsas əməliyyatın üçün bütün uğursuzluq nəticələrini ekranda görmüsən və hər biri doğru bir şey deyir.

Daha dərinə

optimistic UI rollback retry exponential backoff jitter idempotency offline-first web app graceful degradation

Oxumaq üçün

Designing Data-Intensive Applications (2nd edition) · Martin Kleppmann, Chris Riccomini, 2026 · Etibarlılıq, nasazlıqlar və təkrar cəhdlər
Beyond Vibe Coding: From Coder to AI-Era Developer · Addy Osmani, 2025 · AI kodunun xoşbəxt yol meyli