WEB / WEB-01.02

Bir request’in uçtan uca yolculuğu

URL’den handler’a, kitap kaydından response’a ve DOM’a kadar her geçişte neyin değiştiğini izle. 404 ile network failure’ı aynı sonuç sanma.

İlk geçişte neye bakmalısın?

Bir request gönder; yanıtın gelmesi, body’nin okunması ve ekrana yazılması arasındaki üç anı ayır.

Önce Browser → Application → Browser yolunu izle. 200 veya 404 bir HTTP sonucudur; JSON’un okunması ve DOM’un değişmesi sonraki işlerdir.

Request / response: Browser’ın gönderdiği istek ve karşı tarafın yanıtı.
Status / body: Status yanıtın HTTP sonucunu, body ise taşınan içeriği gösterir.
Parsing / DOM update: Parsing gelen metni veri olarak okumaktır. DOM update uygulamanın bu veriyi sayfa yapısına yazmasıdır.

Sonraki ayrıntılar nerede açılacak?

DNS adres bulma, TCP/QUIC bağlantı ve TLS bağlantıyı koruma ayrıntıları sonraki bölümlerde açılır. Bu derste adlarını tanıman yeterli; ilk turda hepsini öğrenmen gerekmiyor.

CORE · RED · BLUE · ARTIFACT · PRACTICE

Hareket olmadan bütün senaryoları oku

Kayıt bulundu

Önce browser’da niyet var
Kitap kartını açma niyeti henüz server’a ulaşmadı. Diğer actors bu isteği bilmiyor.
Browser
Kart bekliyor
Application
Request yok
Local data source
Query yok
HTTP request ulaştı
Method ve resource seçimi application’a ulaştı. Henüz kayıt okunmadı.
Browser
Response bekliyor
Application
GET /api/book alındı
Local data source
Query yok
Handler yerel olarak çalışır
Application route’u seçer, girdiyi yorumlar ve okuma işlemini hazırlar. Bu aşama yeni bir ağ mesajı değildir.
Browser
Response bekliyor
Application
Handler → readBook
Local data source
Query yok
Okuma persistence sınırına ulaştı
Bu örnekte data access aynı process içindeki local çağrıdır. Ayrı kart mantıksal sorumluluğu gösterir; ayrı database host veya ağ paketi değildir.
Browser
Response bekliyor
Application
Okuma sonucu bekliyor
Local data source
readBook isteği alındı
Veri katmanı sonucu belirler
Atlas Notları kaydı bulundu. Bir row bulunması henüz browser’ın bir şey öğrendiğini göstermez.
Browser
Response bekliyor
Application
Okuma sonucu bekliyor
Local data source
Sonuç: Atlas Notları
Okuma sonucu application’da
Application sonucu aldı; serialization ve HTTP status seçimi kendi sorumluluğunda.
Browser
Response bekliyor
Application
Sonuç: book row
Local data source
Okuma tamamlandı
HTTP response hazırlandı
Application JSON representation ve 200 status hazırlar. Browser henüz bu response’u almadı.
Browser
Response bekliyor
Application
200 + JSON hazır
Local data source
Okuma tamamlandı
Response headers browser’a ulaştı
fetch() status ve headers elde edildiğinde resolve olabilir. Body tamamlanmış veya DOM güncellenmiş olmak zorunda değildir.
Browser
200 headers; body bekliyor
Application
Response gönderildi
Local data source
Okuma tamamlandı
Body okundu ve yorumlandı
Application code response.json() gibi ayrı async body okumasını bekler. JSON verisinin hazır olması kartın otomatik değişmesi değildir.
Browser
200 JSON hazır; UI değişmedi
Application
Response gönderildi
Local data source
Okuma tamamlandı
Application code UI’ı güncelledi
Kod body’yi okur ve DOM’u günceller. HTTP receipt ile UI güncellemesi ayrı aşamalardır.
Browser
UI: Atlas Notları
Application
Request tamamlandı
Local data source
Okuma tamamlandı

Kayıt bulunamadı

