Fetch၊ error state နဲ့ environment variable ကို လုံခြုံစွာ AI ခိုင်းတဲ့ ပုံစံကို လေ့လာမည်။
ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်
API ချိတ်တဲ့အခါ AI က အောင်မြင်တဲ့လမ်းကြောင်းကိုပဲ ရေးတတ်ပါတယ်။ Vibe coding မှာ loading၊ empty၊ error၊ unauthorized ကို ထည့်ခိုင်းရပါတယ်။ Key ကို source ထဲမထည့်ရ။ NEXT_PUBLIC_ နဲ့ server-only ခြားချက်ကို ရှင်းပြပါ။ Client ကနေ secret key မခေါ်ရဘူးဆိုတာ prompt ထဲအတိအလင်းရေးပါ။
နေ့စဉ်ဘဝနဲ့ ချိတ်ကြည့်မယ်
Notes API ခေါ်ချင်ရင် “route handler က server မှာပဲ key ဖတ်မယ်၊ client က /api/notes ကိုပဲ fetch မယ်၊ 400 မှာ inline error ပြမယ်” လို့ခိုင်းပါ။ AI က SDK ကြီးတစ်ခု ထည့်လာရင် မလိုအပ်ရင် ပယ်ပါ။ Network tab မှာ request ကို ကိုယ်တိုင်ကြည့်ပါ။ Response shape ကို ဥပမာ JSON နဲ့ပေးရင် ပိုမှန်ပါတယ်။
အတူတူ လက်တွေ့စမ်းမယ်
export async function GET() {
const apiKey = process.env.NOTES_API_KEY;
if (!apiKey) {
return Response.json({ error: "Missing server configuration" }, { status: 500 });
}
const response = await fetch("https://example.com/notes", {
headers: { Authorization: `Bearer ${apiKey}` },
cache: "no-store",
});
if (!response.ok) {
return Response.json({ error: "Upstream failed" }, { status: 502 });
}
return Response.json(await response.json());
}Secret မပေါက်သော API route အကြမ်းတစ်ခုကို ပြန်စစ်လက်ခံနိုင်မည်။၅ မိနစ် စမ်းကြည့်
Client ကနေ တိုက်ရိုက်ခေါ်ထားတဲ့ မကောင်းတဲ့ fetch ဥပမာတစ်ခုရေးပါ။ ဘာကြောင့်အန္တရာယ်ရှိလဲနဲ့ ဘယ်လိုပြန်ခိုင်းမလဲ ရှင်းပါ။
သတိလေးတစ်ချက်
AI output ကို အပြီးသတ်အမှန်လို့မယူပါနှင့်။ Code၊ secret နှင့် user data ကို လူကပြန်ဖတ်၊ စမ်းပြီးမှ သုံးပါ။