একটি অনুরোধের পুরো যাত্রা — browser থেকে database হয়ে ফিরে আসা

১ · একটি ক্লিকের পেছনে পুরো পথের মানচিত্র

“বাজারঘর” আমাদের কাল্পনিক অনলাইন দোকান। রুনা ফোনে সাইট খুলে “চাল” বিভাগে চাপলেন। এক সেকেন্ডের কম সময়ে পণ্যের তালিকা চলে এল। এই ছোট্ট মুহূর্তে একটি request (অনুরোধ) বেশ কয়েকটি মেশিন ঘুরে একটি response (উত্তর) হয়ে ফিরেছে।

ফুল-স্ট্যাক ডেভেলপারের কাছে এই পথের মানচিত্র সবচেয়ে কাজের জিনিস। কারণ পরের ৯০টি পর্বে আপনি যা-ই লিখবেন, সেটি এই পথের কোনো একটি জায়গায় বসবে। আর কিছু ভাঙলে প্রথম প্রশ্ন হবে, “পথের কোন জায়গায় ভাঙল?”

সব অ্যাপে সব স্তর থাকে না। একটি ছোট প্রজেক্টে CDN না-ও থাকতে পারে, আর এক server-এই proxy, app আর database চলতে পারে। আবার বড় ব্যবস্থায় API gateway, cache বা একাধিক service যোগ হয়। Managed hosting-এ কিছু স্তর আপনার চোখের আড়ালে থাকে, কিন্তু থাকে ঠিকই। তাই মানচিত্রটি মুখস্থ করার জিনিস নয়, নিজের অ্যাপে মিলিয়ে দেখার জিনিস। আপনার সাইটে এই ছবির কোন বাক্সগুলো আছে, সেটি জানা প্রথম কাজ।

এই মানচিত্রের নিচের স্তরগুলোর প্রোটোকল অন্য কোর্সে গভীরভাবে পড়ানো হয়েছে। এখানে শুধু এটুকু মনে রাখুন:

• DNS: bazarghar.example-এর মতো নামকে IP ঠিকানায় বদলায়। বিস্তারিত: DNS.
• TCP ও TLS: নির্ভরযোগ্য, এনক্রিপ্ট করা সংযোগ বানায়। TCP-তে এক RTT লাগে, TLS 1.3-এ আরও এক RTT. বিস্তারিত: TCP সংযোগ, TLS ও HTTPS.
• HTTP: এই সংযোগের ওপর দিয়ে অনুরোধ-উত্তরের ভাষা। প্রোটোকলের গভীরে: HTTP, HTTP/2 ও HTTP/3.
• শুরুর চিত্র: একদম নতুন হলে আগে পড়ুন ওয়েব কীভাবে কাজ করে।

২ · এক অনুরোধ, হপ ধরে ধরে

এক মেশিন বা স্তর থেকে পরেরটিতে যাওয়াকে বলে hop (হপ)। নিচের ডায়াগ্রামে রুনার অনুরোধটি ধরে এগোন। ডানের ঘড়িতে সময় জমতে থাকবে। সংখ্যাগুলো হিসাবের সুবিধার জন্য ধরে নেওয়া, মাপা নয়: browser থেকে CDN পর্যন্ত RTT 20 ms, CDN থেকে মূল server পর্যন্ত RTT 40 ms, আর CDN-মূল server-এর সংযোগ আগে থেকেই খোলা।

fetch("https://bazarghar.example/api/products?category=rice")

bazarghar.example  →  203.0.113.10
203.0.113.x ডকুমেন্টেশনের জন্য সংরক্ষিত ঠিকানা

TCP handshake   1 RTT
TLS handshake   1 RTT
এখনো একটি বাইট HTTP যায়নি

GET /api/products?category=rice
cache: MISS  (ব্যক্তিগত বা ঘন ঘন বদলানো তথ্য, তাই মূল server-এ যায়)

upstream: app-2 (health check ঠিক আছে)
X-Forwarded-For: 198.51.100.7
X-Request-Id: req-1001

router      GET /api/products → listProducts
middleware  log, cookie পড়া

SELECT id, name, price FROM products
WHERE category = $1 LIMIT 20;
-- $1 = 'rice' (parameter, জোড়া লাগানো লেখা নয়)

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8

{"items":[{"id":1,"name":"Miniket Rice 5kg","price":420}, …]}

