Frontend Academy · บทเรียน

การจัดการข้อผิดพลาด: รหัสสถานะ HTTP

เรียนรู้การจับคู่รหัสสถานะ HTTP กับข้อความที่ผู้ใช้เห็น แยกข้อผิดพลาดของเครือข่ายออกจากข้อผิดพลาดของเซิร์ฟเวอร์ และใช้ตรรกะสำหรับลองใหม่

การจัดการข้อผิดพลาด: รหัสสถานะ HTTP เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

หมวดหมู่รหัสสถานะ HTTP

รหัสสถานะแบ่งตามเลขหลักแรก: 2xx สำเร็จ, 3xx เปลี่ยนเส้นทาง, 4xx ข้อผิดพลาดฝั่งไคลเอ็นต์ (เกิดจากคุณ), 5xx ข้อผิดพลาดฝั่งเซิร์ฟเวอร์ (เกิดจากเซิร์ฟเวอร์)

รหัส 2xx ที่พบบ่อย

200 OK: สำเร็จและมีเนื้อหา 201 สร้างแล้ว: สร้างทรัพยากรแล้ว (มักส่งทรัพยากรใหม่กลับมาด้วย) 204 ไม่มีเนื้อหา: สำเร็จแต่ไม่มีเนื้อหา (DELETE และบางครั้งใช้กับ PUT)

รหัส 4xx ที่พบบ่อย

400 คำขอไม่ถูกต้อง: ข้อมูลอินพุตมีรูปแบบไม่ถูกต้อง 401 ไม่ได้รับอนุญาต: ไม่มีข้อมูลยืนยันตัวตนหรือข้อมูลไม่ถูกต้อง 403 ถูกห้าม: ยืนยันตัวตนแล้วแต่ไม่มีสิทธิ์ดำเนินการ 404 ไม่พบ: ไม่มีทรัพยากรนั้นอยู่ 409 ขัดแย้ง: สถานะขัดแย้งกัน (เช่น อีเมลซ้ำ) 422 ไม่สามารถประมวลผลเอนทิตีได้: การตรวจสอบความถูกต้องล้มเหลว

รหัส 5xx ที่พบบ่อย

500 ข้อผิดพลาดภายในเซิร์ฟเวอร์: ข้อผิดพลาดทั่วไปของเซิร์ฟเวอร์ 502 เกตเวย์ไม่ถูกต้อง: บริการต้นทางล้มเหลว 503 บริการไม่พร้อมใช้งาน: เซิร์ฟเวอร์ทำงานหนักเกินไปหรือหยุดทำงาน 504 เกตเวย์หมดเวลา: บริการต้นทางไม่ตอบกลับภายในเวลาที่กำหนด

แปลงรหัสเป็นข้อความสำหรับผู้ใช้

แปลงรหัสสถานะเป็นข้อความในส่วนติดต่อผู้ใช้ที่มีประโยชน์ อย่าแสดง 'ข้อผิดพลาด 500' ให้ผู้ใช้เห็น

function userMessage(status) {
  if (status === 401) return 'Please sign in to continue.';
  if (status === 403) return "You don't have permission for that.";
  if (status === 404) return 'Not found.';
  if (status === 409) return 'Already exists.';
  if (status === 422) return 'Please check the form for errors.';
  if (status >= 500) return 'Something went wrong. Try again in a moment.';
  return 'Something unexpected happened.';
}

ข้อผิดพลาดเครือข่ายกับข้อผิดพลาดเซิร์ฟเวอร์

การดึงข้อมูลที่ล้มเหลว (ออฟไลน์, DNS ล้มเหลว, CORS) แตกต่างจากการตอบกลับข้อผิดพลาดของเซิร์ฟเวอร์ ข้อผิดพลาดเครือข่ายจะทำให้เกิดข้อยกเว้น ส่วนข้อผิดพลาดเซิร์ฟเวอร์จะส่งออบเจ็กต์การตอบกลับที่มีสถานะ >= 400 กลับมา

try {
  const res = await fetch('/api/users');
  if (!res.ok) {
    // Server replied but with error status
    throw new Error(`Server error ${res.status}`);
  }
  return res.json();
} catch (err) {
  if (err instanceof TypeError) {
    // Network failure — fetch couldn't reach server
    throw new Error('Network error. Check your connection.');
  }
  throw err;
}

ตรรกะการลองใหม่สำหรับ 5xx และข้อผิดพลาดเครือข่าย

ข้อผิดพลาดเซิร์ฟเวอร์และความล้มเหลวของเครือข่ายมักเกิดขึ้นชั่วคราว ให้ลองใหม่โดยเพิ่มช่วงเวลารอแบบทวีคูณ

