Debugging React Applications

 

🔎🐞⚛️

Cecelia Martinez

Community Lead, Replay.io

@ceceliacreates

@ceceliacreates

How many days this week did you spend time debugging?

@ceceliacreates

Developers spend up to half their time debugging and maintaining software.

@ceceliacreates

@ceceliacreates

Debugging effectively requires the right process, tools, and some practice.

@ceceliacreates

Process

@ceceliacreates

Debugging Process

  • Reproduce the issue
  • Identify expected behavior
  • Define the problem
  • Isolate the issue
  • Trace the root cause
  • Identify potential solutions

Reproduce the issue

Recreate the issue in a debugging environment

  • Use a debugging recorder like Replay
  • Run version of codebase with bug locally
  • Create a minimal reproducible example using a code playground/sandbox

@ceceliacreates

Identify expected behavior

What is the application supposed to do instead?

  • A bug is a coding error
  • UX issues or product requests are not bugs
  • What is the process when it works?

@ceceliacreates

Define the problem

What are we trying to fix?

  • How does the bug deviate from expected behavior?
  • Expected behavior: App validates credit card # is 16 digits before processing
  • Actual behavior: App tries to process credit card # with less than 16 digits and payment processor fails

@ceceliacreates

Isolate the issue

Where does the problem occur?

@ceceliacreates

⁉️

Isolate the issue

Where does the problem occur?

@ceceliacreates

  • Error message call stack
  • What lines of code executed
  • Validate working code

@ceceliacreates

Trace the root cause

Follow the code to the bug source

  • Validate code functionality at each step
  • Examine parameter values and types
  • Examine return values
  • Examine control flow logic
  • Identify when bug deviates from expectations

@ceceliacreates

Identify potential solutions

Where do we go from here?

  • Scope of the bug
  • Areas of the codebase impacted by changes
  • Larger underlying issues
  • Opportunity for improvement

@ceceliacreates

Tools

@ceceliacreates

React DevTools

@ceceliacreates

Replay.io

  • Record browser session or automated tests
  • React DevTools built in for debugging
  • Retroactively add console logs
  • Add comments
  • Code heat maps
  • Coming soon: Improved React DevTools and Redux DevTools support
  • Join us at replay.io/discord!

@ceceliacreates

Practice

@ceceliacreates

  • Reinforce process

  • Identify patterns

@ceceliacreates

Reinforce process

 

Different apps, languages, and developers,

same process

@ceceliacreates

Identify patterns

  • Component rendering
  • State & Hooks
  • React > JS considerations

@ceceliacreates

@ceceliacreates

State & Hooks

@ceceliacreates

React != JavaScript

  • Overriding default browser behavior
    • Navigation
    • Form submissions
  • CSS styling from JS
  • Viewing Source Maps

@ceceliacreates

Q&A

Debugging React Applications

By Cecelia Martinez

Debugging React Applications

Developers spend up to half their time debugging code, but often struggle to find an effective and efficient debugging process. While frameworks like React make the development process easier, they can add complexity when issues arise. This talk will provide an approach to debugging React applications. We’ll review debugging approaches, using tools effectively, and React-specific bugs related to component rendering, state management, and more.

  • 184