app → proxy → CDN → browser
প্রথম বাইট পৌঁছাল: 185 ms

const { items } = await res.json();
শেষ বাইট: 225 ms, এবার পর্দায় আঁকা

এই ঘড়ির হিসাব থেকে তিনটি কথা বেরিয়ে আসে। প্রথমত, আপনার লেখা কোড চলেছে মাত্র ৫৮ ms, মোট ২২৫ ms-এর চার ভাগের এক ভাগের একটু বেশি। দ্বিতীয়ত, প্রতিটি স্তর দুবার সময় নেয়: যাওয়ার পথে আর ফেরার পথে। তৃতীয়ত, প্রতিটি স্তর অনুরোধে কিছু যোগ করে, আবার ব্যর্থও হতে পারে। তাই নতুন স্তর মানে নতুন ক্ষমতা, আবার নতুন একটি খোঁজার জায়গা।

৩ · HTTP বার্তা — ডেভেলপার যেভাবে দেখেন

পোস্ট অফিসের খাম ভাবুন। ওপরে ঠিকানা, পাশে নির্দেশনা (“ভঙ্গুর”, “জরুরি”), ভেতরে চিঠি। HTTP বার্তাও তাই। HTTP/1.1-এ এটি সত্যিই সাধারণ লেখা। HTTP/2 আর HTTP/3-এ তারে যায় binary ফ্রেম হয়ে, কিন্তু ডেভেলপারের কাছে অর্থ একই থাকে।

কার্টে পণ্য যোগ করলে অনুরোধটি অন্যরকম দেখায়। এখানে body আছে, আর Content-Type জানায় body-টি কী রূপে আছে। Server এই header দেখেই ঠিক করে কীভাবে পড়বে। JSON পাঠিয়ে এই header ভুলে গেলে অনেক framework-এ req.body ফাঁকা আসে, যা নতুনদের একটি পরিচিত ঝামেলা।

POST /api/cart/items HTTP/1.1
Host: bazarghar.example
Content-Type: application/json
Cookie: sid=example-session-id

{"productId":1,"qty":2}

HTTP/1.1 201 Created
Content-Type: application/json; charset=utf-8

{"cartItems":3}

এটি বার্তার গঠন দেখানোর উদাহরণ, কোনো run-এর আউটপুট নয়। URL আর method-এর নকশা আসবে পর্ব ৩২-এ, status code-এর বিস্তার পর্ব ৩৩-এ।

JSON হলো আজকের API-র সাধারণ ভাষা: object আর array লেখার একটি নিয়ম। মনে রাখুন, তারে যায় লেখা। res.json() বা JSON.parse সেই লেখাকে object বানায়। তাই JSON-এ তারিখ বা Map নিজের আসল রূপে থাকে না, আর দামের মতো সংখ্যা ভুলে string হয়ে গেলে যোগের বদলে জোড়া লাগে।

এবার সত্যিকারের একটি node:http server চালান। একই ব্লকে fetch দিয়ে তাকে ডাকা হচ্ছে, আর দুই দিক থেকে বার্তাটি ছাপা হচ্ছে। Language-এর খুঁটিনাটি আছে JavaScript-এর fetch ও HTTP পর্বে।

const http = require("node:http");

const server = http.createServer((req, res) => {
  const url = new URL(req.url, "http://localhost");
  console.log("SERVER saw:", req.method, url.pathname, url.search);
  console.log("  accept       =", req.headers.accept);
  console.log("  x-request-id =", req.headers["x-request-id"]);
  const body = JSON.stringify({
    category: url.searchParams.get("category"),
    items: [{ id: 1, name: "Miniket Rice 5kg", price: 420 }],
  });
  res.writeHead(200, {
    "Content-Type": "application/json; charset=utf-8",
    "Cache-Control": "no-store",
    Connection: "close",
  });
  res.end(body);
});

server.listen(0, "127.0.0.1", async () => {
  const { port } = server.address();
  const r = await fetch(`http://127.0.0.1:${port}/api/products?category=rice`, {
    headers: { Accept: "application/json", "X-Request-Id": "req-1001" },
  });
  console.log("CLIENT got:", r.status, r.statusText);
  console.log("  content-type  =", r.headers.get("content-type"));
  console.log("  cache-control =", r.headers.get("cache-control"));
  const text = await r.text();                 // body: শুধু লেখা
  console.log("  raw body =", text);
  const data = JSON.parse(text);               // লেখা থেকে object
  console.log("  price + 1 =", data.items[0].price + 1);
  server.close();
});