async function fetchWithRetry(url, options, maxRetries = 3) {
  for (let attempt = 0; attempt < maxRetries; attempt++) {
    try {
      const res = await fetch(url, options);
      if (res.ok || (res.status >= 400 && res.status < 500)) return res;
      // 5xx — retryable
    } catch (err) {
      if (attempt === maxRetries - 1) throw err;
    }
    await new Promise(r => setTimeout(r, 2 ** attempt * 1000)); // 1s, 2s, 4s
  }
}

อย่าลองใหม่สำหรับ 4xx

ข้อผิดพลาด 4xx เกิดจากฝั่งคุณ การลองใหม่จึงไม่ช่วยอะไร ให้ลองใหม่เฉพาะ 5xx และความล้มเหลวของเครือข่าย ยกเว้น 429 (มีคำขอมากเกินไป) ซึ่งมักมีส่วนหัว Retry-After มาด้วย

การอ่านส่วนหัว Retry-After

เซิร์ฟเวอร์อาจส่ง Retry-After มาพร้อมกับ 429 และ 503 ให้รอตามจำนวนวินาทีดังกล่าวก่อนลองใหม่

const res = await fetch('/api/limited');
if (res.status === 429) {
  const after = parseInt(res.headers.get('Retry-After') || '5', 10);
  await new Promise(r => setTimeout(r, after * 1000));
  return fetch('/api/limited');
}

แสดงข้อผิดพลาดจากการตรวจสอบความถูกต้อง

การตอบกลับ 422 มักมีเนื้อหา JSON ที่แสดงรายการข้อผิดพลาดของแต่ละฟิลด์ ให้แสดงข้อผิดพลาดเหล่านั้นถัดจากอินพุตของแบบฟอร์มที่เกี่ยวข้อง

// Server response for 422:
// { errors: { email: 'Already taken', password: 'Too short' } }

if (res.status === 422) {
  const { errors } = await res.json();
  Object.entries(errors).forEach(([field, msg]) => {
    setFieldError(field, msg);
  });
}

ข้อมูลการตรวจวัด: บันทึกข้อผิดพลาดไปยังบริการ

ส่งข้อผิดพลาดไปยัง Sentry, Datadog หรือ LogRocket เพื่อดูข้อผิดพลาดเหล่านั้นในระบบจริง ให้ใส่ URL ของคำขอ เมธอด สถานะ และเนื้อหาที่ลบข้อมูลสำคัญออกแล้ว (ไม่มีข้อมูลลับ)

แสดงวิธีแก้ไขที่นำไปใช้ได้

ส่วนติดต่อผู้ใช้สำหรับข้อผิดพลาดทุกแห่งควรเสนอทางไปต่อให้ผู้ใช้ เช่น ปุ่มลองใหม่ ลิงก์ไปยังฝ่ายสนับสนุน หรือทางกลับไปยังหน้าที่ใช้งานได้ หน้าข้อผิดพลาดที่ไปต่อไม่ได้จะสร้างความหงุดหงิดให้ผู้ใช้

ตรวจสอบความเข้าใจอย่างรวดเร็ว

API ส่ง 422 ไม่สามารถประมวลผลเอนทิตีได้กลับมา โดยทั่วไปหมายความว่าอย่างไร

สรุป: การจัดการข้อผิดพลาด HTTP

2xx สำเร็จ, 3xx เปลี่ยนเส้นทาง, 4xx ข้อผิดพลาดฝั่งไคลเอ็นต์, 5xx ข้อผิดพลาดฝั่งเซิร์ฟเวอร์ แปลงรหัสเป็นข้อความที่เป็นมิตรต่อผู้ใช้ แยกข้อผิดพลาดเครือข่าย (TypeError จาก fetch) ออกจากข้อผิดพลาดเซิร์ฟเวอร์ (res.ok เป็นเท็จ) ลองใหม่สำหรับ 5xx และความล้มเหลวของเครือข่ายโดยเพิ่มช่วงเวลารอแบบทวีคูณ และอย่าลองใหม่สำหรับ 4xx (ยกเว้น 429 ที่มี Retry-After) แสดงข้อผิดพลาดของฟิลด์จาก 422 และบันทึกข้อผิดพลาดไปยังบริการอย่าง Sentry

คำถามที่พบบ่อย

บทเรียน “การจัดการข้อผิดพลาด: รหัสสถานะ HTTP” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การจัดการข้อผิดพลาด: รหัสสถานะ HTTP” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การจัดการข้อผิดพลาด: รหัสสถานะ HTTP”

เรียนรู้การจับคู่รหัสสถานะ HTTP กับข้อความที่ผู้ใช้เห็น แยกข้อผิดพลาดของเครือข่ายออกจากข้อผิดพลาดของเซิร์ฟเวอร์ และใช้ตรรกะสำหรับลองใหม่ คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การจัดการข้อผิดพลาด: รหัสสถานะ HTTP” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Frontend Academy