Önce browser’da niyet var
Kitap kartını açma niyeti henüz server’a ulaşmadı. Diğer actors bu isteği bilmiyor.
Browser
Kart bekliyor
Application
Request yok
Local data source
Query yok
HTTP request ulaştı
Method ve resource seçimi application’a ulaştı. Henüz kayıt okunmadı.
Browser
Response bekliyor
Application
GET /api/book alındı
Local data source
Query yok
Handler yerel olarak çalışır
Application route’u seçer, girdiyi yorumlar ve okuma işlemini hazırlar. Bu aşama yeni bir ağ mesajı değildir.
Browser
Response bekliyor
Application
Handler → readBook
Local data source
Query yok
Okuma persistence sınırına ulaştı
Bu örnekte data access aynı process içindeki local çağrıdır. Ayrı kart mantıksal sorumluluğu gösterir; ayrı database host veya ağ paketi değildir.
Browser
Response bekliyor
Application
Okuma sonucu bekliyor
Local data source
readBook isteği alındı
Veri katmanı sonucu belirler
Bu kontrollü senaryoda kayıt yok. HTTP status code kararını daha sonra application verecek.
Browser
Response bekliyor
Application
Okuma sonucu bekliyor
Local data source
Sonuç: kayıt yok
Okuma sonucu application’da
Application sonucu aldı; serialization ve HTTP status seçimi kendi sorumluluğunda.
Browser
Response bekliyor
Application
Sonuç: null
Local data source
Okuma tamamlandı
HTTP response hazırlandı
Application JSON representation ve 404 status hazırlar. Browser henüz bu response’u almadı.
Browser
Response bekliyor
Application
404 + JSON hazır
Local data source
Okuma tamamlandı
Response headers browser’a ulaştı
fetch() status ve headers elde edildiğinde resolve olabilir. Body tamamlanmış veya DOM güncellenmiş olmak zorunda değildir.
Browser
404 headers; body bekliyor
Application
Response gönderildi
Local data source
Okuma tamamlandı
Body okundu ve yorumlandı
Application code response.json() gibi ayrı async body okumasını bekler. JSON verisinin hazır olması kartın otomatik değişmesi değildir.
Browser
404 JSON hazır; UI değişmedi
Application
Response gönderildi
Local data source
Okuma tamamlandı
Application code UI’ı güncelledi
Kod response status’u kontrol edip bulunamadı mesajını gösterir. 404, fetch Promise’ının zorunlu olarak reject olması demek değildir.
Browser
UI: kitap bulunamadı
Application
Request tamamlandı
Local data source
Okuma tamamlandı

ROLLER · STATE · VERİ AKIŞI

Browser’a URL yazınca başlayan iş

https://books.example/catalog gibi bir URL, scheme, host ve path taşır. Browser bunu yeni document’e navigation olarak işler. Gerekli olduğunda host için DNS bilgisi edinilir, hedefe giden IP network yolu kullanılır ve uygun connection kurulmuş olur. HTTP/1.1 ve HTTP/2 yaygın olarak TCP üzerinde; HTTPS bunlarda TLS ile çalışır. HTTP/3 ise QUIC üzerinde HTTP taşır ve QUIC’in TLS tabanlı güvenli connection’ını kullanır. IP routing web path’i seçmez; /catalog hangi handler’a gidecek sorusu application/HTTP tarafındadır.

Bu adımlar her request’te sıfırdan tekrarlanmaz. DNS sonucu cache’te olabilir; uygun connection yeniden kullanılabilir; browser veya intermediary cache’i response sağlayabilir. Reverse proxy origin yerine bağlantıyı karşılayıp başka hop’a iletebilir; CDN izin verilen cached representation’ı origin’e gitmeden sunabilir. Bu yüzden “URL → DNS → yeni TCP → yeni TLS → database” çizgisi her kullanımın zorunlu olay kaydı değildir. Burada olağan roller tanıtılır; ayrıntılı DNS, transport, TLS ve cache dersleri bu koşulları açar.

Navigation ile fetch() aynı işi yapmaz

Document navigation’da browser alınan belgeyi yeni sayfanın kurulmasına bağlar; HTML içindeki resources da başka yüklemeler doğurabilir. Atlas Notları ekranı zaten açıktır. Düğmeye basıldığında JavaScript, /api/book?case=found için fetch() çağırır. Bu çağrı mevcut document’i otomatik olarak başka sayfaya dönüştürmez; program bir Response alır ve sonucu nasıl göstereceğine karar verir.

Relative API URL’i mevcut document’in URL bağlamında çözülür. Lab 127.0.0.1 üzerinde plain HTTP kullanır: local API için public DNS sorgusu veya TLS handshake gerektirmez. Sahne request handler’a gidişten başlar; Internet’teki routing, DNS, TLS, proxy ve cache hop’larını çizmez. Bu parçaların sahnede görünmemesi bütün web request’lerinde yok oldukları anlamına gelmez.

Handler’ın aldığı request ile yaptığı işlem

Client’in method’u GET, path’i /api/book, query selector’ı case=found’dur. Case selector’ı eğitim uygulamasının önceden verdiği benign senaryoyu seçer. Handler route’u belirler, selector’ı tanır ve storage adapter’a kitap lookup’ı yaptırır. Handler’da route seçimi local processing’dir; bir başka HTTP request değildir.

