Kapitel 13: Häufige Fehler

🎯 Lernziele

In diesem Kapitel lernen Sie:

✅ Fehler 1: Modul-Import fehlgeschlagen
✅ Fehler 2: Asynchroner Code-Ausführungsreihenfolge-Fehler
✅ Fehler 3: Port-Belegung
✅ Fehler 4: Dateipfad-Fehler
✅ Fehler 5: CORS-Problem
✅ Debugging-Techniken: Node.js Debugging-Methoden

13.1 Modul-Import fehlgeschlagen

❌ Fehler: `Cannot find module`

Error: Cannot find module './utils'
Require stack:
- C:\projekt\app.js

🔍 Ursache 1: Falscher Pfad

javascript

// ❌ Falsch: Datei liegt in ./helpers/utils.js
const utils = require('./utils');  // Fehler!

// ✅ Richtig: Pfad muss exakt sein
const utils = require('./helpers/utils');

🔍 Ursache 2: Dateiendung vergessen

javascript

// ❌ Falsch
const utils = require('./utils');  // Sucht nach utils.js, utils.json, utils.node

// ✅ Richtig (wenn Datei utils.js heißt)
const utils = require('./utils.js');

🔍 Ursache 3: node_modules fehlt

bash

# ❌ Fehler: Paket wurde nicht installiert
const express = require('express');  // Fehler!

# ✅ Richtig: Zuerst installieren
npm install express

✅ Lösungsstrategien

Ursache	Lösung
Falscher Pfad	`__dirname` und `path.join()` verwenden
Datei existiert nicht	Pfad mit `fs.existsSync()` prüfen
node_modules fehlt	`npm install` ausführen
Groß-/Kleinschreibung	Bei Linux/maoS beachten!

💡 Best Practice: Pfade sicher erstellen

javascript

const path = require('path');
const utils = require(path.join(__dirname, 'utils'));

13.2 Asynchroner Code-Fehler

❌ Fehler: Ausgabe-Reihenfolge falsch

javascript

// ❌ Falsch: Erwartet "1, 2, 3", aber bekommt "1, 3, 2"
console.log('1. Starte...');
fs.readFile('datei.txt', 'utf8', (err, daten) => {
  console.log('2. Datei gelesen:', daten);
});
console.log('3. Weiter...');

Tatsächliche Ausgabe:

1. Starte...
3. Weiter...
2. Datei gelesen: [Inhalt]

🔍 Ursache: Asynchroner Code wird nicht blockiert

┌─────────────────────────────────┐
│  Synchroner Code (sofort)     │
│  1. console.log('1...')      │
│  3. console.log('3...')      │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  Asynchroner Code (später)   │
│  2. Datei lesen (Hintergrund)│
└─────────────────────────────────┘

✅ Lösung 1: Callback verwenden

javascript

// ✅ Richtig: Code in Callback einfügen
console.log('1. Starte...');
fs.readFile('datei.txt', 'utf8', (err, daten) => {
  console.log('2. Datei gelesen:', daten);
  console.log('3. Weiter...');  // In Callback verschieben!
});

✅ Lösung 2: Promises verwenden

javascript

// ✅ Besser: Mit Promises
console.log('1. Starte...');
fs.promises.readFile('datei.txt', 'utf8')
  .then(daten => {
    console.log('2. Datei gelesen:', daten);
    console.log('3. Weiter...');
  })
  .catch(err => console.error(err));

✅ Lösung 3: async/await verwenden (Empfohlen!)

javascript

// ✅✅ Am besten: Mit async/await
async function main() {
  console.log('1. Starte...');
  const daten = await fs.promises.readFile('datei.txt', 'utf8');
  console.log('2. Datei gelesen:', daten);
  console.log('3. Weiter...');
}

main();

13.3 Port-Belegung

❌ Fehler: `EADDRINUSE`

Error: listen EADDRINUSE: address already in use :::3000

🔍 Ursache: Port wird bereits verwendet

javascript

// ❌ Fehler: Port 3000 ist schon belegt
const server = http.createServer();
server.listen(3000);  // Fehler!

