Debugging React App

• Understanding error message
• Finding Logical Errors by using Dev Tools & Source maps

瀏覽器source map工具

Source=>指定文件=》指定某行=》跑=》用工具看上一步下一步各值的變化

• React develper tools in chrome store

React Developer Tools

=>components 可以調(diào)整查看props state

• Error boundaries (react 16+)

Error boundaries (react 16+)

only use when u know it may be fail and u can control it
=>to show customer ur cutomer error message
Error boundary.js

import React,{Component} from 'react'
export default class ErrorBoundary extends Component{
  state={
    hasError:false;
    errorMessage:''
  }
  componentDidCatch = (error,info)=>{
    this.setState({hasError:true,errorMessage:error});
  }
  render(){
    if(this.state.hasError){
      return <h1>{this.state.errorMessage}</h1>
    }else{
      return this.props.children
    }
  }
}


....
<ErrorBoundary>
  <Person/>
</ErrorBoundary>

Useful Resources & Links

• Error Boundaries: https://reactjs.org/docs/error-boundaries.html
• Chrome Devtool Debugging: https://developers.google.com/web/tools/chrome-devtools/javascript/