フロントエンドの エラー周りで最近知ったこと

「アカツキ × オズビジョン 技術交流会 」の発表資料です。
https://oz-vision.connpass.com/event/74569/

サンプルコード
https://github.com/mamoru0217/react-error-boundary-sample

Transcript

1. ϑϩϯτΤϯυͷ
   ΤϥʔपΓͰ࠷ۙ஌ͬͨ͜ͱ 
   
   ΞΧπΩ
   º
   ΦζϏδϣϯ
   ٕज़ަྲྀձ-5
   ఱ໺
   Ѯ
   
   .BNPSV
   "NBOP
2. ࣗݾ঺հ w 8FCΤϯδχΞʢ3BJMT
   
   3FBDUʣ
   w ࠷ۙ͸413*/5ͰαʔϏεߟ͑ͯ·͢ɻ
   w ஌ݟ͋Δਓ
   
   ࿩ฉ͖͍ͨਓ
   ͍ͨΒ
 ੠͔͚͍ͯͩ͘͞ɻ
3. &SSPS
   #PVOEBSZ
   ͱ͸ w 3FBDUͷ৽ػೳ
   w DPNQPOFOU%JE$BUDI
   ͱ͍͏ϥΠϑαΠΫϧϝιουΛ࣮૷ͨ͠ίϯϙʔ ωϯτͷ͜ͱɻ
   w ࢠίϯϙʔωϯτπϦʔͰൃੜͨ͠ΤϥʔΛϋϯυϦϯά͢Δ
4. ࢖͍ํ class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } // ৽͍͠ϥΠϑαΠΫϧϝιου componentDidCatch(error, info) { this.setState({ hasError: true }); // ֎෦αʔϏε΁ͷΤϥʔ௨஌΋͜͜ʹॻ͘ɻ logErrorToMyService(error, info); } render() { if (this.state.hasError) { // ͜͜ʹϑΥʔϧόοΫͷUIΛهࡌ͓ͯ͘͠ɻ // ࢠίϯϙʔωϯτͰΤϥʔ͕ൃੜͨ͠৔߹͸ɺ͜Ε͕render͞ΕΔɻ return <h1>Something went wrong.</h1>; } return this.props.children; } }
5. ࢖͍ํ <ErrorBoundary> <MyWidget /> </ErrorBoundary> ίϯϙʔωϯτͱͯ͠ར༻͢Δ
6. %&.0 w αϯϓϧίʔυ
   w IUUQTHJUIVCDPNNBNPSVSFBDUFSSPSCPVOEBSZTBNQMF
7. ྑ͍఺
   w 3FBDUʹ͓͚ΔΤϥʔϋϯυϦϯάͷجຊతͳํ๏ʹ
   w Τϥʔൃੜ࣌ͷ6*ͷڍಈ΍֎෦αʔϏε΁ͷΤϥʔϨϙʔτ͸&SSPS
   #PVOEBSZ
   ʹॻ͍͓͚ͯ͹Φοέʔ
   w ίϯϙʔωϯτͱͯ͠ѻ͑Δ
   w ςετ΋ॻ͖΍͍͢ͷͰ͸
8. ஫ҙ఺ͱ͔
   w &SSPS
   #PVOEBSZ
   ͷಋೖʹ͋ΘͤͯɺͲͷ
   &SSPS
   #PVOEBSZ
   Ͱ΋ัଊ͞Εͳ͍Τϥʔʢ6ODBVHIU
   &SSPSʣ ͕ൃੜͨ͠৔߹
   ίϯϙʔωϯτπϦʔશମ͕
   VONPVOU
   ͞ΕɺඇදࣔʹͳΔɻ
   
   w Τϥʔ͕ൃੜͨ͠ͱ͖ʹɺʮಈ͍͍ͯΔΑ͏ʹݟ͑ΔʯΑΓ΋ʮಈ͍ͯͳ͍ࣄ͕Θ͔Δʯ΄͏͕͍͍ͱ͍ ͏൑அɻIUUQTSFBDUKTPSHCMPHFSSPSIBOEMJOHJOSFBDUIUNMOFXCFIBWJPSGPS VODBVHIUFSSPST
   w Ͳ͜ʹ഑ஔ͢Δ͔ʁ
   w ࢓༷มߋ΋౿·͑ͯɺ͋ΔύʔπͰΤϥʔ͕ൃੜͨ͠ͱ͖ʹͲ͜·ͰΛӨڹൣғʹͯ͠Α͍͔ʁͰߟ͑Δɻ
   w 
   ྫͱͯ͠ɺ'BDFCPPL
   .FTTFOHFS
   ͸αΠυόʔ΍
   JOGP
   QBOFMɺνϟοτ෦෼ͳͲ͸ͦΕͧΕ
   &SSPS
   #PVOEBSZ
   Ͱϥοϓͯ͠Δͦ͏Ͱ͢ɻ
   IUUQEBDLEJWFIBUFCMPKQFOUSZ
   w &SSPS#PVOEBSZ͕ෳ਺͋Δ৔߹͸ɺDMPTFTU
   ͳ΋ͷ͕ར༻͞ΕΔɻIUUQTSFBDUKTPSHCMPH FSSPSIBOEMJOHJOSFBDUIUNMXIZOPUVTFUSZDBUDI