Storage adapter kitabın record’ını veya bulunamadı sonucunu döndürür. Bu labda seed memory içinde bulunur: adapter çağrısı ve return aynı process içindedir. Ayrı database driver’ı kullanan üründe protocol ve host ayrı olabilir; embedded database’te local erişim olabilir. Transfer simgesi yalnız veri akışını öğretir; burada gerçek database packet capture veya SQL engine davranışı iddiası taşımaz.

Record’dan JSON response’a

Found branch’inde handler id ve title alanlarını book nesnesinin içine yerleştirir; title Atlas Notları’dır. Serialization JSON body’sinin UTF-8 bytes’ını üretir. HTTP response status’u 200’dür. Missing branch’inde bir record yoktur; handler 404 ile BOOK_NOT_FOUND hata alanını sunar. Bu 404 handler’ın verdiği bir HTTP yanıtıdır, request’in network’te kaybolması değildir.

Artifact HTTP/1.1 text biçimini kullanır: status line, headers, boş satır ve body. Content-Length bu body’nin byte sayısıdır, ekrandaki karakter sayısı değil. Notları içindeki ı UTF-8’de birden fazla byte kullanır. HTTP/2 ve HTTP/3 aynı semantic bilgiyi bu text mesajı aynen göndererek taşımak zorunda değildir; framing’leri farklıdır. X-Lab-Request-Id bu labın custom correlation header’ıdır, bütün HTTP servislerinin standardı değildir.

Response geldi; body henüz okunmuş olmayabilir

fetch() promise’i response status ve headers hazır olduğunda Response ile fulfill olabilir; body’nin tamamının okunmasını beklemek zorunda değildir. 404 de böyle bir Response üretir. response.ok bu durumda false’tur. Application status’u değerlendirir; await response.json() body’yi okur ve JSON parsing yapar. Bunlar tek promise veya tek başarı kararı değildir.

Network failure, abort veya uygun olmayan URL gibi durumlar fetch() promise’inin reject olmasına yol açabilir. Response alınmış olsa da body okuma sırasında hata veya geçersiz JSON nedeniyle parsing hatası oluşabilir. Bu nedenle “200 göründü, JavaScript mutlaka doğru veriyi elde etti” sonucu fazla geniştir. Başarılı HTTP status, başarılı body parse ve iş kuralına uygun veri ayrı koşullardır.

Veri browser’da; görünümün değişmesi ayrı

JSON parse sonucu JavaScript memory’sinde bir nesnedir. Found branch’i title değerini DOM’daki kitap başlığına text olarak yazar. Missing branch’i “Kitap bulunamadı” görünümünü seçer. Bu DOM mutation’dan sonra browser uygun rendering adımlarında görüntüyü günceller. fetch() bir DOM API’si değildir; response receipt kendi başına ekrandaki kitabı değiştirmez.

Sahnedeki adımlar bu yüzden server response oluşturma, HTTP status/headers receipt, body consumption ve DOM update olarak ayrılmalıdır. Hareket data arrival’ı gösterir; alıcı state’i veri ulaşmadan değişmiş sayılmaz. Step controls çizimdeki state’i öğretir; gerçek browser’da bütün body’nin tek paket veya tek frame’de geldiğini iddia etmez.

Hareket olmadan bütün senaryoları oku

Alan sınırı

İstek yalnız seçim taşır
Browser kitap kartı için GET isteğini hazırlar. case değeri bu örneğin veri seçicisidir; bir kullanıcıya yetki veren kimlik alanı değildir.
Browser
GET /api/book?case=found hazır
Application sınırı
Request ulaşmadı
Representation sahibi
Alan seçimi yapılmadı
Girdi sınırına ulaştı
Application GET isteğini aldı. Path route’u, case query’si izin verilen found/missing seçimini belirtir; seçimi tanımak browser’ın identity veya yetkisini doğrulamak değildir.
Browser
GET /api/book?case=found hazır
Application sınırı
GET /api/book?case=found alındı
Representation sahibi
Alan seçimi yapılmadı
Yerel sonuç henüz çıkış değil
Seeded memory adapter çağrısı aynı process içinde kalır. record-found veya record-missing bilgisi handler içindedir; henüz browser verisi değildir.
Browser
Response bekleniyor
Application sınırı
record-found
Representation sahibi
Alan seçimi yapılmadı
Representation sınırı belirlendi
Bu fixture yalnız book.id + book.title üretir. Bir kaydın okunabilmesi bütün server verisinin response’a yazılması gerektiği anlamına gelmez; burada başka özel alanın varlığı iddia edilmez.
Browser
Response bekleniyor
Application sınırı
200 JSON hazır
Representation sahibi
200 / book.id + book.title
Response geldi, yorumlama ayrı
Browser 200 response’unu aldı. fetch fulfillment tek başına iş sonucunun başarılı olduğu anlamına gelmez; body okuması ve status kontrolü ayrıca yapılır.
Browser
200 + JSON alındı
Application sınırı
200 JSON hazır
Representation sahibi
200 / book.id + book.title
UI güven sınırını korudu
Kod status ve JSON sözleşmesini birlikte kullanır. Kart yalnız book.title gösterir; response gelmesi ile DOM değişmesi ayrı aşamalardır.
Browser
UI: Atlas Notları
Application sınırı
200 JSON hazır
Representation sahibi
200 / book.id + book.title

