JavaScript Academy · Oppitunti

Virherajat ilman frameworkeja — käsitteellinen johdanto

Luo pieniä virherajoja puhtaalla JavaScriptillä: try/catch riskialttiin koodin ympärille, wrapper-apufunktiot, asynkroninen try/catch, oletusarvot ja minimaalinen lokitus

Oppitunti 3/38 vaihetta

Virherajat ilman frameworkeja — käsitteellinen johdanto on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/3. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 3 oppituntia.

Kokonaiskuva

Tavoite: Estäkää yhtä virhettä rikkomasta koko näkymää.

  • Käyttäkää try/catch-rakennetta riskialttiiden kohtien ympärillä
  • Lisätkää pieni runSafe-apufunktio
  • Käsitelkää myös async-toiminnot try/catch-rakenteella
  • Palauttakaa varaarvoja ja kirjatkaa lyhyesti lokiin
Virherajat ilman frameworkeja — käsitteellinen johdanto — kuvitus 1

Paikallinen rajakohta: jäsentäminen

Ympäröikää vain riskialtis vaihe (JSON.parse). Palauttakaa virheen sattuessa yksinkertainen varakohde.

// Try/catch boundary: parse user JSON with a fallback
function safeParseUser(json) {
  try {
    const obj = JSON.parse(json);
    // minimal validation
    if (!obj || typeof obj.name !== "string") {
      return { name: "Guest" };
    }
    return { name: obj.name };
  } catch (err) {
    // fallback on parse error
    return { name: "Guest" };
  }
}

console.log("ok:", safeParseUser("{\"name\":\"Ayla\"}"));
console.log("bad:", safeParseUser("{oops}"));
Virherajat ilman frameworkeja — käsitteellinen johdanto — kuvitus 2

runSafe-apufunktio

Tehkää pieni apufunktio ja käyttäkää sitä uudelleen. Pitäkää lokit lyhyinä älkääkä vuotako salaisuuksia.

// A tiny boundary helper for sync functions
function runSafe(fn, fallback) {
  try {
    return fn();
  } catch (e) {
    // log minimal info for beginners
    console.log("error:", String(e));
    return fallback;
  }
}

// Use it
const resultOk = runSafe(function () {
  return 2 + 2;
}, 0);

const resultFail = runSafe(function () {
  // simulate crash
  throw new Error("boom");
}, 0);

console.log("ok:", resultOk, "fail:", resultFail);
Virherajat ilman frameworkeja — käsitteellinen johdanto — kuvitus 3

Asynkroninen rajakohta

Kun työ on async-tyyppistä, käyttäkää try/catch-rakennetta await-lauseen ympärillä ja palauttakaa varamerkkijono tai -arvo.

// Async boundary: try/catch inside an async function
async function fetchNameFake(id) {
  // simulate failure for odd ids
  if (id % 2 === 1) {
    throw new Error("not found");
  }
  return "Ayla";
}

async function loadName(id) {
  try {
    const name = await fetchNameFake(id);
    return name;
  } catch (e) {
    console.log("async error:", String(e));
    return "Guest";
  }
}

(async function () {
  console.log("even:", await loadName(2));
  console.log("odd :", await loadName(3));
})();
Virherajat ilman frameworkeja — käsitteellinen johdanto — kuvitus 4

Eristäkää riski

Älkää käärikö koko sovellusta. Eristäkää riskialtis vaihe, jotta virhe ei estä kaikkea muuta.

// Boundary only around the risky step, rest continues
function renderCard(userJson) {
  // boundary: parse
  const user = safeParseUser(userJson);
  // rest of rendering can continue with fallback
  return "Hello " + user.name;
}

console.log(renderCard("{\"name\":\"Lina\"}"));
console.log(renderCard("{broken}")); // still renders with fallback
Virherajat ilman frameworkeja — käsitteellinen johdanto — kuvitus 5

Rajakohtien käytännöt

Tarkistuslista:

  • Sijoittakaa pieni try/catch riskialttiiden kutsujen ympärille.
  • Palauttakaa pieni varaarvo.
  • Kirjatkaa lyhyesti lokiin (ei salaisuuksia).
  • Toistakaa sama malli async-kutsuille.
Virherajat ilman frameworkeja — käsitteellinen johdanto — kuvitus 6

Virherajojen perusteiden tietovisa

Pikatarkistus: Plain-JS-virheraja.

Virherajat ilman frameworkeja — käsitteellinen johdanto — kuvitus 7

Kertaus

Kertaus: Lisätkää paikallinen try/catch riskialttiin koodin ympärille, käyttäkää runSafe-apufunktiota, käsitelkää async-toiminnot try/catch-rakenteella ja palauttakaa varaarvoja, jotta näkymä jatkaa toimintaansa.

Virherajat ilman frameworkeja — käsitteellinen johdanto — kuvitus 8
Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit
59
Oppitunnit
200

Usein kysytyt kysymykset

Onko oppitunti ”Virherajat ilman frameworkeja — käsitteellinen johdanto” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Virherajat ilman frameworkeja — käsitteellinen johdanto”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 3 oppituntia.

Mitä opin oppitunnilla ”Virherajat ilman frameworkeja — käsitteellinen johdanto”?

Luo pieniä virherajoja puhtaalla JavaScriptillä: try/catch riskialttiin koodin ympärille, wrapper-apufunktiot, asynkroninen try/catch, oletusarvot ja minimaalinen lokitus Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/3.

Kuinka kauan ”Virherajat ilman frameworkeja — käsitteellinen johdanto”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

  1. Syötteiden validointi ja escapauksen perusteet
  2. Objektien turvallinen yhdistäminen, jäädyttäminen ja sinetöinti
  3. Virherajat ilman frameworkeja — käsitteellinen johdanto
← Takaisin: JavaScript Academy