৪ · App server-এর ভেতরে — router, middleware, controller, service

Express, Next.js, Django বা Laravel যেটিই হোক, ভেতরের ছাঁচ প্রায় একই। স্তরগুলো আলাদা রাখা হয় যাতে প্রতিটি অংশের একটিই কাজ থাকে।

নিচের ব্লকে হাতে লেখা ছোট একটি router আর middleware chain আছে। কোনো সত্যিকারের network নেই, তাই ঘড়িটিও সিমুলেটেড। সংখ্যাগুলো স্টেপারের সাথে মেলানো: router আর middleware ৮, controller আর service ৫, database ৪০, JSON ৫.

// সিমুলেটেড ঘড়ি: সময় মাপা নয়, ধরে নেওয়া (ms)
let clock = 0;
const hop = (layer, note, ms) => {
  clock += ms;
  console.log(`${String(clock).padStart(3)} ms  ${layer.padEnd(10)} ${note}`);
};
const rows = [{ id: 1, name: "Miniket Rice 5kg", cat: "rice" },
              { id: 2, name: "Masoor Dal 1kg", cat: "dal" }];
const service = (cat) => {
  hop("service", `rule: only category=${cat}`, 3);
  const found = rows.filter((r) => r.cat === cat);
  hop("database", `SELECT ... -> ${found.length} row`, 40);
  return found;
};
const listProducts = (req) => {           // controller
  hop("controller", "read query, call service", 2);
  const items = service(req.query.category);
  hop("controller", "build JSON", 5);
  return { status: 200, body: { items } };
};
const routes = { "GET /api/products": listProducts };
const logger = (req, next) => { hop("middleware", "log request", 2); return next(); };
const auth = (req, next) => { hop("middleware", "cookie: guest", 3); return next(); };
const chain = [logger, auth];
function handle(req) {
  clock = 0;
  hop("router", `match ${req.method} ${req.path}`, 3);
  const handler = routes[`${req.method} ${req.path}`];
  if (!handler) { hop("router", "no route", 0); return { status: 404 }; }
  const run = (i) => (i < chain.length ? chain[i](req, () => run(i + 1)) : handler(req));
  return run(0);
}
console.log(JSON.stringify(handle({ method: "GET", path: "/api/products", query: { category: "rice" } })));
console.log(JSON.stringify(handle({ method: "GET", path: "/api/product", query: {} })));

৫ · সময় কোথায় যায় — latency budget

যে সময়টা একটি অনুরোধে লাগে, তাকে বলে latency. মাসের বাজেটে যেমন বাসাভাড়া, বাজার, যাতায়াত আলাদা করে লেখা হয়, তেমনি latency budget-এ মোট সময়কে স্তরে ভাগ করা হয়। ধরা যাক, “বাজারঘর”-এর দল ঠিক করল, product API-র মোট সময় ৩০০ ms-এর মধ্যে থাকবে (লক্ষ্যটি দলের নিজের সিদ্ধান্ত, কোনো মান নয়)।

ক্যালকুলেটরটি চালিয়ে দেখুন। চারটি প্রশ্নের উত্তর এখানে: সংযোগ আবার ব্যবহার করলে কত বাঁচে, ধীর query কত ক্ষতি করে, বড় উত্তর কত ক্ষতি করে, আর CDN-এ মিললে কী হয়।

// সব সংখ্যা ধরে নেওয়া (ms); আপনার অ্যাপের মাপা সংখ্যা বসিয়ে দেখুন
const download = (kb, mbps) => (kb * 8) / mbps;      // KB -> kilobit, ÷ Mbps = ms
const base = {
  dns: 25, tcp: 20, tls: 20, browserToEdge: 20, edgeToOrigin: 40,
  lb: 2, app: 13, db: 40, json: 5, body: download(20, 4),
};
const BUDGET = 300;
const report = (name, changes) => {
  const p = { ...base, ...changes };
  const total = Object.values(p).reduce((a, b) => a + b, 0);
  const server = p.lb + p.app + p.db + p.json;
  const network = total - server;
  const mark = total <= BUDGET ? "OK  " : "OVER";
  console.log(`${mark} ${String(total).padStart(4)} ms  server ${String(server).padStart(3)}  network ${String(network).padStart(3)}  ${name}`);
};
const warm = { dns: 0, tcp: 0, tls: 0 };
const edgeHit = { edgeToOrigin: 0, lb: 0, app: 0, db: 0, json: 0 };