Kayıt yok

İstek yalnız seçim taşır
Browser kitap kartı için GET isteğini hazırlar. case değeri bu örneğin veri seçicisidir; bir kullanıcıya yetki veren kimlik alanı değildir.
Browser
GET /api/book?case=missing hazır
Application sınırı
Request ulaşmadı
Representation sahibi
Alan seçimi yapılmadı
Girdi sınırına ulaştı
Application GET isteğini aldı. Path route’u, case query’si izin verilen found/missing seçimini belirtir; seçimi tanımak browser’ın identity veya yetkisini doğrulamak değildir.
Browser
GET /api/book?case=missing hazır
Application sınırı
GET /api/book?case=missing alındı
Representation sahibi
Alan seçimi yapılmadı
Yerel sonuç henüz çıkış değil
Seeded memory adapter çağrısı aynı process içinde kalır. record-found veya record-missing bilgisi handler içindedir; henüz browser verisi değildir.
Browser
Response bekleniyor
Application sınırı
record-missing
Representation sahibi
Alan seçimi yapılmadı
Representation sınırı belirlendi
Handler bulunamayan kayıt için 404 ve error=BOOK_NOT_FOUND body’sini hazırlar. book.id veya book.title üretilmez; bu bir HTTP response’tur, network kaybı değildir.
Browser
Response bekleniyor
Application sınırı
404 JSON hazır
Representation sahibi
404 / BOOK_NOT_FOUND
Response geldi, yorumlama ayrı
Browser 404 response’unu aldı. fetch fulfillment tek başına iş sonucunun başarılı olduğu anlamına gelmez; body okuması ve status kontrolü ayrıca yapılır.
Browser
404 + JSON alındı
Application sınırı
404 JSON hazır
Representation sahibi
404 / BOOK_NOT_FOUND
UI güven sınırını korudu
Kod status ve JSON sözleşmesini birlikte kullanır. BOOK_NOT_FOUND normal bulunamadı durumudur; başarılı kitap kartı gösterilmez.
Browser
UI: bulunamadı
Application sınırı
404 JSON hazır
Representation sahibi
404 / BOOK_NOT_FOUND

VARSAYIM · SINIR · KONTROL

Client seçimi server kararı değildir

Düğme normal olarak bir case selector gönderir; handler bunu kendi kapalı senaryo listesiyle değerlendirir. Client’te görünen “found” etiketi storage sonucunun otoritesi değildir. Üründe identity, object ownership veya fiyat gibi bilgiler de client etiketiyle doğrulanmış kabul edilemez.

Broken assumption, request body veya query bilgisini server’ın authoritative state’i yerine koymaktır. Etki application’ın kabul ettiği alan ve gerçekleştirdiği action’a bağlıdır. Bu okuma sahnesi public bir kitap representation’ı verir; tek başına private resource yetkisini veya write güvenliğini kanıtlamaz.

Success etiketinin sınırı

HTTP 200 bir protocol sonucu, valid JSON bir parse sonucu ve doğru kitap bir iş sonucu verir. Bunları tek “başarılı” kontrolüne indirmek UI’da yanlış veri veya eski state gösterebilir. 404’ü network exception sanmak da beklenen missing sonucunu belirsiz error’a çevirebilir.

Engelleyici tasarım status, content type, body shape ve UI branch’ini açıkça ayırır. Korunan kaynaklarda authorization handler/service katmanında ayrıca yürür. Frontend branch’i bu kontrolün yerine geçirilmez.

Trace, kendi verisini dışarı sızdırmamalı

Correlation için requestId kullanmak handler ve browser gözlemini bağlayabilir. Bütün request/response body’lerini loglamak ise private veri veya credential’ı başka bir depoya taşıyabilir. Debug bilgisi almakla onun herkese sunulması farklı kararlardır.

