Pro Yearly is on sale from $80 to $50! »

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.

Da526e4b5901b3a2759cf234285c6488?s=128

Jennifer Bland

March 08, 2019
Tweet

Transcript

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

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

    codeprep.io
  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
  4. Background Terminology • Call Stack • Heap • Queue •

    Concurrency Model
  5. Call Stack

  6. Heap • mostly unstructured region of memory • memory allocation

    to variables and objects happen here • finite in size
  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
  8. What is the Stack Trace? • what functions were called

    • in what order • from which line and file • with what arguments
  9. Stack Trace Demo

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

    • warn • error
  11. None
  12. None
  13. Chrome

  14. Firefox

  15. console.table() • display objects as a table • click on

    headers to sort • works with objects of objects
  16. console.trace

  17. None
  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
  19. Debug • find & locate the code for a particular

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

    •URIError •MyCustomError
  21. window.onerror() window.onerror = function(message, file, line, col, error) { //

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

    to your servers console.log(error.stack); }
  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