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