Bu artifact yalnız sentetik kitap ve field adlarını kullanır. Gerçek ürün minimal event alanlarını, erişim policy’sini ve retention’ı belirler. Trace’te secret bulunmaması browser response’unun güvenli olduğunu tek başına kanıtlamaz; iki çıkış yüzeyi ayrı incelenir.

Hareket olmadan bütün senaryoları oku

Kanıt eşleşti

Response örneğini oku
Found response örneğinde status 200, X-Lab-Request-Id ve JSON body vardır. Bunları handler üretir; browser’ın aynı bytes’ı aldığı bu artifact’ten ölçülmez. browserExpected ayrı bir beklenen akış kaydıdır.
HTTP response örneği
demo-book-found / 200
Trace kaydı
Trace okunmadı
Correlation incelemesi
Sonuç bilinmiyor
Üretici kaydı ayrı okundu
Sentetik trace’te handler request-received, route-selected ve response-created kayıtlarını; storage-adapter local-lookup ve record-found kayıtlarını üretir. in-process-call bu okumanın yerel sınırıdır.
HTTP response örneği
demo-book-found / 200
Trace kaydı
seq 1…5 mevcut
Correlation incelemesi
Sonuç bilinmiyor
Correlation kapsamı kuruldu
X-Lab-Request-Id ile requestId yalnız bu application fixture’ının correlation alanlarıdır. demo-book-found aynı interaction’ı bağlar; isim benzerliği başka işlemleri birleştirmez.
HTTP response örneği
Response örneği mevcut
Trace kaydı
requestId eşleşti
Correlation incelemesi
Aynı interaction
Body sözleşmesi incelendi
Body book.id ve book.title taşır; 53 UTF-8 byte bilgisi karakter sayısıyla aynı iddia değildir. response-created olayı browser delivery kanıtının yerine geçmez.
HTTP response örneği
53 byte / JSON
Trace kaydı
response-created: 200
Correlation incelemesi
Body uyumlu; UI ayrı
Beklenen görünüm ayrı tutuldu
browserExpected.view=book-title beklenen görünüm seçimidir. Model Atlas Notları başlığını gösterir; gerçek DOM gözlemi bu artifact’te yoktur. Body doğruluğu ile kullanıcının ekranı aynı kanıt değildir.
HTTP response örneği
Model UI: Atlas Notları
Trace kaydı
Trace ayrı kanıt
Correlation incelemesi
Beklenen view ayrı tutuldu
Sonuç ve bilinmeyen ayrıldı
Response status’u, JSON field’ları ve custom requestId trace ile uyumludur. 404 + BOOK_NOT_FOUND ayrı missing dalıdır. Bu karşılaştırma browser delivery veya gerçek DOM update kanıtı üretmez.
HTTP response örneği
Response/body uyumlu
Trace kaydı
Trace uyumlu
Correlation incelemesi
Response/trace uyumlu; DOM ölçülmedi

Trace eksik

Response örneğini oku
Found response örneğinde status 200, X-Lab-Request-Id ve JSON body vardır. Bunları handler üretir; browser’ın aynı bytes’ı aldığı bu artifact’ten ölçülmez. browserExpected ayrı bir beklenen akış kaydıdır.
HTTP response örneği
demo-book-found / 200
Trace kaydı
Trace okunmadı
Correlation incelemesi
Sonuç bilinmiyor
Üretici kaydı ayrı okundu
Application trace dosyasındaki request-received ve response-created ayrı üretim aşamalarını temsil eder. Bu branch trace parçasını bilerek dışarıda bırakır; eksiklik saldırı kanıtı değildir.
HTTP response örneği
demo-book-found / 200
Trace kaydı
Trace yok
Correlation incelemesi
Sonuç bilinmiyor
Correlation kapsamı kuruldu
X-Lab-Request-Id ile requestId yalnız bu application fixture’ının correlation alanlarıdır. Eşleşecek trace bulunmadığında handler yolu doğrulanmış sayılmaz.
HTTP response örneği
Response örneği mevcut
Trace kaydı
Trace yok
Correlation incelemesi
Coverage eksik
Body sözleşmesi incelendi
Body book.id ve book.title taşır; 53 UTF-8 byte bilgisi karakter sayısıyla aynı iddia değildir. response-created olayı browser delivery kanıtının yerine geçmez.
HTTP response örneği
53 byte / JSON
Trace kaydı
Trace yok
Correlation incelemesi
Body uyumlu; UI ayrı
Beklenen görünüm ayrı tutuldu
browserExpected.view=book-title beklenen görünüm seçimidir. Model Atlas Notları başlığını gösterir; gerçek DOM gözlemi bu artifact’te yoktur. Body doğruluğu ile kullanıcının ekranı aynı kanıt değildir.
HTTP response örneği
Model UI: Atlas Notları
Trace kaydı
Trace yok
Correlation incelemesi
Beklenen view ayrı tutuldu
Sonuç ve bilinmeyen ayrıldı
Response örneğinin body’si ve beklenen view bilinir; trace eksik olduğu için handler yolu bilinmez. Handler ve storage-adapter kayıtları aynı requestId kapsamından istenir; boşluk response status’uyla doldurulmaz.
HTTP response örneği
Response/body uyumlu
Trace kaydı
İstenmeli: eksik trace
Correlation incelemesi
UNKNOWN: handler yolu

