Vibe Coding · درس

اكتشاف الأخطاء والأنماط السيئة

تعرّف إلى الأخطاء الشائعة التي يرتكبها AI وكيفية اكتشافها

اكتشاف الأخطاء والأنماط السيئة درس مجاني في Vibe Coding على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vibe Coding، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vibe Coding 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Learn the AI Mistake Patterns

AI makes the same kinds of mistakes over and over. Once you know the patterns, you'll spot them in seconds — like a detective who's seen the same trick a hundred times.

This lesson is a field guide to the most common bugs and bad patterns in AI-generated code, plus how to catch each one. No deep CS background needed.

You don't memorize fixes — you learn what to watch for.

Pattern 1: Missing Edge Cases

AI loves the 'happy path' and often forgets the messy reality: empty lists, missing data, zero, or null.

Run this average function with a normal list — it works. But picture what happens if the list is empty.

function average(numbers) {
  let sum = 0;
  for (const n of numbers) sum += n;
  return sum / numbers.length;
}

console.log(average([10, 20, 30])); // 20, fine
console.log(average([]));            // NaN — divide by zero!

Catching Edge Cases

The empty list gave NaN (not a number) because it divided by zero. In a real app that could show 'NaN' to a user or crash later.

The catch: whenever you see code that loops, divides, or reads a property, ask 'what if it's empty or missing?'

Fix prompt you can paste: 'Handle the empty-list case and any null inputs in this function. Return a sensible default and explain your choice.'

Pattern 2: Reading Missing Data

AI often assumes data is always shaped perfectly. Reach into an object that might not have what you expect, and you get the classic crash.

This one throws a real error. Run it and read the message.

function getCity(user) {
  return user.address.city; // assumes address always exists
}

const u = { name: 'Sam' }; // no address!
console.log(getCity(u));    // TypeError: Cannot read properties of undefined

Catching Missing-Data Bugs

That Cannot read properties of undefined error is one of the most common in all of web development. AI generates it constantly because it assumes ideal data.

Watch for chains like a.b.c where any middle piece could be missing. The safe pattern uses optional chaining: user.address?.city, which returns undefined instead of crashing.

When you see deep property access on user input or API data, flag it for review.

Pattern 3: Hardcoded Secrets

A dangerous favorite: AI pastes an API key or password directly into the code to make the example 'just work.'

If this ships to GitHub or the browser, anyone can steal your key and run up your bill. Never let a literal secret survive review.

// DANGER: secret key hardcoded in the source
const STRIPE_KEY = 'sk_live_51HxAbC9secretrealkey';

fetch('https://api.stripe.com/charge', {
  headers: { Authorization: 'Bearer ' + STRIPE_KEY }
});
// Keys belong in environment variables, never in code

Pattern 4: Silent Failures

Sometimes AI 'handles' an error by swallowing it — the app keeps going as if nothing happened, hiding the real problem.

The empty catch below means if the fetch fails, you get no warning, no log, just mysteriously missing data.

async function loadData(url) {
  try {
    const res = await fetch(url);
    return await res.json();
  } catch (e) {
    // swallows the error silently — bad!
    return null;
  }
}
// You'll never know WHY it returned null

Pattern 5: Overcomplicated Code

AI sometimes writes 30 lines for a 3-line job, or adds clever abstractions you didn't ask for. Complexity is where bugs hide and future-you gets lost.

If a simple task produced a tangled result, push back. Try: 'This feels more complex than the task needs. Rewrite it as simply as possible and explain why each part is necessary.'

Simple code you understand beats clever code you don't.

Pattern 6: It Doesn't Match the Goal

The sneakiest bug isn't broken code — it's working code that solves the wrong problem.

You asked to sort newest-first; AI sorted oldest-first. You asked to email active users; it emailed everyone. No error, just the wrong outcome.

Always re-read your original ask and check the output against your intent, not against 'does it run.' This is the bug AI can't catch for you.

Let AI Hunt Its Own Bugs

You don't have to find everything alone. Point AI at the code with a sharp, suspicious prompt and it'll surface many of these patterns.

Keep this prompt handy — it targets exactly the patterns from this lesson.

Audit this code for bugs and bad patterns. Check specifically for:

- Missing edge cases (empty, null, zero)
- Crashes from missing data (deep property access)
- Hardcoded secrets or API keys
- Silently swallowed errors
- Overcomplicated logic
- Anything that doesn't match this goal: [describe your goal]

List each issue, the line, and a fix.

Build Your Spotting Instinct

Your bug radar, summarized:

Loops and division? Check empty and zero.
Deep property access? Check missing data.
Keys or passwords? Never hardcoded.
Empty catch blocks? Silent failure.
Too much code? Ask for simpler.
Always: does it match what I actually asked for?

Run this scan on every chunk and you'll catch the vast majority of AI mistakes.

Quick Check

AI writes return user.address.city; and some of your users have no address. What kind of bug is this, and how do you catch it during review?

Recap: Catch the Common Bugs

The AI mistake patterns you can now spot:

Missing edge cases — empty lists, null, divide-by-zero.
Missing-data crashes — deep property access on imperfect data.
Hardcoded secrets — keys must live in environment variables.
Silent failures — empty catch blocks that hide errors.
Overcomplication — push for the simplest version.
Wrong goal — working code that solves the wrong problem.

Scan for these every time, and let AI audit itself too. Next: deciding what to keep, fix, or reject.

الأسئلة الشائعة

هل درس «اكتشاف الأخطاء والأنماط السيئة» مجاني؟

نعم — نص درس «اكتشاف الأخطاء والأنماط السيئة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vibe Coding، انتقل إلى CoddyKit PRO. تتضمن دورة Vibe Coding 4 دروس في المجموع.

ماذا ستتعلم في «اكتشاف الأخطاء والأنماط السيئة»؟

تعرّف إلى الأخطاء الشائعة التي يرتكبها AI وكيفية اكتشافها تتمرن على Vibe Coding مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vibe Coding؟

لا تُشترط خبرة سابقة. Vibe Coding على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «اكتشاف الأخطاء والأنماط السيئة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vibe Coding هذا؟

نعم. كل درس في Vibe Coding يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vibe Coding