React Academy · Oppitunti

Virheestä palautuminen ja ristiriitojen ratkaiseminen

Palauttakaa aiempi tila mutaation epäonnistuessa ja käsitelkää palvelimen hylkäämät optimistiset muutokset hallitusti

Oppitunti 3/413 vaihetta

Virheestä palautuminen ja ristiriitojen ratkaiseminen on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Palautuksen monimutkaisuus kasvaa mutaation tyypin mukaan

Optimistisen lisäyksen palauttaminen (kohteen poistaminen) tai poistamisen palauttaminen (kohteen palauttaminen) on suoraviivaista. Päivityksen palauttaminen on monimutkaisempaa: täsmälleen aiempi arvo on palautettava. Jos kohdetta on päivitetty optimistisesti useita kertoja, jokainen aiempi arvo on tallennettava erikseen, ei pelkästään alkuperäistä palvelimen tilaa.

Päivityksen ristiriitatilanne

Ajatellaan seuraavaa tilannetta: palvelimella kohteen arvo on Z. Päivitätte sen optimistisesti arvoksi X. Kun pyyntöänne käsitellään, toinen käyttäjä päivittää saman kohteen palvelimella arvoksi Y. Pyyntönne saapuu palvelimelle, joka hylkää sen (ristiriita). Palautuksen kohteena on Z, mutta palvelimen nykyinen tila on Y. Arvon Z palauttaminen korvaisi arvon Y virheellisesti.

Virheen sattuessa tehtävä uudelleenhaku turvallisena oletuksena

Turvallisin tapa palauttaa päivitykset on hakea kohde palvelimelta uudelleen jokaisen mutaatiovirheen jälkeen sen sijaan, että palauttaisitte paikallisesti tallennetun tilannevedoksen. Näin näytätte aina palvelimen auktoritatiivisen tilan riippumatta siitä, mitä muut käyttäjät ovat samanaikaisesti muuttaneet. Uudelleenhaku on hitaampaa, mutta aina oikein.

HTTP 409 Conflict -tila

Hyvin suunniteltu API palauttaa HTTP 409 Conflict -tilan, kun optimistinen päivitys epäonnistuu samanaikaisen muutoksen vuoksi. Vastauksen runko sisältää yleensä palvelimen nykyisen tilan. Virheenkäsittelijän tulee tunnistaa 409-ristiriita, päivittää paikallinen tila vastausrunkoa käyttäen palvelimen nykyiseen arvoon ja ilmoittaa käyttäjälle, ettei hänen muutoksiaan tallennettu.

Idempotenssi turvallisia uudelleenyrityksiä varten

Idempotentti mutaatio tuottaa saman tuloksen, vaikka se suoritettaisiin useita kertoja. Kun mutaatiot suunnitellaan idempotenteiksi (käyttämällä PUT-metodia POST-metodin sijaan, sisällyttämällä mukaan resurssin koko tila ja käyttämällä idempotenssiavaimia), pyynnön uudelleenyritys virheen jälkeen on turvallista ilman muutoksen toistumisen riskiä. Tämä yksinkertaistaa palautuslogiikkaa huomattavasti.

Kaksoiskappaleiden estäminen isSubmitting-tilan avulla

Lähetä-painikkeen kaksoisnapsautus voi käynnistää kaksi samanlaista mutaatiota. Estäkää tämä isSubmitting-lipulla: asettakaa sen arvoksi true mutaation alkaessa ja palauttakaa arvo mutaation valmistuessa onnistumisesta tai epäonnistumisesta riippumatta. Poistakaa laukaisuelementti käytöstä, kun isSubmitting on true. Näin päällekkäiset mutaatiot voidaan estää käyttöliittymän tasolla.

Idempotenssiavaimet palvelimen kaksoiskappaleiden estämiseen

Palvelimen suorittamaa kaksoiskappaleiden estämistä varten lisätkää jokaiseen mutaatiopyyntöön yksilöllinen Idempotency-Key-otsake. Luokaa se komennolla crypto.randomUUID(), kun käyttäjä käynnistää toiminnon. Palvelin tunnistaa kaksoiskappaleiset avaimet ja palauttaa saman vastauksen kuin alkuperäisen pyynnön yhteydessä suorittamatta operaatiota uudelleen.

