loading...

Link Phoenix debug page stack trace to your editor

atyborska93 profile image Angelika Tyborska Updated on ・2 min read

If you ever worked on a Phoenix app, you might have seen this debug page when an error is raised:

A debug page of a Phoenix app

Generating those debug pages when an error happens is a feature turned on by setting config :my_app, MyAppWeb.Endpoint, debug_errors: true, which can be found in config/dev.exs of a freshly-created Phoenix app. It actually comes from Plug.Debugger, not Phoenix itself (source).

# phoenixframework/phoenix - lib/phoenix/endpoint.ex#L419-L421
if var!(config)[:debug_errors] do
  use Plug.Debugger,
    otp_app: @otp_app,

Plug.Debugger offers an option to generate links in the stack trace directly to your editor (source).

# elixir-plug/plug - lib/plug/debugger.ex#L80-L89
"""
If a `PLUG_EDITOR` environment variable is set, `Plug.Debugger` will
use it to generate links to your text editor. The variable should be
set with `__FILE__` and `__LINE__` placeholders which will be correctly
replaced. For example (with the [TextMate](http://macromates.com) editor):

  txmt://open/?url=file://__FILE__&line=__LINE__

Or, using Visual Studio Code:

  vscode://file/__FILE__:__LINE__
"""

You will need to find out if your editor supports a custom URL scheme that will open files in it. In Plug.Debugger's code, there are examples for TextMate (txmt://open/?url=file://__FILE__&line=__LINE__) and Visual Studio Code (vscode://file/__FILE__:__LINE__).

I personally use RubyMine, which supports the scheme x-mine, which means I can build URLs like this: x-mine://open?file=__FILE__&line=__LINE__.

You can always try out if the custom scheme works for you by trying to open in your browser a link to a file that exists on your machine, e.g. x-mine://open?file=/Users/angelika/.gitignore&line=3

Once you figure out your editor's custom URL scheme and how to pass the file name and line number in that URL, you need to set the environment variable PLUG_EDITOR to that URL. Make sure to use __FILE__ as the file name placeholder and __LINE__ as the line number placeholder.

How to achieve that depends on your operating system and shell. On macOS, using bash as my shell, I needed to add this line to my ~/.bash_profile:

# ~/.bash_profile
export PLUG_EDITOR='x-mine://open?file=__FILE__&line=__LINE__'

Before restarting your Phoenix server to see the results, do not forget to reload the file (. ~/.bash_profile) in an existing shell session or just open a new session.

Result

A gif showing a debug page in Phoenix and how clicking on a file name opens that file in RubyMine

When I click on the file name in the stack trace, that file opens in RubyMine, on the line that caused the error.

Posted on by:

atyborska93 profile

Angelika Tyborska

@atyborska93

Mostly self-taught full-stack web developer.

Discussion

markdown guide
 

Thanks so much for sharing this! I've just managed to get it working with neovim with a bit of help from the custom protocol handling functionality in Firefox: stackoverflow.com/a/42187354/98555

Great development flow :)