console.log(`budget = ${BUDGET} ms, body = ${base.body} ms`);
report("first request (cold)", {});
report("second request (warm)", warm);
report("warm, slow query", { ...warm, db: 400 });
report("warm, 200 KB body", { ...warm, body: download(200, 4) });
report("warm, CDN hit", { ...warm, ...edgeHit });

// cache hit ratio: গড় = h × hit + (1 - h) × miss
const avg = (h, hit, miss) => h * hit + (1 - h) * miss;
for (const h of [0.5, 0.9, 0.99]) console.log(`hit ratio ${h}: average ${avg(h, 60, 160).toFixed(0)} ms`);

দুটি পরিচিত হিসাব হাতে করে দেখুন। প্রথমটি বড় JavaScript ফাইল: ১.৫ MB ফাইল ৪ Mbps-এ নামতে ১.৫ × ৮ ÷ ৪ = ৩ সেকেন্ড লাগে, parse আর চালানোর সময় বাদেই। দ্বিতীয়টি বারবার database ডাকা: ৫০টি পণ্যের জন্য একটি তালিকা query আর প্রতিটির জন্য আলাদা একটি query মানে ৫১টি query. প্রতিটি মাত্র ২ ms হলেও মোট ১০২ ms, অথচ একটি join-এ কাজটি হতে পারত। একে বলে N+1 সমস্যা, যা পর্ব ৪২-এ মাপা হবে।

গড় সময় সবটা বলে না। ধরুন ১০০টি অনুরোধের ৯৯টি ১৬০ ms, একটি ৫,০০০ ms. গড় দাঁড়ায় (৯৯ × ১৬০ + ৫০০০) ÷ ১০০ = ২০৮.৪ ms, যা দেখতে নিরীহ। অথচ প্রতি ১০০ জনে একজন পাঁচ সেকেন্ড অপেক্ষা করছেন। তাই দলগুলো percentile দেখে: p50 মানে অর্ধেক অনুরোধ এর চেয়ে দ্রুত, p99 মানে ৯৯% অনুরোধ এর চেয়ে দ্রুত। আরও গভীর হিসাব পাবেন Latency ও Throughput পর্বে।

৬ · HTTP-র স্মৃতি নেই — state তাহলে থাকে কোথায়

RFC 9110 বলে, HTTP একটি stateless প্রোটোকল: প্রতিটি অনুরোধের অর্থ একা পড়েই বোঝা যায়। Server আগের অনুরোধ মনে রাখতে বাধ্য নয়। অথচ রুনার কার্ট তো মনে থাকে! কীভাবে?

const http = require("node:http");
const { randomBytes } = require("node:crypto");
const sessions = new Map();                    // চাবি: session id, মান: কার্ট

const server = http.createServer((req, res) => {
  const sid = /sid=(\w+)/.exec(req.headers.cookie ?? "")?.[1];
  const known = sessions.has(sid);
  const id = known ? sid : randomBytes(16).toString("hex");  // অনুমান করা যায় না
  const cart = known ? sessions.get(id) : { items: 0 };
  cart.items += 1;
  sessions.set(id, cart);
  const headers = { "Content-Type": "application/json", Connection: "close" };
  // production-এ HTTPS, তাই সেখানে Secure-ও যোগ হবে
  if (!known) headers["Set-Cookie"] = `sid=${id}; HttpOnly; SameSite=Lax; Path=/`;
  res.writeHead(200, headers).end(JSON.stringify(cart));
});

server.listen(0, "127.0.0.1", async () => {
  const url = `http://127.0.0.1:${server.address().port}/cart/add`;
  const add = async (cookie) => {
    const r = await fetch(url, { method: "POST", headers: cookie ? { Cookie: cookie } : {} });
    return { cart: await r.json(), setCookie: r.headers.get("set-cookie") };
  };
  const first = await add();
  console.log("1 no cookie  ->", first.cart, "| set-cookie:", first.setCookie.replace(/=\w+/, "=(32 hex)"));
  const cookie = first.setCookie.split(";")[0];  // browser এই কাজ নিজে করে
  console.log("2 with cookie->", (await add(cookie)).cart);
  console.log("3 with cookie->", (await add(cookie)).cart);
  console.log("4 no cookie  ->", (await add()).cart);
  console.log("sessions on server:", sessions.size);
  server.close();
});

