Better error page design

[rstacruz]

Would you like a better one? I can hack a nice-looking error page in a quick jiff.

Love your work on this gem by the way!

[haileys]

As you can probably tell, I'm not much of a designer!

If you'd like to try and spiffy up the better_errors error page, I'd really appreciate it.

However, please keep all styles and javascript inline. Please try and avoid images, but if you must use them, please inline them with base64.

Cheers.

[rstacruz]

Sure! let me see what I can do.

[andrew]

👍

[rstacruz]

I'm trying to figure out a better layout. Right now, here's where I'm at—not exactly pretty yet, but I'm more of trying to get the "wireframe" properly layed out right first. Thinking of making the backtrace section have their own scrollbars—saves you effort in scrolling back and forth!

Changes to the markup are pretty minimal.

[haileys]

Looks pretty nice! The layout is fluid right?

[neilmiddleton]

Works for me, although I would left align the error at the top rather than center as that's where the eye immediately looks.

[deanpcmad]

That looks great @rstacruz 😄

[jeromegn]

@rstacruz Here are my 2 cents: Looks awesome :) ... but, this page should first and foremost be giving out the details efficiently. Your design is visually pleasing but it takes up too much space. Sometimes the window might be small and it would be painful not to see much of the stack because of the huge amount of whitespace around the error description up top.

I don't know that we need the padding around the content either. If we do (for looks) then maybe shrink it a bit?

In any case, great work :)

[shuma]

That looks great, when are you going to implement that? =)

[excid3]

👍

[rstacruz]

@shuma You can see it on my fork of better_errors. You may have to go back a few commits though: I've made a lot of changes since.

Looks like I'll need to go back to the drawing board on this one though :\

[rstacruz]

Hm, I think I want to go with a more minimal approach like this.

To accomplish this:

1. Stack traces will be hidden by default to give way to the most important thing here: the code and the REPL shell.
2. the default code shown will be the first application trace (currently, better_errors picks the first trace, whether it be an application trace or gem/framework trace).
3. there will be a mini-stack trace preview showing the application stack trace (not shown yet). clicking it will show the full stack trace in a sidebar.

Not sure on this approach, but after using the prototypes of the previous designs for a while, they did infact feel cumbersome (hi @jeromegn! you're totally right!), I find myself always wanting the top application stacktrace anyway so I figured it'd be best to showcase that better.

Personally, I love the combined box of a code preview + REPL + line location—very convenient since 80% of the time, it's what I'll be digging for anyway.

[rstacruz]

Here are other prototypes I've tried. I've tried a lot (heh), but haven't been able to take enough screenshots along the progress:

• Another early iteration
• Boxed content area — the previous designs felt too heavy and I tried to figure out ways to make them feel lighter.
• 'Lighter' feel without boxes — I figured that the box around the content area just feels like clutter, and it's much more compact without it.
• Full-sized sidebar — this is where I realized that showing stack traces will always feel 'heavy', no matter what. I tried smaller variations, they felt even sillier.

[shuma]

@rstacruz I really like the one with two boxes. It feels simpler. Great job mate!