Add a 500 error page and make it automatically display if there is a 500 error as a result of an API call

This commit is contained in:
Joseph Schorr 2014-03-10 17:01:36 -04:00
parent 52d2229482
commit 9ca41dec95
6 changed files with 275 additions and 0 deletions

View file

@ -22,6 +22,7 @@ web = Blueprint('web', __name__)
STATUS_TAGS = app.config['STATUS_TAGS']
@web.route('/', methods=['GET'], defaults={'path': ''})
@web.route('/organization/<path:path>', methods=['GET'])
@no_cache
@ -29,6 +30,11 @@ def index(path):
return render_page_template('index.html')
@web.route('/500', methods=['GET'])
def internal_error_display():
return render_page_template('500.html')
@web.route('/snapshot', methods=['GET'])
@web.route('/snapshot/', methods=['GET'])
@web.route('/snapshot/<path:path>', methods=['GET'])

View file

@ -0,0 +1,35 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="453.54px" height="453.54px" viewBox="0 0 453.54 453.54" enable-background="new 0 0 453.54 453.54" xml:space="preserve">
<rect fill="#00A9D3" width="453.54" height="453.54"/>
<g>
<path fill="#CAD5DA" d="M88.553,86.368L119.628,34l16.113,6.042l21.004,17.264c0,0,14.963,16.688,15.826,16.977
c0.863,0.288,18.415-12.373,18.415-12.373l9.783-1.726c0,0,10.934,46.038,11.221,48.339s32.515,54.958,32.803,56.972
c0.287,2.014-0.288,72.222-2.302,73.085c-2.015,0.863-108.189,9.494-108.189,9.494l-59.561-4.604V120.608L88.553,86.368z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="111.6489" y1="52.2725" x2="107.9083" y2="201.6065">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<polygon fill="url(#SVGID_1_)" points="120.204,36.59 91.143,86.943 78.194,120.32 83.374,199.735 139.482,208.655 "/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="155.4292" y1="35.3975" x2="192.2593" y2="175.8124">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<polygon fill="url(#SVGID_2_)" points="122.218,36.59 146.1,190.24 240.478,169.235 151.147,111.113 "/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="180.3018" y1="100.7939" x2="155.2686" y2="32.0245">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<polygon fill="url(#SVGID_3_)" points="125.383,38.316 154.156,107.085 206.812,107.085 198.899,63.493 178.039,86.368
169.695,80.9 155.883,59.896 136.029,42.632 "/>
</g>
<path fill="#CAD5DA" d="M50.447,81.587L59.739,77l2.667,8.333L69.573,95.5l6.667,41.5c0,0-20,18.333-20.667,18.5s-19.167-5-19.167-5
l5.833-35.5l1.91-18.329L50.447,81.587z"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="54.2388" y1="80.3335" x2="54.2388" y2="118.3335">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<polygon fill="url(#SVGID_4_)" points="51.406,82 45.906,96 44.072,115.585 64.406,118.333 56.322,80.333 "/>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

99
static/img/500/ship.svg Normal file
View file

@ -0,0 +1,99 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="90px" height="453.54px" viewBox="0 0 90 453.54" enable-background="new 0 0 453.54 453.54" xml:space="preserve">
<g>
<rect x="79.797" y="74.656" fill="#231F20" width="0.561" height="1.094"/>
<rect x="80.756" y="74.656" fill="#231F20" width="0.561" height="1.094"/>
<g>
<polygon fill="#4B5059" points="79.16,77.125 79.16,76.188 81.723,76.188 81.723,75.25 79.098,75.25 77.848,80.812 81.723,80.812
81.723,78.5 79.16,78.5 79.16,77.562 81.723,77.562 81.723,77.125 "/>
<rect x="79.16" y="76.188" fill="#A73D37" width="2.562" height="0.938"/>
<rect x="79.16" y="77.562" fill="#A73D37" width="2.562" height="0.938"/>
</g>
<rect x="72.41" y="79.625" fill="#9BA9B2" width="10.5" height="7.75"/>
<polygon fill="#E8E5D1" points="80.598,86.062 78.41,81.125 71.098,81.125 71.098,81.844 69.504,81.844 69.504,84.156
71.098,84.156 71.098,93.711 84.598,94.25 84.598,86.062 "/>
<polyline fill="#E8E5D1" points="2.41,90.819 2.41,85.562 2.973,85.562 3.66,90.819 "/>
<g>
<g>
<rect x="31.306" y="91.138" fill="#707E68" width="5.821" height="1.972"/>
<rect x="25.159" y="91.138" fill="#BFA176" width="5.821" height="1.972"/>
<rect x="37.451" y="91.138" fill="#B07959" width="5.821" height="1.972"/>
<rect x="43.597" y="91.138" fill="#9A6B50" width="5.821" height="1.972"/>
<rect x="49.742" y="91.138" fill="#7E3F20" width="5.821" height="1.972"/>
<rect x="55.887" y="91.138" fill="#D6543B" width="5.822" height="1.972"/>
<rect x="62.033" y="91.138" fill="#B07959" width="5.821" height="1.972"/>
</g>
<g>
<g>
<rect x="62.033" y="88.847" fill="#707E68" width="5.821" height="1.972"/>
<rect x="55.887" y="88.847" fill="#B07959" width="5.822" height="1.972"/>
<rect x="49.742" y="88.847" fill="#D2B48C" width="5.821" height="1.972"/>
<rect x="43.597" y="88.847" fill="#7E3F20" width="5.821" height="1.972"/>
<rect x="37.451" y="88.847" fill="#D6543B" width="5.821" height="1.972"/>
<rect x="31.306" y="88.847" fill="#DEA374" width="5.821" height="1.972"/>
</g>
<g>
<rect x="25.159" y="88.847" fill="#707E68" width="5.821" height="1.972"/>
<rect x="19.014" y="88.847" fill="#B07959" width="5.821" height="1.972"/>
<rect x="12.868" y="88.847" fill="#D2B48C" width="5.822" height="1.972"/>
<rect x="6.723" y="88.847" fill="#7E3F20" width="5.821" height="1.972"/>
</g>
</g>
<g>
<rect x="37.45" y="84.266" fill="#707E68" width="5.821" height="1.972"/>
<rect x="43.597" y="84.266" fill="#BFA176" width="5.821" height="1.972"/>
<rect x="31.305" y="84.266" fill="#B07959" width="5.821" height="1.972"/>
<rect x="25.159" y="84.266" fill="#9A6B50" width="5.821" height="1.972"/>
<rect x="19.014" y="84.266" fill="#7E3F20" width="5.821" height="1.972"/>
<rect x="12.868" y="84.266" fill="#D6543B" width="5.822" height="1.972"/>
<rect x="6.723" y="84.266" fill="#B07959" width="5.821" height="1.972"/>
</g>
<g>
<g>
<rect x="6.723" y="86.557" fill="#707E68" width="5.821" height="1.972"/>
<rect x="12.868" y="86.557" fill="#B07959" width="5.822" height="1.972"/>
<rect x="19.014" y="86.557" fill="#D2B48C" width="5.821" height="1.972"/>
<rect x="25.159" y="86.557" fill="#7E3F20" width="5.821" height="1.972"/>
<rect x="31.305" y="86.557" fill="#D6543B" width="5.821" height="1.972"/>
<rect x="37.45" y="86.557" fill="#DEA374" width="5.821" height="1.972"/>
</g>
<g>
<rect x="43.597" y="86.557" fill="#707E68" width="5.821" height="1.972"/>
<rect x="49.742" y="86.557" fill="#B07959" width="5.821" height="1.972"/>
<rect x="55.887" y="86.557" fill="#D2B48C" width="5.822" height="1.972"/>
<rect x="62.033" y="86.557" fill="#7E3F20" width="5.821" height="1.972"/>
</g>
</g>
</g>
<polygon fill="#A82526" points="87.473,92.819 24.348,92.819 24.348,90.069 6.848,90.069 0,90.069 1.721,94.688 87.473,94.688 "/>
<path fill="#59565F" d="M1.721,94.688l0.502,1.347c-5,2.965,0,5.61,0,5.61s83.5,0.799,83.677,0s1.573-3.076,1.573-3.076v-3.881
H1.721z"/>
<g>
<rect x="69.91" y="82.312" fill="#636B62" width="1.156" height="0.844"/>
<rect x="71.551" y="82.312" fill="#636B62" width="1.156" height="0.844"/>
<rect x="73.191" y="82.312" fill="#636B62" width="1.156" height="0.844"/>
<rect x="74.832" y="82.312" fill="#636B62" width="1.156" height="0.844"/>
<rect x="76.473" y="82.312" fill="#636B62" width="1.156" height="0.844"/>
</g>
<g>
<rect x="77.246" y="87.163" fill="#9BA9B2" width="0.828" height="0.844"/>
<rect x="78.422" y="87.163" fill="#9BA9B2" width="0.828" height="0.844"/>
<rect x="79.598" y="87.163" fill="#9BA9B2" width="0.828" height="0.844"/>
<rect x="80.773" y="87.163" fill="#9BA9B2" width="0.828" height="0.844"/>
<rect x="81.949" y="87.163" fill="#9BA9B2" width="0.828" height="0.844"/>
</g>
<g>
<rect x="77.309" y="89.225" fill="#9BA9B2" width="0.828" height="0.844"/>
<rect x="78.484" y="89.225" fill="#9BA9B2" width="0.828" height="0.844"/>
<rect x="79.66" y="89.225" fill="#9BA9B2" width="0.828" height="0.844"/>
<rect x="80.836" y="89.225" fill="#9BA9B2" width="0.828" height="0.844"/>
<rect x="82.012" y="89.225" fill="#9BA9B2" width="0.828" height="0.844"/>
</g>
<circle fill="#5F3F2B" cx="4.191" cy="92.281" r="0.531"/>
<rect x="80.186" y="82.312" fill="#808080" width="0.828" height="0.844"/>
<rect x="81.361" y="82.312" fill="#808080" width="0.828" height="0.844"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 5.7 KiB

39
static/img/500/water.svg Normal file
View file

@ -0,0 +1,39 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="453.54px" height="453.54px" viewBox="0 0 453.54 453.54" enable-background="new 0 0 453.54 453.54" xml:space="preserve">
<g>
<path fill="#608DA2" d="M35.218,327.768c0,0,6.968-3.055,15.596-5.071c8.628-2.019,32.723-5.351,38.561-6.217
s9.791-1.617,9.791-1.617s-1.682-3.031,3.623-6.049c0,0-1.65,5.794,6.934,6.829c0,0-1.543,3.026-6.945,1.529
c-5.403-1.498-23.869,18.74-50.771,15.825C52.005,332.997,35.635,333.734,35.218,327.768z"/>
<path fill="#608DA2" d="M52.425,331.592c0,0,1.417-0.072,2.878,2.231c1.462,2.306,2.81,4.634,4.659,3.272
c0,0,0.811-0.655-0.449-3.124s-1.633-2.268-3.502-3.169"/>
<path fill="#CCCCCC" d="M35.778,328.087c0,0,20.057-1.34,23.473-1.82c3.416-0.48,13.04-1.496,15.736-2.264
s23.476-6.962,25.139-7.27c1.664-0.308,7.606-0.167,7.836-0.738c0.229-0.572-6.029,0.688-5.465-6.043c0,0-3.349,0.708-3.042,4.812
l0.079,0.359c0,0-21.463,3.516-25.714,3.978C69.568,319.562,46.746,322.869,35.778,328.087z"/>
</g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="225.002" y1="450.7471" x2="228.5022" y2="101.2466">
<stop offset="0" style="stop-color:#2E3192"/>
<stop offset="1" style="stop-color:#0071BC"/>
</linearGradient>
<path opacity="0.8" fill="url(#SVGID_1_)" d="M450.2,93.711c-3.546,0-3.546,2.115-7.091,2.115c-3.546,0-3.546-2.115-7.092-2.115
s-3.546,2.115-7.09,2.115c-3.545,0-3.545-2.115-7.089-2.115c-3.545,0-3.545,2.115-7.089,2.115c-3.546,0-3.546-2.115-7.092-2.115
s-3.546,2.115-7.092,2.115c-3.545,0-3.545-2.115-7.091-2.115s-3.546,2.115-7.091,2.115c-3.544,0-3.544-2.115-7.09-2.115
c-3.545,0-3.545,2.115-7.089,2.115c-3.547,0-3.547-2.115-7.093-2.115c-3.547,0-3.547,2.115-7.093,2.115s-3.546-2.115-7.09-2.115
c-3.546,0-3.546,2.115-7.091,2.115s-3.545-2.115-7.091-2.115c-3.547,0-3.547,2.115-7.093,2.115s-3.546-2.115-7.093-2.115
c-3.546,0-3.546,2.115-7.09,2.115c-3.546,0-3.546-2.115-7.092-2.115c-3.547,0-3.547,2.115-7.093,2.115
c-3.547,0-3.547-2.115-7.093-2.115s-3.546,2.115-7.092,2.115c-3.545,0-3.545-2.115-7.092-2.115c-3.546,0-3.546,2.115-7.093,2.115
c-3.546,0-3.546-2.115-7.092-2.115c-3.547,0-3.547,2.115-7.092,2.115c-3.547,0-3.547-2.115-7.094-2.115
c-3.546,0-3.546,2.115-7.092,2.115c-3.547,0-3.547-2.115-7.094-2.115s-3.547,2.115-7.093,2.115c-3.545,0-3.545-2.115-7.093-2.115
c-3.547,0-3.547,2.115-7.092,2.115c-3.546,0-3.546-2.115-7.093-2.115s-3.547,2.115-7.095,2.115c-3.544,0-3.544-2.115-7.089-2.115
s-3.544,2.115-7.088,2.115c-3.544,0-3.544-2.115-7.091-2.115c-3.546,0-3.546,2.115-7.093,2.115c-3.545,0-3.545-2.115-7.089-2.115
c-3.546,0-3.546,2.115-7.091,2.115c-3.547,0-3.547-2.115-7.094-2.115c-3.544,0-3.544,2.115-7.091,2.115s-3.546-2.115-7.093-2.115
c-3.546,0-3.546,2.115-7.093,2.115c-3.547,0-3.547-2.115-7.093-2.115c-3.546,0-3.546,2.115-7.093,2.115
c-3.548,0-3.548-2.115-7.095-2.115s-3.547,2.115-7.093,2.115c-3.548,0-3.548-2.115-7.096-2.115s-3.548,2.115-7.096,2.115
c-3.547,0-3.547-2.115-7.096-2.115c-3.548,0-3.548,2.115-7.095,2.115c-3.548,0-3.548-2.115-7.096-2.115
c-3.549,0-3.549,2.115-7.098,2.115c-3.546,0-3.546-2.115-7.093-2.115s-3.547,2.115-7.095,2.115s-3.548-2.115-7.096-2.115
c-3.547,0-3.547,2.115-7.096,2.115c-3.549,0-3.549-2.115-7.098-2.115c-3.546,0-3.546,2.115-7.094,2.115
c-3.55,0-3.55-2.115-7.1-2.115c-3.553,0-3.553,2.115-7.105,2.115c-1.646,0-2.527-0.454-3.354-0.942V453.54h453.54V94.647
C452.718,94.162,451.837,93.711,450.2,93.711z"/>
</svg>

After

Width:  |  Height:  |  Size: 3.6 KiB

View file

@ -3516,6 +3516,11 @@ quayApp.run(['$location', '$rootScope', 'Restangular', 'UserService', 'PlanServi
return false;
}
if (response.status == 500) {
document.location = '/500';
return false;
}
return true;
});

