Show compile errors in the output panel

[roryokane]

I don’t know how detailed the error messages Wisp gives are, but even if Wisp says “compilation failed” and nothing more, displaying that is more helpful than keeping the right panel unchanged, with the output of the previous working code. Right now, since no error is displayed, it’s hard to notice that my code is broken, and then I wonder what’s wrong when I look to the right and see that the right panel has not updated with my new code.

This is very similar to this other issue I made for Try CoffeeScript, about improving the placement of their error message:

[…] When I started using Try CoffeeScript while learning CoffeeScript, I was confused sometimes as to why my code had stopped updating on the right as I typed. It took me a while to spot the little red error.

The error could just be displayed in place of the output, but this would create flickering between code and errors as the user types. To avoid flickering, the error could instead be displayed centered on top of the code, with the last-compiled code still visible underneath it.

Here’s a mockup that both moves the error message on top of the compiled code and shows a small marker in the source for the error message.

If you can get column numbers for the error, though, we should use a different way of indicating the error, one that can also indicate the column. Maybe giving the error location a bold or wavy red underline.

I think that mockup also applies to this tool – when there’s an error, put a black transparent overlay over the code on the right with a red error message on a white background centered in the panel. And if you know the line number of the error, mark that line too.

There is also this earlier CoffeeScript issue which shows another way to display the error message – replacing the code, instead of on top of the code. That way might be simpler to implement, and it would be a good start.

[roryokane]

I just noticed that Try Wisp does mark errors in the code. And hovering on the mark displays the error message:

However, I think this mark is too subtle for marking an error, since I didn’t notice it before. Coloring the mark bright red should be enough to fix that problem.

Even after recoloring the mark, I think it would also be helpful to display the full text of the error message in the right-hand output panel, so that I don't need to hover over the red mark each time to debug my code. If you're worried about the flickering of the error message being too distracting when you're typing new code, the error message could use dark, desaturated colors and be placed at the bottom of the panel, or you could increase the after-keypress delay before you display the error.