এই কোডের Map app-এর মেমরিতে থাকে, আর সেখানেই ফাঁদ। app-1-এর Map-এ রুনার কার্ট, কিন্তু পরের অনুরোধ load balancer পাঠাল app-2-তে। সেখানে কার্ট নেই! Server restart হলেও সব হারাবে। তাই বাস্তবে state রাখা হয় app-এর বাইরে:

বড় ব্যবস্থায় এই নকশার আলোচনা পাবেন Session ও State পর্বে, আর নিরাপত্তার দিক Session ও Token পর্বে।

৭ · উত্তর পাওয়ার পর browser কী করে

পর্দায় পণ্য দেখানোর কাজ তখনো বাকি। পুরো পাতা খোলার সময় HTML এলে browser এই কাজগুলো করে:

1. HTML parse: লেখা পড়ে গাছের মতো DOM বানায়। সাধারণ <script> পেলে থেমে সেটি চালায়, তাই defer বা type="module" কাজের।
2. CSS: stylesheet থেকে CSSOM বানায়। CSS না এলে সাধারণত প্রথম আঁকা আটকে থাকে, যাতে স্টাইলহীন পাতা না দেখা যায়।
3. Layout ও paint: কোন জিনিস কত বড়, কোথায় বসবে তা হিসাব করে পিক্সেল আঁকে।
4. JavaScript: React-এর মতো কোড চলে, event ধরে।
5. Client থেকে fetch: JS নিজে আবার API ডাকে, JSON পায়, DOM বদলায়। এটিই আধুনিক অ্যাপের দ্বিতীয় যাত্রা।

Client থেকে fetch করার সময় একটি ফাঁদ আছে। fetch শুধু network-এ ব্যর্থ হলে বা CORS-এ আটকালে reject করে। 404 বা 500 এলেও Promise সফল হয়, কারণ উত্তর তো এসেছে! তাই res.ok নিজে দেখতে হয়।

async function loadProducts(category) {
  const res = await fetch(`/api/products?category=${encodeURIComponent(category)}`);
  if (!res.ok) throw new Error(`API failed: ${res.status}`);   // 404, 500 এখানে ধরা পড়ে
  return res.json();
}

ব্যবহারকারীর ইনপুট URL-এ বসানোর আগে encodeURIComponent দিয়ে নিরাপদ করা হয়েছে। React-এ এই ডাক, loading আর error অবস্থা কীভাবে সামলাতে হয়, তা পর্ব ১৩ আর ১৯-এ আসবে।

অর্থাৎ একটি পাতা মানে একটি অনুরোধ নয়, বহু অনুরোধ। এই ক্রম কোথায় বদলানো যায়, অর্থাৎ HTML server-এ তৈরি হবে না browser-এ, সেটিই পরের পর্বের বিষয়। Parse আর render-এর খুঁটিনাটি আছে ওয়েব কীভাবে কাজ করে পর্বে।

৮ · DevTools আর curl — যাত্রাটি নিজের চোখে দেখা

F12 চেপে DevTools খুলুন, Network ট্যাবে যান, পাতা reload করুন। প্রতিটি সারি একটি অনুরোধ। Name, Status, Type, Size, Time কলাম দেখুন। Size-এ (memory cache) বা (disk cache) থাকলে অনুরোধটি network-এই যায়নি। শেষের Waterfall কলাম সময়রেখা, আর একটি সারিতে ক্লিক করে Timing ট্যাবে সেই অনুরোধের ভাগগুলো পাবেন। Chrome-এর ডকুমেন্টেশন অনুযায়ী প্রধান ভাগগুলো হলো Queueing, Stalled, DNS Lookup, Initial connection (ভেতরে SSL), Request sent, Waiting (TTFB) আর Content Download.

নিচে “বাজারঘর”-এর পাতা প্রথমবার খোলার একটি নমুনা waterfall, সংখ্যাগুলো ধরে নেওয়া। ফোনের গতি ৪ Mbps.

