Debugging errors in functions (stack traces?)

[joshuahhh]

Suppose in one cell you define:

function call (f) {
  return f(10)
}

and in another you run:

call(3)

(See notebook here.)

As the output to the second cell, Observable will report

TypeError: f is not a function

Which is true! But there’s no pointer to where f is defined, or where it’s incorrectly being used as a function.

This is a dumb toy example, but I’m running into situations in my notebooks where tracing down where an error is happening is legitimately difficult. Is there some way to get a stack trace? (Other than try { call(3) } catch (e) { console.log(e) }?)

(Thanks!)

[mootari]

Chrome’s dev tools allow you to halt on caught exceptions (via the pause button that looks like a stop sign). It’s not ideal though, because it will halt on any caught Promise exception (especially with lots of dependencies).

[jashkenas]

Resurrecting this old thread to mention that Observable now supports tracing the entire call stack through which errors occur, and allows you to jump to the root cause of the error, if it happened in a different cell:

Error Traces

Hi folks, We’ve launched some improvements to our tracing of errors that may occur in JavaScript code within notebook cells. Now, when an error happens, Observable should highlight every position in every function call in your notebook through which the error passes. And, if the error originates in a different cell than the one that is calling the function (or referencing the invalid cell), there’s a handy “Jump to error” button that can help you jump right to the root cause. Here’s a little …

[mootari]

@jashkenas

and allows you to jump to the root cause of the error

Whaaaaaaaaaaaat