Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Don't Be Afraid of the JavaScript Stack Trace

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.

Jennifer Bland

March 08, 2019
Tweet

More Decks by Jennifer Bland

Other Decks in Programming

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