Debugging is the most frustrating aspect of programming for beginners and professionals alike. In this series, we explore the overall thought-process behind debugging in general and then we dive into a handful of bugs in the Node and React environments specifically. This is a great intro to the debugging process for beginners and for those new to React, this is a good place to see typical React errors and how to read the crash logs.

Node Crashes

In video one, we set up a simple Node/Express project and induce a couple crashes on purpose. We then debug the crashes very slowly while explaining the step-by-step thought process involved. We use the error logs to guide our process and narrow down the root of the cause.

Runtime Errors

In this video, we explore errors that result in unexpected outcomes rather than crashes. These are called runtime errors and they are typically harder to debug since they do not come with error logs, stack traces or any indication as to the root cause. We encounter a few runtime errors and step through he code until we find the mistakes.

Simple React Bugs

In this video, we set up the React side of the project and encounter simple bugs on the frontend: typos, import errors and such. We use the browswer console as well as the Webpack shell to identify these bugs and correct them. The process is fundamentally the same but the tools are different and reading React errors takes some getting used to.

"Full Stack" Bugs

In this video, we deal with bugs that impact both sides of the stack. Often, the data we get from an API may not match the structure we expect or the API itself may not support the request. We explore these kinds of errors and how to correct them when combining both the Node and React environments.