pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: Add error pages (#13144) 

* add custom error pages for 404 and 500 responses

* refactor error page styles into separate template

* move error pages to superset-frontend

* fix whitespace on error pages

* refactor error pages to be generated by jinja

* generate static error pages with webpack
This commit is contained in:
Sam Faber-Manning 2021-03-04 09:58:16 -08:00 committed by GitHub
parent 483405fff9
commit 0318b6d4ae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 352 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
superset-frontend/images/error404.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
superset-frontend/images/error500.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

323
superset-frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
superset-frontend/package.json
View File

@ -111,6 +111,7 @@
"fontsource-inter": "^3.0.5",
"geolib": "^2.0.24",
"global-box": "^1.2.0",
"html-webpack-plugin": "^4.5.1",
"immutable": "^4.0.0-rc.12",
"interweave": "^11.2.0",
"jquery": "^3.5.1",

93
superset-frontend/src/staticPages/404.html Normal file
View File

@ -0,0 +1,93 @@
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=q, initial-scale=1.0">
<link rel="icon" type="image/png" href="<%= require('../../images/favicon.png')%>">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
<style>
html { height: 100%; }
body {
color: #1985A0;
font-family: 'Inter', sans-serif;
height: 100%;
margin: 0;
display: flex;
align-items:stretch;
}
h1 {
font-weight: 600;
font-size: 88px;
margin: 0;
}
p {
font-weight: 500;
font-size: 24px;
line-height: 40px;
width: 490px;
}
.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
background-color: #1985A0; /* Green */
border: none;
color: white;
padding: 16px 38px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 11px;
border-radius: 4px;
text-transform: uppercase;
}
.error-page-content {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
max-width: 1350px;
margin: auto;
width: 100%;
padding: 56px;
}
img {
width: 540px;
}
</style>
<title>404: Not found | Superset</title>
</head>
<body>
<div class="error-page-content">
<section>
<h1>Page not found</h1>
<p>Sorry, we cannot find t he page you are looking for. You may have mistyped the address or the page may have moved.</p>
<a href="/" class="button">Back to home</a>
</section>
<img alt="404" src="<%= require('../../images/error404.png')%>" width="540">
</div>
</body>
</html>

92
superset-frontend/src/staticPages/500.html Normal file
View File

@ -0,0 +1,92 @@
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=q, initial-scale=1.0">
<link rel="icon" type="image/png" href="<%= require('../../images/favicon.png')%>">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
<style>
html { height: 100%; }
body {
color: #1985A0;
font-family: 'Inter', sans-serif;
height: 100%;
margin: 0;
display: flex;
align-items:stretch;
}
h1 {
font-weight: 600;
font-size: 88px;
margin: 0;
}
p {
font-weight: 500;
font-size: 24px;
line-height: 40px;
width: 490px;
}
.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
background-color: #1985A0; /* Green */
border: none;
color: white;
padding: 16px 38px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 11px;
border-radius: 4px;
text-transform: uppercase;
}
.error-page-content {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
max-width: 1350px;
margin: auto;
width: 100%;
padding: 56px;
}
img {
width: 540px;
}
</style>
<title>500: Internal server error | S uperset</title>
</head>
<body>
<div class="error-page-content">
<section>
<h1>Internal server error</h1>
<p>Sorry, something went wrong. We are fixing the mistake now. Try again later or go back to home.</p>
<a href="/" class="button">Back to home</a>
</section>
<img alt="500" src="<%= require('../../images/error500.png')%>" width="540">
</div>
</body>
</html>

28
superset-frontend/webpack.config.js
View File

@ -23,6 +23,7 @@ const webpack = require('webpack');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
@ -119,6 +120,20 @@ const plugins = [
{ from: 'stylesheets', to: 'stylesheets' },
],
}),
// static pages
new HtmlWebpackPlugin({
template: './src/staticPages/404.html',
inject: true,
chunks: [],
filename: '404.html',
}),
new HtmlWebpackPlugin({
template: './src/staticPages/500.html',
inject: true,
chunks: [],
filename: '500.html',
}),
];
if (!process.env.CI) {
@ -375,12 +390,25 @@ const config = {
/* for css linking images (and viz plugin thumbnails) */
{
test: /\.png$/,
issuer: {
exclude: /\/src\/staticPages\//,
},
loader: 'url-loader',
options: {
limit: 10000,
name: '[name].[hash:8].[ext]',
},
},
{
test: /\.png$/,
issuer: {
test: /\/src\/staticPages\//,
},
loader: 'url-loader',
options: {
limit: 150000, // Convert images < 150kb to base64 strings
},
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
issuer: {