9. ͦͯ͠ɺΤϥʔͱ͍͑͹
10. μΠΞϩά͸໘౗ w XJOEPXBMFSU
    ΍
    XJOEPXDPOpSN
    Ͱ͸ࡁ·ͤΒΕͳ͍ͱ͖΋͋Δɻ
    w ͦ΋ͦ΋ɺμΠΞϩά͸Τϥʔͷͱ͖͚ͩʹ࢖͏ύʔπ͡Όͳ͍͢Δ΋ͷ͡Όͳ͍Ͱ͢ Ͷɻ͔ͬͯΤϥʔͷͱ͖ʹग़͢͜ͱͷ΄͏͕গͳ͍ʁ
    w ͦ͏ͳΔͱɺࣗલͰ࣮૷͢Δ͜ͱʹͳΔ͚Ͳɺ·࣮ͣ૷ํ๏͕͋Δɻ͔ͭɺ
    w ʮάϩʔόϧφϏήʔγϣϯʹμΠΞϩά͕ӅΕͪΌͬͯ·͢ʂʯͱ͔ى͜Δɻ[JOEFY ඞਢͳͷͰ೰ΈͷλωʹͳΓ͕ͪɻ
    w ࢹ֮తʹ8FCΛӾཡ͍ͯ͠ͳ͍ਓʹ͸ΞΫηγϒϧͰ͸ͳ͍ͱ͍͏࿩΋ɻ
    w ͨͩͷEJWͰ࣮૷͞Ε͍ͯΔ৔߹ɺͦΕ͕ຊ౰ʹzμΠΞϩʔάz
    ͔Ͳ͏͔͸Θ͔Βͳ͍ɻ
11. ͦ͜Ͱ
    EJBMPHཁૉ
    w )5.-ʢ
    קࠂʣ৽ػೳʂ
    w [JOEFYແࢹͰτοϓϨϕϧʹදࣔͯ͘͠ΕΔɻ
    w ౰વελΠϧ΋͋ͯΒΕΔɻ
    w EJBMPHͳͷͰμΠΞϩάͰ͋Δɻ
12. ࠓͩͱ$ISPNFͰ࢖͑Δ
13. ࢖͍ํ <dialog> <p>Something went wrong.</p> </dialog> <dialog open> <p>Something went wrong.</p> </dialog>
14. ࢖͍ํ //—————————————— // html //—————————————— <dialog id=‘dialog’> <p>Something went wrong.</p> </dialog> //—————————————— // javascript //—————————————— const dialog = document.querySelector('#dialog') // μΠΞϩά։͘(open෇༩ʣ dialog.show() // μΠΞϩάด͡Δ(open֎͢ʣ dialog.close()
15. ͦͷଞ
    w
    CBDLESPQͱ͍͏ٙࣅཁૉ͕࢖͑ɺμΠΞϩάͷഎܠͷελΠϧͷࢦఆ ΋Ͱ͖Δɻ
    w IUUQTHJUIVCDPN(PPHMF$ISPNFEJBMPHQPMZpMMCBDLESPQ
    w EJW
    JEbEJBMPHPWFSMBZ`EJWͱ͔ॻ͔ͳ͍͍ͯ͘
16. ·ͱΊ w React16͔Βಋೖ͞ΕͨɺError Boundary ͰΤϥʔϋϯυϦϯάͷํ๏͕ ໌շʹͳͬͨɻ
    • Τϥʔൃੜ࣌ͷڍಈ΋มΘ͍ͬͯΔͷͰɺΞοϓσʔτͷࡍʹ͸ಋೖඞ ਢͩͱࢥΘΕΔɻ w <dialog>ཁૉ͕ྑͦ͞͏ɻ w ͜Ε͔ΒରԠϒϥ΢β΋૿͍͑ͯ͘͸ͣͳͷͰɺ࣌ظΛݟͯੵۃతʹ࢖ ͍͍ͨɻ