feat: Add error pages

[samtfm]

SUMMARY

Adds custom 404 and 500 error pages as static html

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TEST PLAN

ADDITIONAL INFORMATION

• Has associated issue:
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

[codecov-io]

Codecov Report

Merging #13144 (3da5007) into master (026782e) will decrease coverage by 4.33%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master   #13144      +/-   ##
==========================================
- Coverage   77.21%   72.88%   -4.34%     
==========================================
  Files         903      555     -348     
  Lines       45662    20535   -25127     
  Branches     5506     5374     -132     
==========================================
- Hits        35258    14966   -20292     
+ Misses      10278     5441    -4837     
- Partials      126      128       +2     

Flag	Coverage Δ
cypress	58.44% <ø> (+0.43%)	⬆️
javascript	62.12% <ø> (-1.29%)	⬇️
mysql	?
postgres	?
python	?
sqlite	?

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
superset-frontend/src/dashboard/reducers/types.ts	0.00% <0.00%> (-100.00%)	⬇️
...frontend/src/components/ErrorMessage/IssueCode.tsx	0.00% <0.00%> (-100.00%)	⬇️
...rc/components/ErrorMessage/TimeoutErrorMessage.tsx	0.00% <0.00%> (-100.00%)	⬇️
...c/components/ErrorMessage/DatabaseErrorMessage.tsx	0.00% <0.00%> (-94.74%)	⬇️
.../components/ErrorMessage/ParameterErrorMessage.tsx	6.25% <0.00%> (-90.63%)	⬇️
...rontend/src/components/ErrorMessage/ErrorAlert.tsx	20.40% <0.00%> (-73.47%)	⬇️
...nd/src/components/ErrorMessage/BasicErrorAlert.tsx	35.29% <0.00%> (-64.71%)	⬇️
...onents/ErrorMessage/ErrorMessageWithStackTrace.tsx	27.77% <0.00%> (-50.01%)	⬇️
...ontend/src/dashboard/components/dnd/handleHover.js	88.88% <0.00%> (-11.12%)	⬇️
superset-frontend/src/utils/urlUtils.ts	50.00% <0.00%> (-9.10%)	⬇️
... and 555 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 026782e...577dade. Read the comment docs.

[dpgaspar]

nit: @samtfm can you add to the description on the PR, that this is just a placeholder, since they are not actually going to get rendered

[etr2460]

Hi @samtfm, thanks for the contribution! I'm wondering if you could speak a bit about the architecture approach you chose here.

Most of the frontend assets in Superset are rendered using React, and those that don't we're quickly trying to replace (like the HTML templates that flask renders). Why was the decision made to use raw HTML and CSS for these pages instead of making use of the shared React components and React render logic already available in the app?

[willbarrett]

Hi @etr2460 the goal from Preset's side is to add static error pages that can be rendered directly from a web server (such as nginx) without relying on the rest of the systems. We thought they might be nice to contribute back to the community for others who have the same need. Happy to make that more obvious however it would be most useful.

[etr2460]

Thanks for the context @willbarrett! Adding this to the PR summary would definitely be helpful (especially since they're not used anywhere in code, and therefore might get deleted as unused code in the future without that documentation).

Also, for this use case, I wonder if the CSS (and even images with base64) should be embedded within the html files to prevent further dependencies.

[willbarrett]

Yes, I think that's a good idea @etr2460 - a little duplication would make them easier to deploy. If we find we need more than two, it might be possible to create a simple static page generator to spit them out, but I think we should wait for a request for a 3rd error page before going down that path.

[willbarrett]

Perhaps we can add a README to the static-pages folder to explain the presence of these HTML files.

[samtfm]

Thanks all. Copying the css into the two files sounds good. I'd also propose I move the referenced image files into this static-pages directory.

I'm a little wary of the legibility of embedding images as base64 if these aren't going to be auto-generated, but I suppose I could still include the source files in the same folder, and include the steps for updating the html in the README.

[ktmud]

Maybe you can take advantage of the html-webpack-plugin to build a static error pages with all styles and images embedded?

I'm also wondering whether it makes sense to let Python/Jinja render 404 and 403 first, and only fallback to a static 500 page in Nginx if the Python render fails. So you can do more advanced stuff with these error pages like having global navs and render more customized error messages, etc

[samtfm]

@ktmud thank you for the suggestion! I've refactored this using html-webpack-plugin to render these html files directly to the distribution folder.
I'm leaving the css hard coded into each html file for now, because fully embedding it from a separate file would require even more complications to the webpack config, and I think this is fine enough for now with just these two pages.

(package-lock.json got updated in a big way that I didn't intend, I am currently looking into how to tell npm to add a package without doing this lockfileVersion update)

[ktmud]

@samtfm Did you use npm 7? We recently upgrade lockfileversion 2 but you need to use npm 7: #13100

[willbarrett]

LGTM once rebased.