91
templates/500.html Normal file
View file

@ -0,0 +1,91 @@
<html>
<title>Quay.io - Something went wrong!</title>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.no-icons.min.css">
<link href='//fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
.ship-header {
width: 100%;
height: 400px;
position: relative;
}
.ship-header div.layer {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.ship-header .background {
background-size: cover;
background-image: url(/static/img/500/background.svg);
}
.ship-header .ship {
background-size: cover;
background-image: url(/static/img/500/ship.svg);
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
width: 19%;
}
.ship-header .water {
background-size: cover;
background-image: url(/static/img/500/water.svg);
}
@-webkit-keyframes steaming {
0% {
-webkit-transform: translateX(0px) scaleX(1);
}
50% {
-webkit-transform: translateX(-180%) scaleX(1);
}
51% {
-webkit-transform: translateX(-180%) scaleX(-1);
}
99% {
-webkit-transform: translateX(0px) scaleX(-1);
}
100% {
-webkit-transform: translateX(0px) scaleX(1);
}
}
.ship-header .ship {
-webkit-animation-name: steaming;
-webkit-animation-duration: 30s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.information {
padding: 30px;
text-align: center;
}
.information h3 {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="header" class="ship-header">
<div class="background layer"></div>
<div id="ship" class="ship"></div>
<div class="water layer"></div>
</div>
<div class="information">
<img src="/static/img/quay-logo.png">
<h3>Something went wrong on our end!</h3>
<h4>
We're currently working to fix the problem, but if its persists please feel free to <a href="/contact">contact us</a>. In the meantime, try a refreshing drink (or just refreshing).
</h4>
</div>
</body>
</html>