tRPC:n tyyppiturvalliset API:t päästä päähän · Oppitunti

Virheiden muotoilu ja kenttäkohtainen validointipalaute

Mukauttakaa tRPC-virheiden rakenne ja tuokaa clientille selkeät kenttäkohtaiset validointiviestit.

Oppitunti 4/413 vaihetta

Virheiden muotoilu ja kenttäkohtainen validointipalaute on ilmainen tRPC:n tyyppiturvalliset API:t päästä päähän-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. 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 tRPC:n tyyppiturvalliset API:t päästä päähän-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. tRPC:n tyyppiturvalliset API:t päästä päähän-kurssilla on yhteensä 4 oppituntia.

Miksi virheet kannattaa muotoilla?

Voitte heittää ja ottaa kiinni tRPC-virheistä. Asiakkaat tarvitsevat kuitenkin usein rakenteista virhed dataa, etenkin validoinnin kenttäkohtaisia viestejä, jotka voidaan näyttää lomakekenttien vieressä.

errorFormatter-asetus

tRPC:n avulla voitte mukauttaa virheiden muodon maailmanlaajuisesti käyttämällä alustuksen yhteydessä errorFormatter-asetusta.

const t = initTRPC.create({
  errorFormatter({ shape }) {
    return shape;
  },
});

Zod-virheiden tunnistaminen

Kun Zod-syöte ei läpäise validointia, tRPC liittää sen virheen aiheuttajaksi. Voitte tunnistaa sen ja tuoda sen esiin.

import { ZodError } from "zod";

errorFormatter({ shape, error }) {
  const isZod = error.cause instanceof ZodError;
  return { ...shape, data: { ...shape.data, isZod } };
}

Litteiden kenttävirheiden lisääminen

Zod voi litistää ongelmat fieldErrors-kartaksi, joka yhdistää kunkin kentän sen viesteihin.

const zodError = error.cause instanceof ZodError
  ? error.cause.flatten().fieldErrors
  : null;
return { ...shape, data: { ...shape.data, zodError } };

Mitä asiakas vastaanottaa

Asiakas saa nyt rakenteisen olion, jonka voi liittää lomakekenttiin.

// e.g. { zodError: { email: ["Invalid email"] } }

Virheiden lukeminen asiakkaalla

Ottakaa virhe kiinni ja lukekaa muotoiltu data.

try {
  await client.signup.mutate(input);
} catch (err) {
  const fields = err.data?.zodError;
  // show fields.email next to the input
}

HTTP-tilakoodit

Muoto sisältää koodin, joka vastaa HTTP-tilakoodia. Tämä on hyödyllistä, kun asiakas reagoi eri tavalla koodeihin UNAUTHORIZED ja BAD_REQUEST.

// shape.data.code === "BAD_REQUEST"
// shape.data.httpStatus === 400

Sisäisten tietojen vuotamisen estäminen

Olkaa varovaisia: älkää paljastako tuotannossa pinolokijäljityksiä tai sisäisiä viestejä. Muotoilkaa virheet niin, että ne paljastavat vain turvalliset, käyttäjälle tarkoitetut tiedot.

Raakavireen lokittaminen

Lokittakaa koko virhe palvelimella vianmääritystä varten ja lähettäkää asiakkaalle puhdistettu versio.

errorFormatter({ shape, error }) {
  console.error(error); // full detail in server logs
  return shape;        // safe shape to client
}

Yhtenäinen virhesopimus

Yhtenäinen virhemuoto kaikissa prosedyyreissä tarkoittaa, että käyttöliittymänne voi käsitellä virheet yhdellä uudelleenkäytettävällä apufunktiolla.

Asiakaspuolen apufunktion uudelleenkäyttö

Koska kaikilla proseduureilla on sama virhemuoto, kirjoittakaa yksi apufunktio, joka poimii fieldErrors-arvot ja ylätason viestin mistä tahansa epäonnistuneesta kutsusta.

function parseError(err) {
  return { fields: err.data?.zodError, message: err.message };
}

Pikatarkistus

Testatkaa virheiden muotoilua koskevat tietonne.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opitte tarjoamaan laadukkaita virhepalautteita:

errorFormatter mukauttaa virhemuodon maailmanlaajuisesti
Tunnistakaa ZodError-aiheuttajat ja tuokaa fieldErrors esiin
Lokittakaa täydet tiedot palvelimella ja lähettäkää asiakkaille puhdistettu muoto

Hyvin muotoillut virheet tekevät lomakkeiden ja asiakkaiden rakentamisesta huomattavasti helpompaa.

Aloita maksutta

Opi tRPC:n tyyppiturvalliset API:t päästä päähän 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: 10
Oppitunnit: 40

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Virheiden muotoilu ja kenttäkohtainen validointipalaute” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa tRPC:n tyyppiturvalliset API:t päästä päähän-oppimispolun 3 oppituntia, myös oppitunnin “Virheiden muotoilu ja kenttäkohtainen validointipalaute”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. tRPC:n tyyppiturvalliset API:t päästä päähän-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Virheiden muotoilu ja kenttäkohtainen validointipalaute”?

Mukauttakaa tRPC-virheiden rakenne ja tuokaa clientille selkeät kenttäkohtaiset validointiviestit. Harjoittelet tRPC:n tyyppiturvalliset API:t päästä päähän-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni tRPC:n tyyppiturvalliset API:t päästä päähän-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin tRPC:n tyyppiturvalliset API:t päästä päähän-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Virheiden muotoilu ja kenttäkohtainen validointipalaute”-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ä tRPC:n tyyppiturvalliset API:t päästä päähän-oppitunnilla?

Kyllä. Jokainen tRPC:n tyyppiturvalliset API:t päästä päähän-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

tRPC-virheiden hallittu käsittely
Mukautetut virhetyypit
Datan muuntimet serialisointiin
Virheiden muotoilu ja kenttäkohtainen validointipalaute

← Takaisin: tRPC:n tyyppiturvalliset API:t päästä päähän