Skip to content

Commit

Permalink
feature #20951 Redesigned the exception pages (javiereguiluz)
Browse files Browse the repository at this point in the history 
This PR was squashed before being merged into the 3.3-dev branch (closes #20951).

Discussion
----------

Redesigned the exception pages

| Q             | A
| ------------- | ---
| Branch?       | master
| Bug fix?      | no
| New feature?  | yes
| BC breaks?    | no
| Deprecations? | no
| Tests pass?   | yes
| Fixed tickets | #20620
| License       | MIT
| Doc PR        | -

Here are some before/after screenshots:

| Before | After
| --- | ---
| ![exception-before-1](https://cloud.githubusercontent.com/assets/73419/21258148/f8fd6482-c37b-11e6-9efe-1bcf7b323c0f.png) | ![exception-after-1](https://cloud.githubusercontent.com/assets/73419/21258156/016059cc-c37c-11e6-8bab-80456189d614.png)

| Before | After
| --- | ---
| ![exception-before-2](https://cloud.githubusercontent.com/assets/73419/21258171/11198a46-c37c-11e6-8a28-ae45e19e3eaf.png) | ![exception-after-2](https://cloud.githubusercontent.com/assets/73419/21258223/4cb9ac66-c37c-11e6-93db-0db2c204dc0b.png)

| Before | After
| --- | ---
| ![exception-before-3](https://cloud.githubusercontent.com/assets/73419/21258239/5a0747ac-c37c-11e6-923e-564322e862a6.png) | ![exception-after-3](https://cloud.githubusercontent.com/assets/73419/21258246/62ad8b00-c37c-11e6-8838-3c1824c18287.png)

---

And here is the new design in action because everything is very dynamic and you can click anywhere to reveal/collapse things:

![exception-in-action](https://cloud.githubusercontent.com/assets/73419/21258261/7445f140-c37c-11e6-9318-f3807fe38689.gif)

Commits
-------

9d0c263 Redesigned the exception pages
  • Loading branch information
@fabpot
fabpot committed Apr 5, 2017
2 parents 12bb392 + 9d0c263 commit d33c0ee
Show file tree
Hide file tree
Showing 30 changed files with 363 additions and 427 deletions.
2 changes: 1 addition & 1 deletion src/Symfony/Bundle/TwigBundle/Resources/views/Exception/error.atom.twig
View file
@@ -1 +1 @@
{% include '@Twig/Exception/error.xml.twig' %}
{{ include('@Twig/Exception/error.xml.twig') }}
2 changes: 1 addition & 1 deletion src/Symfony/Bundle/TwigBundle/Resources/views/Exception/error.rdf.twig
View file
@@ -1 +1 @@
{% include '@Twig/Exception/error.xml.twig' %}
{{ include('@Twig/Exception/error.xml.twig') }}
2 changes: 1 addition & 1 deletion src/Symfony/Bundle/TwigBundle/Resources/views/Exception/exception.atom.twig
View file
@@ -1 +1 @@
{% include '@Twig/Exception/exception.xml.twig' with { 'exception': exception } %}
{{ include('@Twig/Exception/exception.xml.twig', { exception: exception }) }}
2 changes: 1 addition & 1 deletion src/Symfony/Bundle/TwigBundle/Resources/views/Exception/exception.css.twig
View file
@@ -1,3 +1,3 @@
/*
{% include '@Twig/Exception/exception.txt.twig' with { 'exception': exception } %}
{{ include('@Twig/Exception/exception.txt.twig', { exception: exception }) }}
*/
183 changes: 77 additions & 106 deletions src/Symfony/Bundle/TwigBundle/Resources/views/Exception/exception.html.twig
View file
@@ -1,120 +1,91 @@
<div class="block-exception">
<div class="block-exception-detected clear-fix">
<div class="support">
<a href="http://symfony.com/support">Need support?</a>
</div>
<div class="illustration-exception">
{{ include('@Twig/Exception/exception.svg') }}
<div class="exception-summary">
<div class="exception-metadata">
<div class="container">
<h2 class="exception-hierarchy">
{% for previousException in exception.allPrevious|reverse %}
{{ previousException.class|abbr_class }}
<span class="icon">{{ include('@Twig/images/chevron-right.svg') }}</span>
{% endfor %}
{{ exception.class|abbr_class }}
</h2>
<h2 class="exception-http">
HTTP {{ status_code }} <small>{{ status_text }}</small>
</h2>
</div>
<div class="text-exception">
<div class="open-quote">“</div>

<h1>{{ exception.message|nl2br|format_file_from_text }}</h1>

<div>
<strong>{{ status_code }}</strong> {{ status_text }} - {{ exception.class|abbr_class }}
</div>
<div class="container">
<div class="exception-message-wrapper">
<h1 class="break-long-words exception-message {{ exception.message|length > 180 ? 'long' }}">
{{- exception.message|nl2br|format_file_from_text -}}
</h1>

<div class="exception-illustration hidden-xs-down">
{{ include('@Twig/images/symfony-ghost.svg') }}
</div>

{% set previous_count = exception.allPrevious|length %}
{% if previous_count %}
<div class="linked"><span><strong>{{ previous_count }}</strong> linked Exception{{ previous_count > 1 ? 's' : '' }}:</span>
<ul>
{% for i, previous in exception.allPrevious %}
<li>
{{ previous.class|abbr_class }} <a href="#traces-link-{{ i + 1 }}" onclick="toggle('traces-{{ i + 1 }}', 'traces'); switchIcons('icon-traces-{{ i + 1 }}-open', 'icon-traces-{{ i + 1 }}-close');">&#187;</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}

<div class="close-quote">”</div>
</div>
</div>
</div>

{% for position, e in exception.toarray %}
{% include '@Twig/Exception/traces.html.twig' with { 'exception': e, 'position': position, 'count': previous_count } only %}
{% endfor %}

{% if logger %}
<div class="block">
<div class="logs clear-fix">
{% spaceless %}
<h2>
Logs&nbsp;
<a href="#" onclick="toggle('logs'); switchIcons('icon-logs-open', 'icon-logs-close'); return false;">
<img class="toggle" id="icon-logs-open" alt="+" src="data:image/gif;base64,R0lGODlhEgASAMQTANft99/v+Ga44bHb8ITG52S44dXs9+z1+uPx+YvK6WC24G+944/M6W28443L6dnu+Ge54v/+/l614P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABMALAAAAAASABIAQAVS4DQBTiOd6LkwgJgeUSzHSDoNaZ4PU6FLgYBA5/vFID/DbylRGiNIZu74I0h1hNsVxbNuUV4d9SsZM2EzWe1qThVzwWFOAFCQFa1RQq6DJB4iIQA7" style="display: none" />
<img class="toggle" id="icon-logs-close" alt="-" src="data:image/gif;base64,R0lGODlhEgASAMQSANft94TG57Hb8GS44ez1+mC24IvK6ePx+Wa44dXs92+942e54o3L6W2844/M6dnu+P/+/l614P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABIALAAAAAASABIAQAVCoCQBTBOd6Kk4gJhGBCTPxysJb44K0qD/ER/wlxjmisZkMqBEBW5NHrMZmVKvv9hMVsO+hE0EoNAstEYGxG9heIhCADs=" style="display: inline" />
</a>
</h2>
{% endspaceless %}
<div class="container">
<div class="sf-tabs">
<div class="tab">
{% set exception_as_array = exception.toarray %}
<h3 class="tab-title">
{% if exception_as_array|length > 1 %}
Exceptions <span class="badge">{{ exception_as_array|length }}</span>
{% else %}
Exception
{% endif %}
</h3>

<div class="tab-content">
{% for e in exception_as_array %}
{{ include('@Twig/Exception/traces.html.twig', { exception: e, index: loop.index }, with_context = false) }}
{% endfor %}
</div>
</div>

{% if logger.counterrors %}
<div class="error-count">
<span>
{{ logger.counterrors }} error{{ logger.counterrors > 1 ? 's' : ''}}
</span>
</div>
{% endif %}
<div class="tab {{ logger is empty ? 'disabled' }}">
<h3 class="tab-title">
Logs
{% if logger.counterrors ?? false %}<span class="badge status-error">{{ logger.counterrors }}</span>{% endif %}
</h3>

<div class="tab-content">
{% if logger %}
{{ include('@Twig/Exception/logs.html.twig', { logs: logger.logs }, with_context = false) }}
{% else %}
<div class="empty">
<p>No log messages</p>
</div>
{% endif %}
</div>
</div>

<div id="logs">
{% include '@Twig/Exception/logs.html.twig' with { 'logs': logger.logs } only %}
<div class="tab">
<h3 class="tab-title">
{% if exception_as_array|length > 1 %}
Stack Traces <span class="badge">{{ exception_as_array|length }}</span>
{% else %}
Stack Trace
{% endif %}
</h3>

<div class="tab-content">
{% for e in exception_as_array %}
{{ include('@Twig/Exception/traces_text.html.twig', { exception: e, index: loop.index, num_exceptions: loop.length }, with_context = false) }}
{% endfor %}
</div>
</div>
</div>
{% endif %}

{% if currentContent %}
<div class="block">
{% spaceless %}
<h2>
Content of the Output&nbsp;
<a href="#" onclick="toggle('output-content'); switchIcons('icon-content-open', 'icon-content-close'); return false;">
<img class="toggle" id="icon-content-close" alt="-" src="data:image/gif;base64,R0lGODlhEgASAMQSANft94TG57Hb8GS44ez1+mC24IvK6ePx+Wa44dXs92+942e54o3L6W2844/M6dnu+P/+/l614P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABIALAAAAAASABIAQAVCoCQBTBOd6Kk4gJhGBCTPxysJb44K0qD/ER/wlxjmisZkMqBEBW5NHrMZmVKvv9hMVsO+hE0EoNAstEYGxG9heIhCADs=" style="display: none" />
<img class="toggle" id="icon-content-open" alt="+" src="data:image/gif;base64,R0lGODlhEgASAMQTANft99/v+Ga44bHb8ITG52S44dXs9+z1+uPx+YvK6WC24G+944/M6W28443L6dnu+Ge54v/+/l614P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABMALAAAAAASABIAQAVS4DQBTiOd6LkwgJgeUSzHSDoNaZ4PU6FLgYBA5/vFID/DbylRGiNIZu74I0h1hNsVxbNuUV4d9SsZM2EzWe1qThVzwWFOAFCQFa1RQq6DJB4iIQA7" style="display: inline" />
</a>
</h2>
{% endspaceless %}
{% if currentContent is not empty %}
<div class="tab">
<h3 class="tab-title">Output content</h3>

<div id="output-content" style="display: none">
{{ currentContent }}
<div class="tab-content">
{{ currentContent }}
</div>
</div>

<div style="clear: both"></div>
{% endif %}
</div>
{% endif %}

{% include '@Twig/Exception/traces_text.html.twig' with { 'exception': exception } only %}

<script type="text/javascript">//<![CDATA[
function toggle(id, clazz) {
var el = document.getElementById(id),
current = el.style.display,
i;
if (clazz) {
var tags = document.getElementsByTagName('*');
for (i = tags.length - 1; i >= 0; i--) {
if (tags[i].className === clazz) {
tags[i].style.display = 'none';
}
}
}
el.style.display = current === 'none' ? 'block' : 'none';
}
function switchIcons(id1, id2) {
var icon1, icon2, display1, display2;
icon1 = document.getElementById(id1);
icon2 = document.getElementById(id2);
display1 = icon1.style.display;
display2 = icon2.style.display;
icon1.style.display = display2;
icon2.style.display = display1;
}
//]]></script>
</div>
2 changes: 1 addition & 1 deletion src/Symfony/Bundle/TwigBundle/Resources/views/Exception/exception.js.twig
View file
@@ -1,3 +1,3 @@
/*
{% include '@Twig/Exception/exception.txt.twig' with { 'exception': exception } %}
{{ include('@Twig/Exception/exception.txt.twig', { exception: exception }) }}
*/
2 changes: 1 addition & 1 deletion src/Symfony/Bundle/TwigBundle/Resources/views/Exception/exception.rdf.twig
View file
@@ -1 +1 @@
{% include '@Twig/Exception/exception.xml.twig' with { 'exception': exception } %}
{{ include('@Twig/Exception/exception.xml.twig', { exception: exception }) }}
7 changes: 0 additions & 7 deletions src/Symfony/Bundle/TwigBundle/Resources/views/Exception/exception.svg
View file

This file was deleted.

2 changes: 1 addition & 1 deletion src/Symfony/Bundle/TwigBundle/Resources/views/Exception/exception.txt.twig
View file
Expand Up @@ -2,6 +2,6 @@
[message] {{ exception.message }}
{% for i, e in exception.toarray %}
[{{ i + 1 }}] {{ e.class }}: {{ e.message }}
{% include '@Twig/Exception/traces.txt.twig' with { 'exception': e } only %}
{{ include('@Twig/Exception/traces.txt.twig', { exception: e }, with_context = false) }}

{% endfor %}
2 changes: 1 addition & 1 deletion src/Symfony/Bundle/TwigBundle/Resources/views/Exception/exception.xml.twig
View file
Expand Up @@ -3,7 +3,7 @@
<error code="{{ status_code }}" message="{{ status_text }}">
{% for e in exception.toarray %}
<exception class="{{ e.class }}" message="{{ e.message }}">
{% include '@Twig/Exception/traces.xml.twig' with { 'exception': e } only %}
{{ include('@Twig/Exception/traces.xml.twig', { exception: e }, with_context = false) }}
</exception>
{% endfor %}
</error>
31 changes: 26 additions & 5 deletions src/Symfony/Bundle/TwigBundle/Resources/views/Exception/logs.html.twig
View file
@@ -1,7 +1,28 @@
<ol class="traces logs">
{% set channel_is_defined = (logs|first).channel is defined %}

<table class="logs">
<thead>
<tr>
<th>Level</th>
{% if channel_is_defined %}<th>Channel</th>{% endif %}
<th class="full-width">Message</th>
</tr>
</thead>

<tbody>
{% for log in logs %}
<li{% if log.priority >= 400 %} class="error"{% elseif log.priority >= 300 %} class="warning"{% endif %}>
{{ log.priorityName }} - {{ log.message|format_log_message(log.context) }}
</li>
<tr class="status-{{ log.priority >= 400 ? 'error' : log.priority >= 300 ? 'warning' : 'normal' }}">
<td class="text-small" nowrap>
<span class="colored text-bold">{{ log.priorityName }}</span>
<span class="text-muted newline">{{ log.timestamp|date('H:i:s') }}</span>
</td>
{% if channel_is_defined %}
<td class="text-small text-bold nowrap">
{{ log.channel }}
</td>
{% endif %}
<td>{{ log.message }}</td>
</tr>
{% endfor %}
</ol>
</tbody>
</table>

0 comments on commit d33c0ee

Please sign in to comment.