Challenge 4: Multi-Process Debugging

[00:00:00]
>> Mike North: Here is your exercise. So, has anyone tried adding something to the cart? I know you did. You tried adding something to the cart and it turns out there's a bug, where you're getting like, can I call map of undefined, or something? It's, our server side is complaining.

[00:00:15]
It's trying to do something and it can't do it. So I just through my intuition and the fact that I set this bug up for you personally, tells me there might be some misalignment between the way the client is providing like data and the server is receiving data.

[00:00:31]
Like maybe the server expects something, and the client is giving it something else. So I want us to use this multi-process debugging feature, to basically set break points where the client is just about to send the data, so he can take a look at it. And then set a break point on the server side where the server has just received the data.

[00:00:50]
And then that 'll help us understand like what's going on, in a way that we can sort of just step straight from client, let the network request go out and then pick up debugging on the server side in our other process. So you have both running at the same time, break points in both.

[00:01:05]
Where you want to set the break point for the client side, it's right in the save cart function. I'm saving you the trouble of tracking through the react code and finding ultimately that the fetch is sent from this file here. So oops, I appear to have a broken link.

[00:01:22]
Client data cart store. You'll just have to, I'll fix it, but cart-store and save cart.
>> Mike North: So it's this function right here. So this is probably an interesting area to look. On the server side, see if this works. Yes, that works. So, this is in the cart route, under the put items handler.

[00:01:51]
So that would be here, at least for now, it's line 49. I reserve the right to rebase, fixes in and to keep this code base up to date, but it's this thing here. So you'll probably wanna set some break points somewhere around this area before the data start getting chewed on just so you can take a look.

[00:02:11]
Here we're finally getting to deal with a complicated type of new language feature, it's called an async function. It is a generator function, sorry it is a function that returns a promise and you can pause execution in the middle of this function, which is pretty cool. This is a really new idea and I'm showing this to you because you'll have no more difficulty walking through this advanced thing, than you would just stepping through a regular function.

[00:02:43]
You'll see the call stacks stitched together exactly as you'd want to see them, and it should be a pretty seamless experience. The reason is TypeScript has had a sync and a weight around for a very long time compared to how long they've been around in JavaScript. So they had it for a while, and that has in some way has informed the JavaScript's standards body, as to how it should work and how it should be implemented.

[00:03:10]
So you'll set those two breakpoints and you'll use the above guidelines to create, attach and launch configurations. You don't have to worry about this, it's been done for you. Find and fix the problem and the idea is you should be able to seamlessly transition between server and client.

[00:03:26]
Because it's one set of break points, two processes, and you can toggle between them easily.