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 full-size slide

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

    View full-size 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 full-size slide

  4. Background Terminology
    • Call Stack

    • Heap

    • Queue

    • Concurrency Model

    View full-size slide

  5. Heap
    • mostly unstructured region of memory

    • memory allocation to variables and objects happen here

    • finite in size

    View full-size slide

  6. 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 full-size slide

  7. What is the Stack Trace?
    • what functions were called

    • in what order

    • from which line and file

    • with what arguments

    View full-size slide

  8. Stack Trace Demo

    View full-size slide

  9. 5 Levels of Logging
    • debug

    • info

    • log

    • warn

    • error

    View full-size slide

  10. console.table()
    • display objects as a table

    • click on headers to sort

    • works with objects of objects

    View full-size slide

  11. console.trace

    View full-size slide

  12. 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 full-size slide

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

    View full-size slide

  14. Why Do Error Occur?
    •EvalError

    •InternalError

    •RangeError

    •ReferenceError

    •SyntaxError

    •TypeError

    •URIError

    •MyCustomError

    View full-size slide

  15. window.onerror()
    window.onerror = function(message, file, line, col, error) {

    // send crash information back to your servers

    console.log(error.stack);

    }

    View full-size slide

  16. error event
    window.addEventListener("error", function(error) {

    // send crash information back to your servers

    console.log(error.stack);

    }

    View full-size slide

  17. 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 full-size slide