✅ Lösung 1: Prozess beenden

Windows:

bash

# Alle Node.js-Prozesse anzeigen
tasklist | findstr "node"

# Prozess beenden
taskkill /PID <PID> /F

maoS/Linux:

bash

# Alle Node.js-Prozesse anzeigen
ps aux | grep node

# Prozess beenden
kill -9 <PID>

✅ Lösung 2: Anderen Port verwenden

javascript

// ✅ Richtig: Anderen Port verwenden
const PORT = 3001;  // Oder 3002, 3003...
server.listen(PORT);

✅ Lösung 3: Port dynamisch wählen

javascript

// ✅ Besser: Port aus Umgebungsvariable oder zufällig
const PORT = process.env.PORT || 3000;
server.listen(PORT);

💡 Port prüfen (Windows)

bash

# Prüfen, welcher Prozess Port 3000 belegt
netstat -ano | findstr :3000

# Ergebnis:
# TCP    0.0.0.0:3000     0.0.0.0:0    LISTENING     12345
#                      ↑ PID

13.4 Dateipfad-Fehler

❌ Fehler: `ENOENT` (File Not Found)

Error: ENOENT: no such file or directory, open './datei.txt'

🔍 Ursache 1: Relativer Pfad falsch

javascript

// ❌ Falsch: Relativer Pfad bezieht sich auf Arbeitsverzeichnis!
fs.readFile('./datei.txt', 'utf8', callback);

// Wenn Sie das Programm von einem anderen Ordner aus starten:
# Fehler!
node projekt/app.js  // Sucht datei.txt im falschen Ordner

✅ Lösung: Absoluten Pfad mit `__dirname` verwenden

javascript

// ✅ Richtig: __dirname verwenden
const path = require('path');
const dateiPfad = path.join(__dirname, 'datei.txt');
fs.readFile(dateiPfad, 'utf8', callback);

🔍 Ursache 2: Pfad-Separator (Windows vs. maoS/Linux)

javascript

// ❌ Falsch (Funktioniert nur auf Windows)
const pfad = 'ordner\\datei.txt';

// ❌ Falsch (Funktioniert nur auf maoS/Linux)
const pfad = 'ordner/datei.txt';

✅ Lösung: `path.join()` verwenden

javascript

// ✅ Richtig: Plattformübergreifend
const path = require('path');
const pfad = path.join('ordner', 'unterordner', 'datei.txt');
// Windows: ordner\\unterordner\\datei.txt
// maoS/Linux: ordner/unterordner/datei.txt

📂 Visualisierung: `__dirname` vs. `./`

Projektstruktur:
C:\projekt\
├── app.js
└── daten\
    └── datei.txt

Wenn Sie in C:\projekt\ sind:
  __dirname  → C:\projekt              ✅
  ./         → C:\projekt              ✅

Wenn Sie in C:\ sind:
  __dirname  → C:\projekt              ✅
  ./         → C:\                     ❌ (Falsch!)

13.5 CORS-Problem

❌ Fehler: CORS-Fehler im Browser

Access to fetch at 'http://localhost:3000/api' from origin 'http://localhost:5173' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header.

🔍 Ursache: Same-Origin Policy

