koudelka / visualixir

A process/message visualizer for BEAM nodes.💪👁

Visualixir

Visualixir is a toy visualizer for BEAM nodes, written in Elixir + Phoenix + d3, with live message sequence charts.

It's largely intended as a teaching tool, to give newer BEAM programmers a look into the process ecosystem living inside their nodes. However, it may prove of some amusement/use to more experienced folks (it's kinda neat to trace iex and the io system).

Huge gifs are worth a thousand words:

Getting Going

1. Clone this repository.
2. Compile: mix deps.get && mix compile && cd assets && npm install && cd -
3. Start 'er up: elixir --sname visualixir -S mix phx.server
4. Navigate to the GUI

If you want to visualize other BEAM nodes, you'll need to start them up with the --sname <unique_name_here> option.

I suggest you use Chrome for Visualixir, Safari and Firefox's SVG performance seems to be lacking. :(

There are a couple example modules included, SingleNodePingPong and MultiNodePingPong. Additionally, there's a Cluster module to start up additional :slave nodes.

Usage

Selecting Nodes

On the upper left of the terrible GUI is a list of nodes that Visualixir curently knows about, including itself. You can click on a node's name to visualize it, or you can add a new node by entering it in the text box.

Moving Around

Drag the background to pan around.

Move processes around and pin them down by dragging and dropping. To un-pin, double click.

Zoom by scrolling (mousewheel or two-finger swipe).

Message Tracing

Option-dragging (alt-dragging), will open a new "conversation", you can drop a set of pids into the upper left box to start tracing, you should see messages they send/receive in the adjoining box. Its outline will change to red to remind you that you're tracing it. You can click the Stop Msg Tracing button to halt all message tracing.

The live message sequence charts have a configurable fade time, but there's no GUI for it yet, see web/static/js/message_sequence.js

The charting library is here, and it'd love some pull requests. <3

Warning

Do not run Visualixir on production nodes, seriously. I've tried to make it somewhat safe, but I suspect you can get into some bad message-tracing scenarios that'll compromise your node.

Caveats

This a prototype, obviously, the code is a steaming pile of garbage. Visualixir is largely intended to be a playground for screwing around with visualization ideas. I'd love to see what folks come up with, PR's are gladly accepted! 💕 (the GUI needs a lot of help)

visualixir's Issues

move to elm?

missing static file /images/unlink.png

/images/unlink.png is missing

Process info

Hi!
It is not enough for viewing one process information like in observer.

gui halts every so often

a d3 exception is thrown without a useful backtrace, likely to do with the message sequence charts

Visualixir does not load with Node 6 (6.5.0)

When I start it using the instructions given, all i see is this:

When I enter the name of my other node, that does not show anything either.

I tried using --name in place of --sname but that did not work either.

---

This may or may not be related, but I see the following errors in the console:

% elixir --name visualixir --hidden -S mix phoenix.server

[warn] using the :root endpoint configuration for watchers is deprecated.
Pass the :cd option at the end of your watcher argument list in config/dev.exs. For example:

    watchers: [node: ["node_modules/brunch/bin/brunch", "watch", "--stdin",
               cd: Path.expand("../", __DIR__)]]

[info] Running Visualixir.Endpoint with Cowboy using http://localhost:4000
(node) v8::ObjectTemplate::Set() with non-primitive values is deprecated
(node) and will stop working in the next major release.

==== JS stack trace =========================================