Network ট্যাবের কয়েকটি ছোট অভ্যাস অনেক সময় বাঁচায়। Disable cache টিক দিলে প্রথমবার আসা ব্যবহারকারীর অবস্থা দেখা যায়। Throttling থেকে ধীর network বেছে নিলে আপনার দ্রুত Wi-Fi-এর আড়ালে থাকা সমস্যা বেরিয়ে আসে। Fetch/XHR ফিল্টার শুধু API অনুরোধগুলো দেখায়। একটি সারিতে ক্লিক করলে Headers, Payload আর Response ট্যাবে পুরো বার্তা পড়া যায়। আর সারিতে right-click করে Copy as cURL নিলে একই অনুরোধ terminal-এ চালানো যায়। সাবধান: এতে cookie-ও কপি হয়, তাই কোথাও পেস্ট করার আগে মুছে ফেলুন।

Browser ছাড়াও অনুরোধ পাঠানো যায়। curl command line থেকে HTTP অনুরোধ পাঠায়, আর -v দিলে পুরো কথোপকথন দেখায়। আমরা একটি ছোট lab বানিয়েছি: node:http-এ app server (port 4102) আর একটি হাতে লেখা reverse proxy (port 4180), দুটোই শুধু 127.0.0.1-এ।

সত্যিকারের run (Node.js 24.15.0, curl 8.18.0; progress লাইন বাদ দেওয়া হয়েছে):

