Debug School 3: Reading Error Messages 2

This is part 3 of the Debug School video series. It will cover reading stack traces within error messages: you know, the scare part of your error messages.

Transcript

The following transcript was automatically generated by an algorithm.

00:00 : hello welcome to the bug school this
00:02 : time reading errormsgs part 2 remember
00:07 : this big intimidating blob of text
00:09 : that's called a stack trace and it is a
00:12 : big reason why error messages looks so
00:15 : scary especially for beginners but if
00:18 : you want to get better you have to face
00:20 : your fears
00:21 : and so this time we're going to focus on
00:24 : how to read the statues and get the most
00:26 : out of it what our stack trace is good
00:29 : for when the run time error occurs it
00:33 : occurs at a certain location in the code
00:36 : usually it has an accompanying stack
00:39 : trace the stack trace tells you how the
00:41 : code got to that place and there are a
00:45 : few situations where reading the stack
00:47 : trace is helpful one when you determine
00:51 : the mistake is not necessarily in the
00:53 : function where the error location lives
00:55 : but rather in the way or in the context
00:58 : in which it was called to when the
01:01 : location of the runtime error is not in
01:03 : your own code but inside of a third
01:06 : party library or a framework but before
01:10 : we get into how the stack trace helps us
01:12 : with those things let me show you what
01:14 : it is imagine if you were the JavaScript
01:18 : interpreter and you were responsible for
01:21 : executing this JavaScript code and all
01:24 : you had were a pencil and a piece of
01:27 : paper how would you go about it well
01:32 : let's see first I would use a little
01:35 : arrow marker to indicate the current
01:37 : line of the program that I'm executing
01:39 : at any given time this is technically
01:42 : called the program counter so I'm going
01:45 : to start on line 1 and here a variable
01:48 : named result is declared in order to
01:51 : remember its value I'm going to make a
01:53 : storage area for it which is just a two
01:57 : column table where the left column is
01:59 : the name of the variable and the right
02:02 : column is its value now what's the value
02:06 : of the result well result is being set
02:09 : to the result of a function call and
02:12 : that means that before I get the value I
02:15 : need to evaluate that function call
02:18 : first to do that I need to move the
02:21 : function pointer to the start of that
02:24 : function namely the square of difference
02:27 : function and that is line 9 but I need
02:31 : to remember to come back here to line 1
02:33 : when the function call completes so line
02:36 : 1 is called the call site it is the
02:40 : location where a function call was made
02:42 : so to help me
02:44 : where that is I'm going to write down
02:47 : line one here I'm also going to write
02:50 : down the way in which the function was
02:52 : called here so that I have a reference
02:54 : of what the call parameters are so now
02:58 : we're good to go in the square of
02:59 : difference function first I need to make
03:02 : some space to store the function
03:04 : parameters I have x and y and their
03:07 : values are taken from the call site and
03:09 : those are 4 and 7 then moving on to line
03:14 : 10 here we declare a variable diff which
03:18 : takes on the value of x minus y that's 4
03:21 : minus 7 and what is the value of 4 minus
03:25 : 7 that's right is negative 3
03:32 : moving on we declare a result variable
03:35 : in order to find out its value though we
03:38 : have to make a function call to the
03:41 : square function so square is declared
03:44 : here on line four I will jump the
03:48 : program counter there but first let me
03:51 : make space for the result variable
03:57 : okay now I will record the location of
04:00 : this call site and that's line 11 and I
04:04 : will also write down the invocation of
04:06 : the function call square of negative
04:09 : three as negative three is the current
04:12 : value of diff
04:16 : in the square function now I will first
04:19 : make space for the parameters of that
04:21 : function there is just one parameter N
04:24 : and it has the value of negative 3 next
04:28 : line
04:30 : the variable result is declare and it is
04:34 : set to the value of n times n which
04:36 : negative 3 times negative 3 is well it
04:40 : what it what is it
04:42 : that's right 9 the next line just
04:46 : returns the value of the result which
04:49 : again is 9 so with that we can resolve
04:52 : the function call square of negative 3
04:55 : to the value 9 so where do I go now
04:59 : Oh line 11 it's a good thing that I
05:03 : wrote it down I have a terrible memory
05:06 : since this function has returned or has
05:10 : terminated
05:11 : I can now clear out its variables
05:13 : because we no longer need it so back on
05:16 : line 11 we were waiting for the value of
05:19 : result which we now know is 9 in the
05:24 : next line we just returned this 9 again
05:27 : so I'm gonna say that the call to the
05:30 : square of difference function also
05:32 : resolves to 9 now I go back to its call
05:36 : site which as I wrote down here is line
05:38 : 1
05:40 : and I can now also clear out the
05:42 : variables for this function call on line
05:46 : one result also gets its value which has
05:49 : been resolved to nine and then the next
05:53 : line after that console dot log prints
05:56 : result is nine and there we have it we
06:00 : have walked through this program line by
06:02 : line manually by hand but I made you go
06:06 : through all of this and I still haven't
06:07 : told you what a stack trace is don't
06:10 : worry I'm gonna tell you right now let's
06:13 : rewind to here and let's say that there
06:16 : is a mistake on line six of the program
06:20 : in that the variable result was
06:24 : misspelled what happens well the program
06:27 : must halt because the variable result
06:30 : doesn't exist and therefore there is no
06:34 : way to return its value we have to call
06:37 : it quits and we're going to output an
06:39 : error message saying results is not
06:41 : defined but we could do better than that
06:44 : because look at all this information
06:46 : here on the right if we give the
06:48 : programmer this information it could
06:51 : help them figure out what went wrong and
06:53 : how things get this way most programming
06:56 : environments JavaScript included will
06:59 : print out the series of line numbers in
07:01 : this stack in reverse order in our case
07:04 : it would look something like this with
07:08 : this information the programmer who
07:10 : encounters this error and has to debug
07:12 : the program will know what the series of
07:14 : function calls that occurred were which
07:17 : led to the error now let me show you an
07:22 : actual stack trace I will pick up where
07:25 : I left off in reading error messages
07:27 : part one with a bob exercise I have
07:30 : secretly added some code to Bob's test
07:33 : suite which may or may not cause things
07:35 : to break let me run the tests and that's
07:40 : an error input trim is not a function
07:44 : the error location is Bob batcher yes
07:47 : line four and here is calling the method
07:50 : input that trim which should be okay if
07:54 : input is a string because strings have a
07:57 : trim method in newer browsers anyway so
08:00 : possibly what's happening is that the
08:03 : hey method was called with something
08:05 : other than a string as its first
08:07 : parameter now there are a few different
08:10 : ways to test this hypothesis but with
08:13 : dispatch arrays already here I can look
08:16 : down to see where the method was called
08:18 : from the next line in the stack trace is
08:21 : Baptist aspect that Jas line 90 so
08:25 : bringing that up shows that this line as
08:28 : it turns out the hey method is in fact
08:31 : being called with an object as its first
08:33 : argument so my hypothesis was correct we
08:38 : can verify this further though by
08:40 : swapping in a string here and see that
08:42 : the error goes away as a result and it
08:45 : does now to fix this test if it were a
08:50 : requirement we might add a conditional
08:52 : that says if the subject is not a string
08:55 : then just return the string whatever
09:00 : and that passes so the lesson is if
09:03 : looking up the location of the error it
09:05 : doesn't give you enough information to
09:07 : figure out the problem sometimes
09:09 : drilling down further into the stack
09:11 : trace will now I want to dig deeper into
09:16 : this stack trace the next location is
09:19 : Jasmine Thaddeus 1064 this is the source
09:24 : code from the Jasmine framework and you
09:26 : can view its source code just the same
09:29 : this is the line in question and it is
09:32 : calling this dot func using the apply
09:35 : method of function which is just a fancy
09:38 : way of calling a function while also
09:40 : setting its context within it now which
09:43 : function do you think this that func is
09:47 : the answer is found by going back up a
09:50 : line in the stack trace and we are back
09:52 : in this test case so since the line
09:55 : number is 90 and it belongs to this
09:58 : function this function must be the
10:01 : function that was invoked on the stack
10:03 : trace line below it ie this that func
10:08 : similarly when the hey method was called
10:11 : here we can find the location where hey
10:14 : is defined by going up a line in the
10:18 : stack trace and now we're looking at
10:21 : Bob's definition of the hey method
10:25 : now let's go even deeper down the stack
10:28 : to Jazmin Dodgers line 2096
10:32 : and we see here that this is where the
10:35 : execute method that we just saw here is
10:38 : called we see something like an array of
10:42 : blocks here let's go down even deeper to
10:47 : line 2049 and here we see a start method
10:52 : being defined in a sort of queue object
10:55 : which presumably is called to initially
10:59 : start running all of the tests and if we
11:02 : go even deeper we see the place where
11:05 : the start method is called
11:07 : I could keep going if I wanted to but I
11:11 : think you see that this is a chain of
11:12 : events which you can follow backwards
11:15 : one by one and it's almost like going
11:18 : back in time that you can reconstruct
11:21 : what happened and how things got to
11:24 : where they are when the error happened
11:26 : and that is really cool what's also
11:29 : really cool is that by looking into the
11:31 : stack trace and looking up the coat
11:33 : locations you can actually dig into the
11:35 : internals of the libraries you're using
11:37 : and be able to figure out what they do
11:39 : and how they do it as we have already
11:41 : started to do with the Jasmine testing
11:44 : framework I mean we've already learned
11:46 : that there is some sort of queuing
11:48 : mechanism for running the tests and
11:50 : presumably each test case is an item in
11:53 : that queue to be executed sequentially
11:55 : one by one maybe understanding and
11:59 : working with third-party code although
12:01 : it seems intimidating at first is
12:03 : actually a very powerful technique for
12:05 : debugging and I'm going to cover that in
12:08 : more depth in a separate lesson I'm also
12:11 : going to talk more about the cost Act in
12:13 : the lesson on using debuggers this
12:16 : concludes the lesson to help you retain
12:18 : this information so that you can
12:20 : actually remember to use it when you
12:22 : need it I have prepared a couple of
12:24 : exercises for you please do them for
12:28 : your remembrance until next time