UYGULAMA · GÜVENLİK KONTROLÜ · DOĞRULAMA

Network panel ve application trace’i birlikte oku

DevTools’ta request target, method, status, response headers ve body’yi incele. X-Lab-Request-Id ile aynı handler trace’ini bağla; bu header’ın adı lab sözleşmesidir. Application event sırası route selection, local lookup ve response creation’ı gösterir. Bu sıralama storage’dan gerçek packet capture alındığı anlamına gelmez.

Timing görünümü body receipt ile UI mutation’ın aynı şey olmadığını düşünmeye yardım eder. DOM’daki title veya missing mesajını ayrıca gözle. Network panel database internals’ı göstermediği için onu source trace veya adapter observation’ı ile karıştırma.

Found, missing ve eksik kanıt

Found baseline’ında 200, JSON book.title ve aynı başlığın DOM’da görünmesi beklenir. Missing benign case’inde 404, BOOK_NOT_FOUND ve not-found görünümü beklenir; fetch() yine Response üretir. Bu normal negative branch’i alarm olarak sınıflandırmak doğru değildir.

HTTP status var fakat requestId veya trace yoksa handler içi sıra bilinmez. Trace “response-created” demiş fakat browser response almamışsa oluşturma ile teslim ayrılır. Body parse başarısızsa DOM sonucu önceki kitaptan kalabilir; UI’ın loading/error state’ini gözlemeden yalnız 200 üzerinden karar verme.

Açıklanabilir bütünlük kontrolü

Bu örnek için status/body sözleşmesini karşılaştır: found → 200 + book; missing → 404 + error. Her response’da body’nin UTF-8 byte sayısı Content-Length ile eşleşir. Application’ın custom requestId’si trace ile aynı olmalıdır. Kontrol mantığı bu fixture şemasına aittir; evrensel web detector değildir.

Dayanıklı düzeltme hataların hangi aşamada oluştuğunu korur: network, HTTP status, body parse ve DOM branch ayrı işlenir. Trace correlation identifier’ı taşıyabilir ama session secret taşımaz. Regression found/missing yollarının ikisini ve body parse failure sonrasında eski verinin başarılıymış gibi gösterilmemesini kapsar.

ŞİMDİ VAKAYA UYGULA

İstek, server sonucu ve browser gözlemi aynı şey mi?

Atlas Notları bulunduğunda kartın 200 response ve book.title alması beklenir. Kitap bulunmadığında ise 404 ile BOOK_NOT_FOUND döner. Server’ın response hazırlaması, browser’ın onu alması ve kartın değişmesi ayrı aşamalardır.

Bağlı vakada 200 response görülürken JSON parsing başarısız olur. Receipt, body okuma ve DOM update sınırlarından hangisinde durulduğunu seç; eksik kanıtı kendi cümlenle belirt.

Bağlı vaka dosyasını aç ↗

ÖRNEĞİ BİRLİKTE OKUYALIM

İki HTTP sonucu ve local işlem izi

Bir alan seç; hangi sonucu desteklediğini ve nerede yetersiz kaldığını incele.

Ham kaydı ve alan açıklamalarını oku