$ curl -v "http://127.0.0.1:4102/api/products?category=rice"
*   Trying 127.0.0.1:4102...
* Established connection to 127.0.0.1 (127.0.0.1 port 4102) from 127.0.0.1 port 1358
* using HTTP/1.x
> GET /api/products?category=rice HTTP/1.1
> Host: 127.0.0.1:4102
> User-Agent: curl/8.18.0
> Accept: */*
>
* Request completely sent off
< HTTP/1.1 200 OK
< Content-Type: application/json; charset=utf-8
< Date: Sat, 31 Oct 2026 19:39:39 GMT
< Connection: keep-alive
< Keep-Alive: timeout=5
< Transfer-Encoding: chunked
<
* Connection #0 to host 127.0.0.1:4102 left intact
{"items":[{"id":1,"name":"Miniket Rice 5kg","price":420},{"id":2,"name":"Masoor Dal 1kg","price":135}],"page":1}

সময় মাপতে -w ব্যবহার করুন। এটি এই মেশিনে একবারের মাপ, কোনো সাধারণ ফল নয়। একই মেশিনের ভেতরে network প্রায় নেই বলেই সংখ্যা এত ছোট।

$ T='time_namelookup=%{time_namelookup} connect=%{time_connect} ttfb=%{time_starttransfer} total=%{time_total} code=%{http_code}\n'
$ curl -s -o /dev/null -w "$T" http://127.0.0.1:4102/api/products
time_namelookup=0.000030 connect=0.000545 ttfb=0.001059 total=0.001095 code=200

৯ · কোন হপে ভাঙল — 404, 500, 502, 504, CORS, timeout

ত্রুটি দেখলে দুটি প্রশ্ন করুন। এক, উত্তরটি কে দিল? দুই, কত দ্রুত দিল? নিচের সব status আমাদের lab-এ সত্যিই তৈরি করা।

Lab-এর proxy দিয়ে পাঠানো ফলগুলো দেখুন (সত্যিকারের run, header ছাঁটা):

$ curl -si http://127.0.0.1:4180/api/product
HTTP/1.1 404 Not Found
content-type: application/json; charset=utf-8
Via: 1.1 lab-proxy

{"error":"NOT_FOUND","path":"/api/product"}

$ curl -si http://127.0.0.1:4180/api/boom
HTTP/1.1 500 Internal Server Error
content-type: application/json; charset=utf-8
Via: 1.1 lab-proxy

{"error":"INTERNAL","requestId":"req-7f3a"}

$ curl -si http://127.0.0.1:4180/api/slow
HTTP/1.1 504 Gateway Timeout
Content-Type: text/plain
Server: lab-proxy

Gateway Timeout

504-এর সময় মাপলে পাওয়া গেল ttfb=1.007173, অর্থাৎ proxy-র ১ সেকেন্ডের সীমা শেষ হওয়া পর্যন্ত অপেক্ষা। এবার সবচেয়ে পরিচিত রহস্যটি ধরি: 502. Lab-এ app বন্ধ রেখে অনুরোধ পাঠানো হলো। প্রতিটি ধাপের আউটপুট সত্যিকারের run থেকে নেওয়া।

GET /api/products  502  text/plain
Response: Bad Gateway

$ curl -sv http://127.0.0.1:4180/api/products
* Established connection to 127.0.0.1 …
> GET /api/products HTTP/1.1
< HTTP/1.1 502 Bad Gateway
< Content-Type: text/plain
< Server: lab-proxy
Bad Gateway

[proxy] 502 GET /api/products upstream error: ECONNREFUSED

$ curl -sv --max-time 3 http://127.0.0.1:4102/health
*   Trying 127.0.0.1:4102...
* connect to 127.0.0.1 port 4102 … failed: Connection refused
* Failed to connect to 127.0.0.1 port 4102 after 2019 ms

$ node app.js
[app] config error: DATABASE_URL is not set
(exit code 1)

$ DATABASE_URL=example://bazarghar node app.js
[app] listening on 127.0.0.1:4102
$ curl -si http://127.0.0.1:4180/api/products
HTTP/1.1 200 OK
Via: 1.1 lab-proxy

CORS সবচেয়ে বিভ্রান্তিকর, কারণ curl-এ সব ঠিক দেখায়। CORS নিয়ম মানে browser, server বা curl নয়। Lab-এ 127.0.0.1:4173-এর একটি পাতা থেকে 127.0.0.1:4102-তে fetch করা হলো। Port আলাদা, তাই origin আলাদা। সত্যিকারের run (Microsoft Edge 156):

Access to fetch at 'http://127.0.0.1:4102/api/products' from origin 'http://127.0.0.1:4173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
JavaScript যা পেল:  TypeError: Failed to fetch
app-এর log:         [app] GET /api/products

শেষ লাইনটি লক্ষ করুন। Server অনুরোধটি পেয়েছে এবং চালিয়েছে। Browser শুধু উত্তরটি JavaScript-কে পড়তে দেয়নি। আর JS-এর কাছে আসে শুধু Failed to fetch, বিস্তারিত কেবল Console-এ। POST-এ JSON পাঠালে browser আগে একটি preflight OPTIONS অনুরোধ পাঠিয়ে অনুমতি নেয়। সমাধান server-এ অনুমোদিত origin-এর তালিকা দেওয়া, যা পর্ব ২৬ ও ৫০-এ করা হবে। পটভূমি: ওয়েবের নিরাপত্তা মডেল।

কোনো status না এলে সেই অনুরোধ HTTP পর্যন্ত পৌঁছায়ইনি, বা উত্তর ফেরেনি। Network ট্যাবে তখন Status কলামে (failed) দেখায়, আর Chromium-ভিত্তিক browser ত্রুটির নামে কারণের ইঙ্গিত দেয়। ERR_NAME_NOT_RESOLVED মানে DNS নাম খুঁজে পায়নি। ERR_CONNECTION_REFUSED মানে ঠিকানায় পৌঁছেছে, কিন্তু port-এ কেউ শুনছে না। ERR_CONNECTION_TIMED_OUT মানে কোনো সাড়াই আসেনি, যা প্রায়ই firewall বা বন্ধ server-এর লক্ষণ। নামগুলো পড়লেই খোঁজার জায়গা ছোট হয়ে আসে।

১০ · AI-এর যুগে অনুরোধ ট্রেস করা

AI আপনার server বা Network ট্যাব দেখতে পায় না। “502 আসছে, ঠিক করে দাও” বললে সে অনুমান করবে। তাকে প্রমাণ দিন, আর উত্তর যাচাই করুন। ফুল-স্ট্যাকে AI-এর পরিচিত ভুলগুলো হলো:

AI-এর পরামর্শ কাজে লাগানোর আগে

• সমস্যাটি নিজে চোখে দেখেছি: Network ট্যাব বা curl-এ status আর body
• Prompt-এ কোনো secret, cookie বা token পেস্ট করিনি
• Diff পড়েছি, আর প্রতিটি নতুন dependency-র প্রয়োজন বুঝেছি
• নতুন API আমার version-এর official docs-এ মিলিয়েছি
• ঠিক করার পর একই পথে আবার চালিয়েছি, আর একটি test লিখেছি