Security context: 0x1f645cfcfb51 <JS Object>#0#
    1: .node [module.js:583] [pc=0xd7e023ae664] (this=0x2c8c45dcd279 <an Object with map 0x28a690b1ad01>#1#,module=0xed8a1adf771 <a Module with map 0x28a690b1bc21>#2#,filename=0xed8a1add079 <String[81]: /Users/debajita/Developer/visualixir/node_modules/fsevents/build/Release/fse.node>)
    2: load [module.js:473] [pc=0xd7e0233d5d2] (this=0xed8a1adf771 <a Module with map 0x28a690b1bc21>#2#,filename
==== JS stack trace =========================================

Security context: 0x1f645cfcfb51 <JS Object>#0#
    1: .node [module.js:583] [pc=0xd7e023ae664] (this=0x2c8c45dcd279 <an Object with map 0x28a690b1ad01>#1#,module=0xed8a1adf771 <a Module with map 0x28a690b1bc21>#2#,filename=0xed8a1add079 <String[81]: /Users/debajita/Developer/visualixir/node_modules/fsevents/build/Release/fse.node>)
    2: load [module.js:473] [pc=0xd7e0233d5d2] (this=0xed8a1adf771 <a Module with map 0x28a690b1bc21>#2#,filename/Users/debajita/Developer/visualixir/node_modules/brunch/lib/fs_utils/file_list.js:77
        return path.match(test);
                    ^

TypeError: Cannot assign to read only property 'lastIndex' of object '[object RegExp]'
  at RegExp.exec (native)
  at RegExp.[Symbol.match] (native)
  at String.match (native)
  at FileList.module.exports.FileList.isIgnored (/Users/debajita/Developer/visualixir/node_modules/brunch/lib/fs_utils/file_list.js:77:21)
  at /Users/debajita/Developer/visualixir/node_modules/

When I fix the 'cd' issue reported, I still see the following errors

% elixir --name visualixir --hidden -S mix phoenix.server
[info] Running Visualixir.Endpoint with Cowboy using http://localhost:4000
(node) v8::ObjectTemplate::Set() with non-primitive values is deprecated
(node) and will stop working in the next major release.

==== JS stack trace =========================================

Security context: 0x146707acfb51 <JS Object>#0#
    1: .node [module.js:583] [pc=0x21313ceac884] (this=0x222257612051 <an Object with map 0x2d2808e1ad01>#1#,module=0xdf1812e7a19 <a Module with map 0x2d2808e1bc21>#2#,filename=0xdf1812e5321 <String[81]: /Users/debajita/Developer/visualixir/node_modules/fsevents/build/Release/fse.node>)
    2: load [module.js:473] [pc=0x21313ce3d5d2] (this=0xdf1812e7a19 <a Module with map 0x2d2808e1bc21>#2#,filena
==== JS stack trace =========================================

Security context: 0x146707acfb51 <JS Object>#0#
    1: .node [module.js:583] [pc=0x21313ceac884] (this=0x222257612051 <an Object with map 0x2d2808e1ad01>#1#,module=0xdf1812e7a19 <a Module with map 0x2d2808e1bc21>#2#,filename=0xdf1812e5321 <String[81]: /Users/debajita/Developer/visualixir/node_modules/fsevents/build/Release/fse.node>)
    2: load [module.js:473] [pc=0x21313ce3d5d2] (this=0xdf1812e7a19 <a Module with map 0x2d2808e1bc21>#2#,filena/Users/debajita/Developer/visualixir/node_modules/brunch/lib/fs_utils/file_list.js:77
        return path.match(test);
                    ^

TypeError: Cannot assign to read only property 'lastIndex' of object '[object RegExp]'
  at RegExp.exec (native)
  at RegExp.[Symbol.match] (native)
  at String.match (native)
  at FileList.module.exports.FileList.isIgnored (/Users/debajita/Developer/visualixir/node_modules/brunch/lib/fs_utils/file_list.js:77:21)
  at /Users/debajita/Developer/visualixir/node_modules/

Does visualixir even work on macOS? I'd like to know if this is a known bug, or what I'm doing wrong.

Does not compile with OTP 19.0

Hey,

it seems like the build fails on OTP 19.0 (regardless of Elixir version).
This can easily be averted by using OTP 18.0, but it would be nice to come up with a more future-proof solution.

== Compilation error on file web/router.ex ==
** (CompileError) web/router.ex: internal error in v3_core;
crash reason: {case_clause,
    {'EXIT',
        {badarg,
            [{erl_anno,anno_info,[-1],[{file,"erl_anno.erl"},{line,360}]},
             {v3_core,record_anno,2,[{file,"v3_core.erl"},{line,2410}]},
             {v3_core,expr,2,[{file,"v3_core.erl"},{line,539}]},
             {v3_core,safe,2,[{file,"v3_core.erl"},{line,1593}]},
             {v3_core,expr,2,[{file,"v3_core.erl"},{line,528}]},
             {v3_core,safe,2,[{file,"v3_core.erl"},{line,1593}]},
             {v3_core,'-safe_list/2-anonymous-0-',2,
                 [{file,"v3_core.erl"},{line,1608}]},
             {lists,foldr,3,[{file,"lists.erl"},{line,1276}]},
             {v3_core,expr,2,[{file,"v3_core.erl"},{line,538}]},
             {v3_core,safe,2,[{file,"v3_core.erl"},{line,1593}]},
             {v3_core,'-safe_list/2-anonymous-0-',2,
                 [{file,"v3_core.erl"},{line,1608}]},
             {lists,foldr,3,[{file,"lists.erl"},{line,1276}]},
             {v3_core,expr,2,[{file,"v3_core.erl"},{line,538}]},
             {v3_core,safe,2,[{file,"v3_core.erl"},{line,1593}]},
             {v3_core,expr,2,[{file,"v3_core.erl"},{line,528}]},
             {v3_core,safe,2,[{file,"v3_core.erl"},{line,1593}]},
             {v3_core,'-safe_list/2-anonymous-0-',2,
                 [{file,"v3_core.erl"},{line,1608}]},
             {lists,foldr,3,[{file,"lists.erl"},{line,1276}]},
             {v3_core,expr,2,[{file,"v3_core.erl"},{line,652}]},
             {v3_core,exprs,2,[{file,"v3_core.erl"},{line,512}]}]}}}

  in function  compile:'-select_passes/2-anonymous-2-'/2 (compile.erl, line 530)
  in call from compile:'-internal_comp/4-anonymous-1-'/2 (compile.erl, line 315)
  in call from compile:fold_comp/3 (compile.erl, line 341)
  in call from compile:internal_comp/4 (compile.erl, line 325)
  in call from compile:'-do_compile/2-anonymous-0-'/2 (compile.erl, line 175)
    (stdlib) lists.erl:1338: :lists.foreach/2
    (phoenix) expanding macro: Phoenix.Router.__before_compile__/1
    web/router.ex:1: Visualixir.Router (module)
    (elixir) lib/kernel/parallel_compiler.ex:116: anonymous fn/4 in Kernel.ParallelCompiler.spawn_compilers/1

CSS broken on mac?

Hi,

I want to showcase one of our applications at the company using this app to newcomers.. however, the GUI looks nothing like the gif in the README.

1. The drawing area is very limited in height, hard to see everything (I think normally it is almost full screen)
2. The icons nex to the 'exited', ... messages are too big (think half a screen).

I suspect these issues are related, maybe it only shows up properly on Linux?
Might this also be related to this being slightly outdated (old phoenix version, ...)?

Screenshot for clarity:

CSS broken on linux?

iex(visualixir@vorpal)2> 17:57:01 - warn: Loading of sass-brunch failed due to Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (72)
For more information on which environments are supported please see:

Running brunch explicitly succeeds in generating JS but not CSS...

Using with Riak

Hey, nice tool. I work on Riak with Basho and would love to see this message path visualisation work with Riak.

My colleague has a visual tracing tool as well:
https://github.com/andytill/erlyberly

If you tell me what the VM version issues are I will see if I can fix them @gordonguthrie or [email protected]

Followed readme, ran into problem

After following instructions on README, running elixir --sname visualixir --hidden -S mix phoenix.server gave me ** (Mix) The task "phoenix.server" could not be found

Not being experienced with Elixir leaves me stumped! Thanks

How to visualize another app?

Hello!

I'm trying to visualize a Elixir 1.6 / Phoenix app I have running in my machine. I launch it like this:

elixir --sname myapp -S mix phx.server

and then I run visualixir like this:

elixir --sname visualixir --hidden -S mix phoenix.server

Then I add the node in the GUI (myapp@holly) but nothing happens on the GUI. I see this on the logs:

[debug] INCOMING "add" on "nodes" to VisualixirWeb.NodesChannel
  Transport:  Phoenix.Transports.WebSocket
  Parameters: "myapp@holly"
[debug] Pinging node myapp@holly returned :pang

What am I doing wrong?

Screenshot - This thing is awesome!

Howdy. I don't know how much I can help you with the code, but I wanted to let you know how much I appreciate you making this tool! Here is a screenshot of me spawning ~20000 ibgib processes that I thought you or anyone else might like to see. (Though I figure you've already seen the awesomeness of this.)

Use `marker-mid` instead of custom arrows

tracing color on circles

I'm colorblind and cannot for the life of me tell the difference between a node in 'tracing' mode vs not. I had to dig through the code to figure it out because I thought I was losing my mind after looking at your gifs in action :)

Any chance you'd be interested in making the color difference more obvious? I can throw together a pull request, but you may not want me choosing colors.

Awesome tool, though!

Use recon?

We were musing over what could be done to make this more "Prod" safe in the elixir slack channel and the suggestion came up that it might be good to switch to recon to get tracing data. Do you have any plans or have you considered using recon?

v8 javascript error

followed the instructions in the README.md ...

My environment:
OS X 10.12.5
Erlang 19.3.4
Elixir 1.4.4

When I start up visualixir, I am seeing this error:

#
# Fatal error in ../deps/v8/src/api.cc, line 1197
# Check failed: !value_obj->IsJSReceiver() || value_obj->IsTemplateInfo().
#

==== C stack trace ===============================

    0   node                                0x00000001008abaa1 v8::base::debug::StackTrace::StackTrace() + 19
    1   node                                0x00000001008aa803 V8_Fatal + 213
    2   node                                0x0000000100140e1e v8::Template::SetPrivate(v8::Local<v8::Private>, v8::Local<v8::Data>, v8::PropertyAttribute) + 0
    3   fse.node                            0x00000001038e4ba3 fse::FSEvents::Initialize(v8::Local<v8::Object>) + 197
    4   node                                0x00000001007f8f6e node::DLOpen(v8::FunctionCallbackInfo<v8::Value> const&) + 864
    5   node                                0x00000001001677fe v8::internal::FunctionCallbackArguments::Call(void (*)(v8::FunctionCallbackInfo<v8::Value> const&)) + 416
    6   node                                0x00000001001b479c v8::internal::MaybeHandle<v8::internal::Object> v8::internal::(anonymous namespace)::HandleApiCallHelper<false>(v8::internal::Isolate*, v8::internal::Handle<v8::internal::HeapObject>, v8::internal::Handle<v8::internal::HeapObject>, v8::internal::Handle<v8::internal::FunctionTemplateInfo>, v8::internal::Handle<v8::internal::Object>, v8::internal::BuiltinArguments) + 871
    7   node                                0x00000001001b3db2 v8::internal::Builtin_Impl_HandleApiCall(v8::internal::BuiltinArguments, v8::internal::Isolate*) + 276
    8   ???                                 0x00001ac2c328437d 0x0 + 29423800173437```

Installation problems

When trying to install the assests via npm install I get:

   elixir-0:  Error: No compatible version found: phoenix_html@'file:../deps/phoenix_html'
    elixir-0: npm
    elixir-0:  
    elixir-0: ERR!
    elixir-0:  Valid install targets:
    elixir-0: npm
    elixir-0:  
    elixir-0: ERR!
    elixir-0:  ["2.10.4","2.12.0","2.13.2"]
    elixir-0: npm
    elixir-0:  
    elixir-0: ERR!
    elixir-0:      at installTargetsError (/usr/share/npm/lib/cache.js:719:10)
    elixir-0: npm
    elixir-0:  
    elixir-0: ERR!
    elixir-0:      at /usr/share/npm/lib/cache.js:638:10
    elixir-0: npm
    elixir-0:  
    elixir-0: ERR!
    elixir-0:      at saved (/usr/share/npm/node_modules/npm-registry-client/lib/get.js:142:7)
    elixir-0: npm
    elixir-0:  
    elixir-0: ERR!
    elixir-0:      at /usr/lib/nodejs/graceful-fs/polyfills.js:133:7
    elixir-0: npm
    elixir-0:  
    elixir-0: ERR!
    elixir-0:      at Object.oncomplete (fs.js:107:15)
    elixir-0: npm
    elixir-0:  
    elixir-0: ERR!
    elixir-0:  If you need help, you may report this log at:
    elixir-0: npm
    elixir-0:  
    elixir-0: ERR!     <http://github.com/isaacs/npm/issues>
    elixir-0: npm ERR! or email it to:
    elixir-0: npm ERR!     <[email protected]>
    elixir-0: 
    elixir-0: npm ERR! System Linux 3.13.0-170-generic
    elixir-0: npm
    elixir-0:  
    elixir-0: ERR!
    elixir-0:  
    elixir-0: command
    elixir-0:  "/usr/bin/nodejs" "/usr/bin/npm" "install"
    elixir-0: npm
    elixir-0:  ERR! cwd /home/vagrant/visualixir/assets
    elixir-0: npm ERR! node -v v0.10.25
    elixir-0: npm ERR! npm -v 1.3.10
    elixir-0: npm

This happens on Mac OS X as well as (this stacktrace) a vagrant ubuntu/trusty64 box.

Outdated project

Project seems to be broken. It doesn't compile on Elixir 1.13.2 (compiled with Erlang/OTP 22)
After tones of warning it ends in a error:

== Compilation error in file lib/visualixir_web/views/layout_view.ex ==
** (RuntimeError) unexpected EEx.Engine state: {:safe, ""}. This typically means a bug or an outdated EEx.Engine or tool

    (eex 1.13.2) lib/eex/engine.ex:218: EEx.Engine.check_state!/1
    (eex 1.13.2) lib/eex/engine.ex:181: EEx.Engine.handle_text/3
    (eex 1.13.2) lib/eex/compiler.ex:52: EEx.Compiler.generate_buffer/4
    (phoenix 1.3.2) lib/phoenix/template.ex:378: Phoenix.Template.compile/2
    (phoenix 1.3.2) lib/phoenix/template.ex:186: anonymous fn/3 in Phoenix.Template."MACRO-__before_compile__"/2
    (elixir 1.13.2) lib/enum.ex:2396: Enum."-reduce/3-lists^foldl/2-0-"/3
    (phoenix 1.3.2) expanding macro: Phoenix.Template.__before_compile__/1
    lib/visualixir_web/views/layout_view.ex:1: VisualixirWeb.LayoutView (module)

[error] backend port not found: :inotifywait

Hi!
When i run Visualixir

elixir --sname visualixir --hidden -S mix phoenix.server

i see in console:

Doesn't show any messages

visualixir compiles and installs fine but tracing nodes doesn't seem to do anything... I can't get any info on messages being passed no matter which nodes I click on, and I'm certain messages are being sent...

OSX
Erlang/OTP 21
Elixir: 1.7.1