Don't Be Afraid of the JavaScript Stack Trace

At some point, your code will not work. You could spend hours trying to google for a solution. Instead, use the JavaScript stack trace to find the problem. A beginner-friendly overview of the JavaScript stack trace and tips on how to use it.

Transcript

1. Don’t Be Afraid of the
   Javascript Stack Trace
   Jennifer Bland
   

   View Slide

2. Jennifer Bland
   Sr. Software Engineer | Google
   Developers Expert
   jenniferbland.com
   codeprep.io
   

   View Slide

3. 3 Truths 1 Lie
   • I saw the only Gold Medal won by

   Great Britain
   • I saw the only medal won by Mongolia
   • I was an Olympic Torch Runner
   • I attended the Opening Ceremony
   

   View Slide

4. Background Terminology
   • Call Stack
   
   • Heap
   
   • Queue
   
   • Concurrency Model
   

   View Slide

5. Call Stack
   

   View Slide

6. Heap
   • mostly unstructured region of memory
   
   • memory allocation to variables and objects happen here
   
   • finite in size
   

   View Slide

7. Queue
   • list of messages to be processed and the associated
   callback functions to execute
   
   • messages executed by call stack
   
   • message processing ends with stack is empty
   

   View Slide

8. What is the Stack Trace?
   • what functions were called
   
   • in what order
   
   • from which line and file
   
   • with what arguments
   

   View Slide

9. Stack Trace Demo
   

   View Slide

10. 5 Levels of Logging
    • debug
    
    • info
    
    • log
    
    • warn
    
    • error
    

    View Slide

11. View Slide

12. View Slide

13. Chrome
    

    View Slide

14. Firefox
    

    View Slide

15. console.table()
    • display objects as a table
    
    • click on headers to sort
    
    • works with objects of objects
    

    View Slide

16. console.trace
    

    View Slide

17. View Slide

18. Why use console.trace()
    • easier than writing a series of console.log
    
    • remember to remove only one line for production
    
    • shows file where it was called
    
    • shows line number where it was called
    

    View Slide

19. Debug
    • find & locate the code for a particular function
    

    View Slide

20. Why Do Error Occur?
    •EvalError
    
    •InternalError
    
    •RangeError
    
    •ReferenceError
    
    •SyntaxError
    
    •TypeError
    
    •URIError
    
    •MyCustomError
    

    View Slide

21. window.onerror()
    window.onerror = function(message, file, line, col, error) {
    
    // send crash information back to your servers
    
    console.log(error.stack);
    
    }
    

    View Slide

22. error event
    window.addEventListener("error", function(error) {
    
    // send crash information back to your servers
    
    console.log(error.stack);
    
    }
    

    View Slide

23. 3 Truths 1 Lie
    • I saw the only Gold Medal won by

    Great Britain
    • I saw the only medal won by Mongolia
    • I was an Olympic Torch Runner
    • I attended the Opening Ceremony
    

    View Slide