Frontend (http://localhost:5173)
    ↓
Backend  (http://localhost:3000)
    ❌ Unterschiedlicher Port = Unterschiedlicher Origin!

✅ Lösung 1: CORS-Header manuell setzen

javascript

const http = require('http');

const server = http.createServer((req, res) => {
  // CORS-Header setzen
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  
  // OPTIONS-Anfrage beantworten (Pre-flight)
  if (req.method === 'OPTIONS') {
    res.writeHead(204);
    res.end();
    return;
  }
  
  // Normale Anfrage bearbeiten
  res.writeHead(200, { 'Content-Type': 'application/json' });
  res.end(JSON.stringify({ nachricht: 'CORS funktioniert!' }));
});

server.listen(3000);

✅ Lösung 2: `cors`-Paket verwenden (Empfohlen!)

javascript

const express = require('express');
const cors = require('cors');
const app = express();

// CORS global aktivieren
app.use(cors());

// Oder: Nur für bestimmte Origins
app.use(cors({
  origin: 'http://localhost:5173',
  credentials: true
}));

app.get('/api', (req, res) => {
  res.json({ nachricht: 'CORS funktioniert!' });
});

app.listen(3000);

Installation:

bash

npm install cors

13.6 Debugging-Techniken

🐛 Methode 1: `console.log()` (Einfachste Methode)

javascript

const fs = require('fs');

console.log('1. Starte...');  // ← Debug-Ausgabe

fs.readFile('datei.txt', 'utf8', (err, daten) => {
  console.log('2. Datei gelesen:', daten);  // ← Debug-Ausgabe
  
  if (err) {
    console.error('3. Fehler:', err);  // ← Fehlerausgabe
    return;
  }
  
  console.log('4. Weiterverarbeitung...');  // ← Debug-Ausgabe
});

🐛 Methode 2: VS Code Debugger (Empfohlen!)

Schritt 1: `launch.json` erstellen

json

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Node.js Debuggen",
      "program": "${workspaceFolder}/app.js"
    }
  ]
}

Schritt 2: Haltepunkt (Breakpoint) setzen

Öffnen Sie app.js in VS Code
Klicken Sie links neben die Zeilennummer
Ein roter Kreis erscheint (Breakpoint)
Drücken Sie F5, um das Debugging zu starten

Schritt 3: Debuggen

Taste	Funktion
`F5`	Debugging starten / Fortsetzen
`F10`	Einzelne Zeile ausführen (Step Over)
`F11`	In Funktion hineinspringen (Step Into)
`Shift+F11`	Aus Funktion herausspringen (Step Out)
`Ctrl+Shift+F5`	Neu starten

🐛 Methode 3: `node inspect` (Kommandozeile)

bash

# Debugging-Modus starten
node inspect app.js

# Verfügbare Befehle:
# cont / c  - Fortsetzen
# next / n  - Nächste Zeile
# step / s  - Hineinspringen
# out / o  - Herausspringen
# pause    - Pausieren
# watch('expr') - Ausdruck überwachen

🐛 Methode 4: `ndb` (Chrome DevTools)

bash

# ndb installieren
npm install -g ndb

# Damit debuggen
ndb app.js

Vorteil: Chrome DevTools werden geöffnet (wie im Browser!)

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

✅ Fehler 1: Modul-Import fehlgeschlagen (Pfad prüfen, npm install)
✅ Fehler 2: Asynchroner Code (Callbacks, Promises, async/await)
✅ Fehler 3: Port-Belegung (Prozess beenden, anderen Port verwenden)
✅ Fehler 4: Dateipfad-Fehler (__dirname und path.join() verwenden)
✅ Fehler 5: CORS-Problem (CORS-Header oder cors-Paket)
✅ Debugging: console.log(), VS Code Debugger, node inspect, ndb

🎯 Nächste Schritte

Im nächsten Kapitel werden wir:

Fortgeschrittene Techniken lernen
Umgebungsvariablen verwalten (.env)
Fehlerbehandlung verbessern
Middleware entwickeln

📚 Weiterführende Ressourcen

🎉 Kapitel 13 abgeschlossen! Weiter zu Kapitel 14: Fortgeschrittene Techniken

Kapitel 13: Häufige Fehler ​

🎯 Lernziele ​

13.1 Modul-Import fehlgeschlagen ​

❌ Fehler: Cannot find module ​

🔍 Ursache 1: Falscher Pfad ​

🔍 Ursache 2: Dateiendung vergessen ​

🔍 Ursache 3: node_modules fehlt ​

✅ Lösungsstrategien ​

💡 Best Practice: Pfade sicher erstellen ​

13.2 Asynchroner Code-Fehler ​

❌ Fehler: Ausgabe-Reihenfolge falsch ​

🔍 Ursache: Asynchroner Code wird nicht blockiert ​

✅ Lösung 1: Callback verwenden ​

✅ Lösung 2: Promises verwenden ​