{
  "representation": "HTTP/1.1 teaching text, CRLF-delimited; selected headers only",
  "storageTransport": "in-process-call, seeded memory",
  "exchanges": [
    {
      "case": "found",
      "requestId": "demo-book-found",
      "request": "GET /api/book?case=found HTTP/1.1\r\nHost: 127.0.0.1:4175\r\nAccept: application/json\r\n\r\n",
      "response": "HTTP/1.1 200 OK\r\nContent-Type: application/json\r\nContent-Length: 53\r\nCache-Control: no-store\r\nX-Lab-Request-Id: demo-book-found\r\n\r\n{\"book\":{\"id\":\"book-atlas\",\"title\":\"Atlas Notları\"}}",
      "bodyUtf8Bytes": 53,
      "trace": [
        {
          "seq": 1,
          "actor": "handler",
          "event": "request-received",
          "requestId": "demo-book-found"
        },
        {
          "seq": 2,
          "actor": "handler",
          "event": "route-selected",
          "route": "/api/book"
        },
        {
          "seq": 3,
          "actor": "storage-adapter",
          "event": "local-lookup",
          "transport": "in-process-call"
        },
        {
          "seq": 4,
          "actor": "storage-adapter",
          "event": "record-found"
        },
        {
          "seq": 5,
          "actor": "handler",
          "event": "response-created",
          "status": 200
        }
      ],
      "browserExpected": {
        "fetch": "fulfilled-with-Response",
        "status": 200,
        "ok": true,
        "body": "await response.json()",
        "view": "book-title"
      }
    },
    {
      "case": "missing",
      "requestId": "demo-book-missing",
      "request": "GET /api/book?case=missing HTTP/1.1\r\nHost: 127.0.0.1:4175\r\nAccept: application/json\r\n\r\n",
      "response": "HTTP/1.1 404 Not Found\r\nContent-Type: application/json\r\nContent-Length: 26\r\nCache-Control: no-store\r\nX-Lab-Request-Id: demo-book-missing\r\n\r\n{\"error\":\"BOOK_NOT_FOUND\"}",
      "bodyUtf8Bytes": 26,
      "trace": [
        {
          "seq": 1,
          "actor": "handler",
          "event": "request-received",
          "requestId": "demo-book-missing"
        },
        {
          "seq": 2,
          "actor": "handler",
          "event": "route-selected",
          "route": "/api/book"
        },
        {
          "seq": 3,
          "actor": "storage-adapter",
          "event": "local-lookup",
          "transport": "in-process-call"
        },
        {
          "seq": 4,
          "actor": "storage-adapter",
          "event": "record-missing"
        },
        {
          "seq": 5,
          "actor": "handler",
          "event": "response-created",
          "status": 404
        }
      ],
      "browserExpected": {
        "fetch": "fulfilled-with-Response",
        "status": 404,
        "ok": false,
        "body": "await response.json()",
        "view": "not-found-message"
      }
    }
  ]
}

request / response: HTTP/1.1 öğretim gösterimi; DevTools raw capture değil. Headers/body boş CRLF satırıyla ayrılır.
Content-Length / bodyUtf8Bytes: Body octet sayısı; compression uygulanmaz. Unicode karakter sayısından farklı olabilir.
X-Lab-Request-Id / requestId: Bu örneğin özel correlation alanı; HTTP standardı değil.
trace[].actor / event / transport: Server-side processing ve local storage adapter çağrısı; network protocol kaydı değil.
browserExpected: HTTP Response, body read ve view için beklenen ayrı sonuçlar.

Sentetik selected-header gösterimi; tam RFC-compliant server transcript veya lab output iddiası yok. Tarih/diğer browser headers’ı atlanır. HTTP/2–3 framing, streaming packetization, DNS/TLS ve real persistence modellenmez. Header’ın adı gerçek lab uygulamasında farklıysa o uygulamanın sözleşmesi esas alınır.

İki yanlış kanı

Server 404 döndürürse fetch() promise’i otomatik reject olur.

404 bir HTTP Response’tur; fetch() fulfill olabilir, response.ok false olur. Application status’u ayrıca değerlendirir.

Response browser’a ulaşınca ekrandaki içerik de güncellenmiştir.

Status/headers, body okuma/parsing ve DOM update ayrı aşamalardır. fetch() kendi başına DOM’u değiştirmez.

SIRA SENDE

Bu hikâyeyi sen çöz.

Sonucu tahmin et, kanıtın sınırını bul ve nedenini kendi cümlenle anlat.

missing case’inde 404 response headers browser’a ulaştı. Body henüz okunmadı. Bu noktada hangi sonuç beklenir?

fetch() bir Response ile resolve olur; status 404, ok false’tur.
404 olduğu için fetch() otomatik reject olur.
Response headers geldiğine göre hata metni DOM’a yazılmıştır.

Gerekçeli cevabı oku

fetch() bir Response ile resolve olur; status 404, ok false’tur. — Seçilen fixture’da missing kaydı JSON error body’li 404’e çevrilir. Headers/status görülebilirken response.json() henüz tamamlanmış sayılmaz; view update de ayrı local işlemdir.

