Debugging and Error Boundary in React.js

React JSJavascript LibraryFront End Technology

Understanding error messages

If there is an error in code execution react displays a readable error message on screen with line number. We should understand the error message to correct it.

We have a below file App.js having one input element. On change of input value we see the console text −

import React, {Component} from 'react';
class App extends Component {
   onChangeHandler=(event)=>{
      console.log(event.target.value);
   }
   render(){
      return (
         <div >
            <input name="myInput" onChange={(event)=>this.onChangeHandler(event)}/>
         </div>
      );
   }
}
export default App;

Now, if we mistakenly add event.input.value instead of event.target.value or any other error, React will display an error message −

From the error line number shown on web page we can correct it.

Debugging code

We can debug the actual react code using inspect of browser.

  • Press F12 or right click on browser and do inspect
  • Navigate to source tab which is adjacent to console tab
  • Inside source tab you can find the src folder
  • Inside src folder we can find the required react js file
  • Add a break point where you want to debug and process from UI
  • Once we get the debugger, we can point on the currently executing code to see its values
  • This can be really useful to solve logical errors if any

Use of React Developer tool

The React developer tool is an extension which once added gives the insights on React component

It’s helpful to see the properties and state values of React components at runtime.

Click F12 or right click on browser and do inspect element. We will see a react tab. Click on it.

Whenever we click on the html elements in elements tab in left side we will see properties and values associated with it.

raja
Published on 04-Sep-2019 08:48:49
Advertisements