Eventual consistency -tilan ilmaisimet

Kun mutaatiota käsitellään, voitte näyttää hienovaraisen ilmaisimen siitä, ettei optimistista tilaa ole vielä vahvistettu: esimerkiksi pienen sykkivän pisteen, tekstin "Tallennetaan..." tai kohteen pienemmän peittävyyden. Tämä ilmaisee epävarmuuden estämättä vuorovaikutusta. Poistakaa ilmaisin onnistumisen jälkeen tai palauttakaa tila virheen sattuessa.

Virherajat mutaatioiden virheille

Palautuslogiikan odottamattomat virheet (esimerkiksi määrittelemättömän arvon ominaisuuksien käsitteleminen tilaa palautettaessa) voivat kaataa komponentin. Ympäröikää paljon mutaatioita sisältävät komponentit virherajalla, jotta vakavat palautusvirheet näyttävät tyhjän ruudun sijaan hallitun virhenäkymän. Kirjatkaa nämä virheet lokiin vianmääritystä varten.

Versiointi ristiriitojen havaitsemista varten

Luotettava tapa havaita ristiriidat on sisällyttää versionumero tai ETag jokaiseen mutaatioon. Palvelin vertaa asiakkaan lähettämää versiota omaan nykyiseen versioonsa. Jos versiot eroavat toisistaan (toinen päivitys on tehty), palvelin palauttaa tilan 409. Tämä on optimistista samanaikaisuuden hallintaa: oletatte, ettei ristiriitaa ole, mutta havaitsette sen, jos se ilmenee.

Palautuspolkujen testaaminen

Palautuslogiikka jää usein testaamatta, koska verkkovirheitä on vaikea simuloida. Käyttäkää testeissä esimerkiksi Mock Service Worker (MSW) -työkaluja virhevastausten palauttamiseen. Kirjoittakaa erilliset testit seuraaville tapauksille: 409 Conflict -tilan käsittely, verkkoyhteyden aikakatkaisun jälkeinen palautus, kaksoisnapsautusten estäminen ja tilan eheys virheen jälkeen. Virheet piilevät usein juuri näissä poikkeustapauksissa.

Mikä HTTP-tilakoodi ilmaisee ristiriidan

Minkä HTTP-tilakoodin hyvin suunniteltu API palauttaa, kun optimistinen päivitys epäonnistuu toisen käyttäjän tekemän samanaikaisen muutoksen vuoksi?

Oppitunnin yhteenveto: palautukset ja ristiriidat

Päivityksen palauttaminen on monimutkaisempaa kuin lisäyksen tai poiston: hakekaa aina tiedot uudelleen virheen sattuessa, jotta vältätte vanhoihin tilannevedoksiin liittyvät ongelmat. HTTP 409 Conflict ilmaisee optimistisen samanaikaisuuden hallinnan epäonnistumisen; käyttäkää vastausrunkoa palvelimen nykyisen tilan palauttamiseen. Suunnitelkaa mutaatiot idempotenteiksi, jotta niiden uudelleenyritys on turvallista. Estäkää kaksoiskäynnistykset isSubmitting-tilan ja palvelimen idempotenssiavainten avulla. Testatkaa palautuspolut erikseen käyttämällä MSW:tä virheiden simulointiin.

Aloita maksutta

Opi React 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
88
Oppitunnit
324

Usein kysytyt kysymykset

Onko oppitunti ”Virheestä palautuminen ja ristiriitojen ratkaiseminen” ilmainen?

Kyllä – oppitunnin ”Virheestä palautuminen ja ristiriitojen ratkaiseminen” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Virheestä palautuminen ja ristiriitojen ratkaiseminen”?

Palauttakaa aiempi tila mutaation epäonnistuessa ja käsitelkää palvelimen hylkäämät optimistiset muutokset hallitusti Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

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

Kuinka kauan ”Virheestä palautuminen ja ristiriitojen ratkaiseminen”-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ä React Academy-oppitunnilla?

Kyllä. Jokainen React 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. Mitä optimistinen käyttöliittymä on ja milloin sitä käytetään
  2. Optimististen päivitysten manuaalinen toteuttaminen
  3. Virheestä palautuminen ja ristiriitojen ratkaiseminen
  4. Optimistiset mallit React Querylla ja Zustandilla
← Takaisin: React Academy