Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

Avatar for Mamoru Amano

Mamoru Amano

January 17, 2018
Tweet

More Decks by Mamoru Amano

Other Decks in Programming

Transcript

  1. ࢖͍ํ 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; } }
  2. ஫ҙ఺ͱ͔ w &SSPS#PVOEBSZͷಋೖʹ͋ΘͤͯɺͲͷ&SSPS#PVOEBSZͰ΋ัଊ͞Εͳ͍Τϥʔʢ6ODBVHIU&SSPSʣ ͕ൃੜͨ͠৔߹ίϯϙʔωϯτπϦʔશମ͕VONPVOU͞ΕɺඇදࣔʹͳΔɻ  w Τϥʔ͕ൃੜͨ͠ͱ͖ʹɺʮಈ͍͍ͯΔΑ͏ʹݟ͑ΔʯΑΓ΋ʮಈ͍ͯͳ͍ࣄ͕Θ͔Δʯ΄͏͕͍͍ͱ͍ ͏൑அɻIUUQTSFBDUKTPSHCMPHFSSPSIBOEMJOHJOSFBDUIUNMOFXCFIBWJPSGPS VODBVHIUFSSPST w

    Ͳ͜ʹ഑ஔ͢Δ͔ʁ w ࢓༷มߋ΋౿·͑ͯɺ͋ΔύʔπͰΤϥʔ͕ൃੜͨ͠ͱ͖ʹͲ͜·ͰΛӨڹൣғʹͯ͠Α͍͔ʁͰߟ͑Δɻ w ྫͱͯ͠ɺ'BDFCPPL.FTTFOHFS͸αΠυόʔ΍JOGPQBOFMɺνϟοτ෦෼ͳͲ͸ͦΕͧΕ&SSPS #PVOEBSZͰϥοϓͯ͠Δͦ͏Ͱ͢ɻIUUQEBDLEJWFIBUFCMPKQFOUSZ w &SSPS#PVOEBSZ͕ෳ਺͋Δ৔߹͸ɺDMPTFTUͳ΋ͷ͕ར༻͞ΕΔɻIUUQTSFBDUKTPSHCMPH FSSPSIBOEMJOHJOSFBDUIUNMXIZOPUVTFUSZDBUDI
  3. ࢖͍ํ //—————————————— // html //—————————————— <dialog id=‘dialog’> <p>Something went wrong.</p>

    </dialog> //—————————————— // javascript //—————————————— const dialog = document.querySelector('#dialog') // μΠΞϩά։͘(open෇༩ʣ dialog.show() // μΠΞϩάด͡Δ(open֎͢ʣ dialog.close()