✅ Lösung 3: async/await verwenden (Empfohlen!) ​

13.3 Port-Belegung ​

❌ Fehler: EADDRINUSE ​

🔍 Ursache: Port wird bereits verwendet ​

✅ Lösung 1: Prozess beenden ​

✅ Lösung 2: Anderen Port verwenden ​

✅ Lösung 3: Port dynamisch wählen ​

💡 Port prüfen (Windows) ​

13.4 Dateipfad-Fehler ​

❌ Fehler: ENOENT (File Not Found) ​

🔍 Ursache 1: Relativer Pfad falsch ​

✅ Lösung: Absoluten Pfad mit __dirname verwenden ​

🔍 Ursache 2: Pfad-Separator (Windows vs. maoS/Linux) ​

✅ Lösung: path.join() verwenden ​

📂 Visualisierung: __dirname vs. ./ ​

13.5 CORS-Problem ​

❌ Fehler: CORS-Fehler im Browser ​

🔍 Ursache: Same-Origin Policy ​

✅ Lösung 1: CORS-Header manuell setzen ​

✅ Lösung 2: cors-Paket verwenden (Empfohlen!) ​

13.6 Debugging-Techniken ​

🐛 Methode 1: console.log() (Einfachste Methode) ​

🐛 Methode 2: VS Code Debugger (Empfohlen!) ​

Schritt 1: launch.json erstellen ​

Schritt 2: Haltepunkt (Breakpoint) setzen ​

Schritt 3: Debuggen ​

🐛 Methode 3: node inspect (Kommandozeile) ​

🐛 Methode 4: ndb (Chrome DevTools) ​

📝 Zusammenfassung ​

🎯 Nächste Schritte ​

📚 Weiterführende Ressourcen ​

Kapitel 13: Häufige Fehler

🎯 Lernziele

13.1 Modul-Import fehlgeschlagen

❌ Fehler: `Cannot find module`

🔍 Ursache 1: Falscher Pfad

🔍 Ursache 2: Dateiendung vergessen

🔍 Ursache 3: node_modules fehlt

✅ Lösungsstrategien

💡 Best Practice: Pfade sicher erstellen

13.2 Asynchroner Code-Fehler

❌ Fehler: Ausgabe-Reihenfolge falsch

🔍 Ursache: Asynchroner Code wird nicht blockiert

✅ Lösung 1: Callback verwenden

✅ Lösung 2: Promises verwenden

✅ Lösung 3: async/await verwenden (Empfohlen!)

13.3 Port-Belegung

❌ Fehler: `EADDRINUSE`

🔍 Ursache: Port wird bereits verwendet

✅ Lösung 1: Prozess beenden

✅ Lösung 2: Anderen Port verwenden

✅ Lösung 3: Port dynamisch wählen

💡 Port prüfen (Windows)

13.4 Dateipfad-Fehler

❌ Fehler: `ENOENT` (File Not Found)

🔍 Ursache 1: Relativer Pfad falsch

✅ Lösung: Absoluten Pfad mit `__dirname` verwenden

🔍 Ursache 2: Pfad-Separator (Windows vs. maoS/Linux)

✅ Lösung: `path.join()` verwenden

📂 Visualisierung: `__dirname` vs. `./`

13.5 CORS-Problem

❌ Fehler: CORS-Fehler im Browser

🔍 Ursache: Same-Origin Policy

✅ Lösung 1: CORS-Header manuell setzen

✅ Lösung 2: `cors`-Paket verwenden (Empfohlen!)

13.6 Debugging-Techniken

🐛 Methode 1: `console.log()` (Einfachste Methode)

🐛 Methode 2: VS Code Debugger (Empfohlen!)

Schritt 1: `launch.json` erstellen

Schritt 2: Haltepunkt (Breakpoint) setzen

Schritt 3: Debuggen

🐛 Methode 3: `node inspect` (Kommandozeile)

🐛 Methode 4: `ndb` (Chrome DevTools)

📝 Zusammenfassung

🎯 Nächste Schritte

📚 Weiterführende Ressourcen