อธิบาย Error Message ให้เข้าใจง่ายพร้อมแก้ทีละขั้นและป้องกันซ้ำ
พรอมต์สำหรับนักพัฒนาที่ต้องการอ่าน error message ที่ซับซ้อนให้เข้าใจง่าย รับคำแนะนำแก้ไขทีละขั้นตอน และเรียนรู้วิธีป้องกันไม่ให้ปัญหาเดิมเกิดซ้ำในอนาคต
คัดลอกพรอมต์ฉบับมีตัวแปร {{...}} ไปแก้ไขในเครื่องมือของคุณเอง
ตัวอย่างผลลัพธ์ที่จะได้
ก่อนเริ่มลงมือปรับพรอมต์ ดูตัวอย่างผลลัพธ์ที่คุณจะได้จริงเพื่อให้แน่ใจว่าพรอมต์นี้ตรงกับงานที่ต้องการ
สรุปปัญหา (What Went Wrong)
Error TypeError: Cannot read properties of undefined (reading 'map') เกิดขึ้นเมื่อ React พยายาม render component ProductList แต่ตัวแปรที่ควรเป็น array กลับมีค่าเป็น undefined ในขณะนั้น สาเหตุหลักคือข้อมูลจาก API ยังโหลดไม่เสร็จในรอบ render แรก ทำให้ .map() ไม่สามารถทำงานบน undefined ได้ ปัญหานี้อยู่ที่บรรทัดที่ 12 ของไฟล์ ProductList.jsx
สาเหตุที่เป็นไปได้ (Root Causes)
- State ไม่มี default value (พบบ่อยที่สุด):
useState()โดยไม่ใส่ค่าเริ่มต้นจะได้undefinedแทน[]ทำให้ render ครั้งแรกพัง - API response structure ไม่ตรงกับที่คาด: ใช้
data.productsแต่ API ส่งกลับเป็นdata.itemsหรือdata.dataทำให้ได้undefined - Props ขาด default value: Parent component ส่ง prop มาช้ากว่า child render ครั้งแรก โดยไม่มีการกำหนดค่าเริ่มต้นไว้
วิธีแก้ทีละขั้นตอน (Step-by-Step Fix)
ขั้นตอนที่ 1: กำหนด default value ให้ state
// ❌ ไม่ดี — render แรกได้ undefined
const [products, setProducts] = useState();
ปรับให้เข้ากับงานของคุณ
แก้ค่าตัวแปรด้านล่าง พรอมต์ฉบับสมบูรณ์จะอัปเดตอัตโนมัติ พร้อมคัดลอกไปวางใน Claude หรือ ChatGPT ได้ทันที
วาง error message ทั้งหมดที่ได้รับจาก console หรือ terminal รวมถึง stack trace ถ้ามี
ระบุภาษาและ framework ที่ใช้ เช่น Python/Django, TypeScript/Next.js, PHP/Laravel
อธิบายสั้นๆ ว่ากำลังทำอะไรอยู่เมื่อ error เกิดขึ้น หรือพิมพ์ 'ไม่มีข้อมูลเพิ่มเติม' ถ้าไม่ทราบ
A developer has encountered the following error:
```
TypeError: Cannot read properties of undefined (reading 'map')
at ProductList (ProductList.jsx:12:18)
at renderWithHooks (react-dom.development.js:14985:18)
```
Additional context: เกิดตอน render component ที่รับ data จาก API call แบบ async แล้วแสดงรายการสินค้า
---
Analyze this error and respond using the structured format below. Write all technical terms, code, and error names in English. Write all explanations and descriptions in Thai.
## สรุปปัญหา (What Went Wrong)
อธิบายว่า error นี้คืออะไรในภาษาที่เข้าใจง่าย ไม่เกิน 3-4 ประโยค บอกให้ชัดว่าส่วนไหนของระบบที่ล้มเหลวและเพราะอะไร
## สาเหตุที่เป็นไปได้ (Root Causes)
แสดงเป็น bullet list เรียงจากสาเหตุที่พบบ่อยที่สุดไปน้อยที่สุด อธิบายแต่ละสาเหตุ 1-2 ประโยค
## วิธีแก้ทีละขั้นตอน (Step-by-Step Fix)
ระบุเป็นขั้นตอนที่มีหมายเลข แต่ละขั้นตอนต้องมีคำอธิบายภาษาไทยและ code snippet (ถ้าเกี่ยวข้อง) พร้อม comment ภาษาไทยกำกับ
## วิธีป้องกันไม่ให้เกิดซ้ำ (Prevention)
แนะนำ best practice, defensive coding pattern หรือ tooling ที่ช่วยป้องกัน error ประเภทนี้ในอนาคต อย่างน้อย 3 ข้อ
## สิ่งที่ต้องทำก่อนเลย (Quick Win)
สรุปใน 1-2 ประโยคว่าควรลองทำอะไรก่อนเป็นอันดับแรกเพื่อแก้ปัญหาได้เร็วที่สุด
หมายเหตุ: หาก error message ที่ให้มาไม่มีข้อมูลเพียงพอ ให้ระบุว่าต้องการข้อมูลเพิ่มเติมอะไรก่อนที่จะสรุปสาเหตุที่แน่ชัด
เข้าใจเทคนิคที่ซ่อนอยู่
คลิกที่ส่วนไฮไลต์ในพรอมต์เพื่อกระโดดไปดูคำอธิบายเทคนิคแต่ละจุด ใช้ความเข้าใจนี้เพื่อปรับพรอมต์อื่นของคุณเองในภายหลัง
A developer has encountered the following error:
```
{{error_message}}
```
Additional context: {{context}}
---
Analyze this error and respond using the structured format below. Write all technical terms, code, and error names in English. Write all explanations and descriptions in Thai.2
## สรุปปัญหา (What Went Wrong)
อธิบายว่า error นี้คืออะไรในภาษาที่เข้าใจง่าย ไม่เกิน 3-4 ประโยค บอกให้ชัดว่าส่วนไหนของระบบที่ล้มเหลวและเพราะอะไร
## สาเหตุที่เป็นไปได้ (Root Causes)
แสดงเป็น bullet list เรียงจากสาเหตุที่พบบ่อยที่สุดไปน้อยที่สุด3 อธิบายแต่ละสาเหตุ 1-2 ประโยค
## วิธีแก้ทีละขั้นตอน (Step-by-Step Fix)
ระบุเป็นขั้นตอนที่มีหมายเลข แต่ละขั้นตอนต้องมีคำอธิบายภาษาไทยและ code snippet (ถ้าเกี่ยวข้อง) พร้อม comment ภาษาไทยกำกับ4
## วิธีป้องกันไม่ให้เกิดซ้ำ (Prevention)
แนะนำ best practice, defensive coding pattern หรือ tooling ที่ช่วยป้องกัน error ประเภทนี้ในอนาคต อย่างน้อย 3 ข้อ5
## สิ่งที่ต้องทำก่อนเลย (Quick Win)
สรุปใน 1-2 ประโยคว่าควรลองทำอะไรก่อนเป็นอันดับแรกเพื่อแก้ปัญหาได้เร็วที่สุด
หมายเหตุ: หาก error message ที่ให้มาไม่มีข้อมูลเพียงพอ ให้ระบุว่าต้องการข้อมูลเพิ่มเติมอะไรก่อนที่จะสรุปสาเหตุที่แน่ชัด6
แตะส่วนที่ไฮไลต์เพื่อดูคำอธิบายเทคนิคแต่ละจุด · {{ }} คือตัวแปรที่ปรับได้
"You are a senior software engineer and debugging specialist with deep expertise in {{language_or_framework}}."
การระบุ role ที่ชัดเจนพร้อม domain expertise ช่วยให้โมเดลปรับโทนและความลึกของคำตอบให้ตรงกับ framework ที่ developer ใช้จริง แทนที่จะตอบแบบ generic
"Write all technical terms, code, and error names in English. Write all explanations and descriptions in Thai."
การแยกภาษาออกจากกันอย่างชัดเจนรักษาความแม่นยำของ technical term ไว้ในขณะที่คำอธิบายยังอ่านเข้าใจง่ายสำหรับ developer ที่ใช้ภาษาไทย
"เรียงจากสาเหตุที่พบบ่อยที่สุดไปน้อยที่สุด"
การบังคับให้เรียงลำดับตามความน่าจะเป็นช่วยให้ developer ลองแก้สาเหตุที่เป็นไปได้มากที่สุดก่อน ประหยัดเวลาในการ debug อย่างมีนัยสำคัญ
"code snippet (ถ้าเกี่ยวข้อง) พร้อม comment ภาษาไทยกำกับ"
การกำหนดให้มี code snippet พร้อม comment ภาษาไทยทำให้ผลลัพธ์ copy-paste ได้ทันทีโดยไม่ต้องตีความเพิ่มเติม ลด cognitive load ของผู้ใช้
"อย่างน้อย 3 ข้อ"
การกำหนดจำนวนขั้นต่ำบังคับให้โมเดลคิดอย่างครอบคลุมแทนที่จะตอบแบบผิวเผินด้วยข้อเดียว ทำให้คำแนะนำป้องกันมีคุณค่าจริง
"หาก error message ที่ให้มาไม่มีข้อมูลเพียงพอ ให้ระบุว่าต้องการข้อมูลเพิ่มเติมอะไรก่อนที่จะสรุปสาเหตุที่แน่ชัด"
การกำหนด fallback behavior ป้องกันไม่ให้โมเดลเดาสาเหตุโดยไม่มีข้อมูลพอ ซึ่งอาจนำ developer ไปแก้ปัญหาผิดจุดและเสียเวลาเปล่า
เห็นความต่างระหว่างพรอมต์ทั่วไปกับพรอมต์ที่ใช้เทคนิค
คนส่วนใหญ่เริ่มต้นด้วยคำสั่งสั้น ๆ แบบพรอมต์ที่ใช้กันทั่วไป แต่ผลลัพธ์มักไม่ตรงใจและต้องถามซ้ำหลายรอบ พรอมต์แบบที่ใช้เทคนิคข้างต้นช่วยแก้ปัญหานี้
อธิบาย error นี้ให้หน่อย: TypeError: Cannot read properties of undefined (reading 'map')
- ระบุ role: senior debugging specialist พร้อมกำหนด framework จาก variable
- แยก error message และ context เป็น variable ที่ชัดเจน
- บังคับ output 5 sections ได้แก่ สรุปปัญหา / สาเหตุ (เรียงลำดับความน่าจะเป็น) / แก้ทีละขั้น (มี code snippet + comment ไทย) / ป้องกัน (อย่างน้อย 3 ข้อ) / quick win
- กำหนดภาษา: technical term ใช้อังกฤษ คำอธิบายใช้ไทย
- มี fallback เมื่อ error message ไม่มีข้อมูลเพียงพอ