Aşağıdaki server izi browser’ın ne bildiğini ve storage yolunu hangi sınırlar içinde gösterir?

found case’inden seçilen server adımları; sentetik öğretim kaydı

actor / event: storage-adapter / local-lookup → record-found
transport: in-process-call
handler / status: response-created / 200

Local lookup ve response oluşturma gösterilir; browser teslimi bu izden çıkarılmaz.
Storage kartı olduğundan ayrı database host’a paket gönderildiği kanıtlanır.
200 oluşturulduğundan kitap başlığı DOM’da görünmektedir.

Gerekçeli cevabı oku

Local lookup ve response oluşturma gösterilir; browser teslimi bu izden çıkarılmaz. — Bu trace application içindeki işlemleri ilişkilendirir. Client teslimini ölçmediği için browserExpected alanı da gözlem yerine beklenen akışı anlatır.

Bir arkadaşın “row bulundu, o halde kullanıcı kitabı gördü” diyor. Bu çıkarımın eksik iki sınırını found case üzerinden açıkla.

Gerekçeli cevabı oku

Record-found yalnız data katmanının sonucudur. Handler’ın HTTP response’u oluşturması ve bunun browser’a ulaşması ayrıca gerekir. Response geldikten sonra JSON body okunup parse edilmeli; script kitap başlığını DOM’a yazmalıdır. Bu fixture DNS/TLS veya paint completion gözlemi sağlamaz.

□ Server sonucu ile browser’a response teslimini ayırdım.

□ Body parsing ile DOM update’i ayrı adımlar olarak açıkladım.

□ Fixture’ın ölçmediği DNS/TLS/paint sonucunu iddia etmedim.

Uygulama konsolunu aç · request / response / browser

Request, URL, cookie ve DOM örneklerini ayrıca aç

MANUAL LAB

Request, session ve resource policy

İki workbook ile gerçek loopback HTTP request, cookie/store ayrımı ve seeded permission kararlarını izle.

Tahmin → gözlem → açıklama workbook’unu aç ↗GitHub kaynakları ↗

Kaynaklar ve kapsam

MDN — How the web worksClients and servers · The other parts of the toolbox · So what happens, exactly?
RFC 9110 — HTTP Semantics3.1 Resources · 3.2 Representations · 3.3 Connections, Clients, and Servers · 3.7 Intermediaries · 8.6 Content-Length · 15.5.5 404 Not Found
RFC 9112 — HTTP/1.12.1 Message Format · 9 Connection Management · 9.3 Persistence
MDN — Using the Fetch APIHandling the response · Checking response status · Reading the response body
WHATWG Fetch StandardFetch method · Body mixin · HTTP-network-or-cache fetch
WHATWG HTML — Browsing the webNavigation and session history · The navigate algorithm
RFC 8446 — TLS 1.31 Introduction
RFC 9114 — HTTP/32 HTTP/3 Protocol Overview
OWASP Authorization Cheat SheetIntroduction · Validate the Permissions on Every Request · Verify that Authorization Checks are Performed in the Right Location
OWASP Logging Cheat SheetEvent data sources · Event attributes · Data to exclude · Verification

KENDİ NOTUN / BU TARAYICIDA

Bir request’in uçtan uca yolculuğu

İlk geçişte neye bakmalısın?

1. Core · Mekanizma

Kayıt bulundu

Kayıt bulunamadı

Browser’a URL yazınca başlayan iş

Navigation ile fetch() aynı işi yapmaz

Handler’ın aldığı request ile yaptığı işlem

Record’dan JSON response’a

Response geldi; body henüz okunmuş olmayabilir

Veri browser’da; görünümün değişmesi ayrı

2. Red · Güven ve etki

Alan sınırı

Kayıt yok

Client seçimi server kararı değildir

Success etiketinin sınırı

Trace, kendi verisini dışarı sızdırmamalı

3. Blue · Güvenli geliştirme ve savunma

Kanıt eşleşti

Trace eksik

Network panel ve application trace’i birlikte oku

Found, missing ve eksik kanıt

Açıklanabilir bütünlük kontrolü

İstek, server sonucu ve browser gözlemi aynı şey mi?

İki yanlış kanı

missing case’inde 404 response headers browser’a ulaştı. Body henüz okunmadı. Bu noktada hangi sonuç beklenir?

Aşağıdaki server izi browser’ın ne bildiğini ve storage yolunu hangi sınırlar içinde gösterir?

Bir arkadaşın “row bulundu, o halde kullanıcı kitabı gördü” diyor. Bu çıkarımın eksik iki sınırını found case üzerinden açıkla.

Request, session ve resource policy

Kaynaklar ve kapsam