New design

New design makes the stack trace look more inviting! It also adds more visual variety. There is also a title and some text to explain what it is.

Code previews

The most relevant frames are (often) those from your own code. In this PR, you get a small preview of the code from your notebook that made the call. You can click to jump to the line.

This is implemented without CodeMirror, but just with a <pre> and highlight.js to keep things simple :)

URLs

You can now click on file locations from Julia Base, and it will send you to the source code on github :) Adding this functionality for stdlibs and remote packages would be nice! Working on this with @adrhill

Truncated stack trace

We search for the first frame that comes from this notebook, and all frames that came before it are hidden behind a More... button. This makes the stack trace less intimidating, and it is hopefully a good heuristic for "which frames are more useful?". It would be nice to add more heuristics.

Remove "top-level-scope"

Pretty technical, just removed the whole phrase, showing only the file:line.

TODO

[x] Dark mode tweaks
[ ] More experimentation!
[x] Make the error message stand out more, especially when it is a single line.

More pictures

github-actions[bot] commented 7 months ago

Try this Pull Request!

Open Julia and type:

  julia> import Pkg
  julia> Pkg.activate(temp=true)
  julia> Pkg.add(url="https://github.com/fonsp/Pluto.jl", rev="stacktraces-prettier")
  julia> using Pluto

adrhill commented 7 months ago

Yay! 😃

fonsp / Pluto.jl

🧾 Stack traces: code preview, URL, truncated, design #2813