diff options
author | wxiaoguang <wxiaoguang@gmail.com> | 2023-04-14 13:19:11 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2023-04-14 13:19:11 +0800 |
commit | 1c8bc4081a4f4d0d921ac218cb724ce97924d410 (patch) | |
tree | 038587701606c7abb11b29f5b63a14e12cb2239e /templates/status | |
parent | 5768bafeb28e4e4212ae0e2abc7f22c9c8b7c653 (diff) | |
download | gitea-1c8bc4081a4f4d0d921ac218cb724ce97924d410.tar.gz gitea-1c8bc4081a4f4d0d921ac218cb724ce97924d410.zip |
Show friendly 500 error page to users and developers (#24110)
Close #24104
This also introduces many tests to cover many complex error handling
functions.
### Before
The details are never shown in production.
<details>

</details>
### After
The details could be shown to site admin users. It is safe.

Diffstat (limited to 'templates/status')
-rw-r--r-- | templates/status/404.tmpl | 2 | ||||
-rw-r--r-- | templates/status/500.tmpl | 41 |
2 files changed, 33 insertions, 10 deletions
diff --git a/templates/status/404.tmpl b/templates/status/404.tmpl index 89fb01fb20..a55e2fbad9 100644 --- a/templates/status/404.tmpl +++ b/templates/status/404.tmpl @@ -1,5 +1,5 @@ {{template "base/head" .}} -<div role="main" aria-label="{{.Title}}" class="page-content ui container center gt-full-screen-width {{if .IsRepo}}repository{{end}}"> +<div role="main" aria-label="{{.Title}}" class="page-content ui container center gt-w-screen {{if .IsRepo}}repository{{end}}"> {{if .IsRepo}}{{template "repo/header" .}}{{end}} <div class="ui container center"> <p style="margin-top: 100px"><img src="{{AssetUrlPrefix}}/img/404.png" alt="404"></p> diff --git a/templates/status/500.tmpl b/templates/status/500.tmpl index 50f19ec664..e8984aa18d 100644 --- a/templates/status/500.tmpl +++ b/templates/status/500.tmpl @@ -1,13 +1,36 @@ {{template "base/head" .}} -<div role="main" aria-label="{{.Title}}" class="page-content ui container gt-full-screen-width center"> - <p style="margin-top: 100px"><img src="{{AssetUrlPrefix}}/img/500.png" alt="500"></p> +<div role="main" aria-label="{{.Title}}" class="page-content gt-w-screen status-page-500"> + <p class="gt-mt-5 center"><img src="{{AssetUrlPrefix}}/img/500.png" alt="Internal Server Error"></p> <div class="ui divider"></div> - <br> - {{if .ErrorMsg}} - <p>{{.locale.Tr "error.occurred"}}:</p> - <pre style="text-align: left">{{.ErrorMsg}}</pre> - {{end}} - {{if .ShowFooterVersion}}<p>{{.locale.Tr "admin.config.app_ver"}}: {{AppVer}}</p>{{end}} - {{if .IsAdmin}}<p>{{.locale.Tr "error.report_message" | Safe}}</p>{{end}} + + <div class="ui container gt-mt-5"> + {{if .ErrorMsg}} + <p>{{.locale.Tr "error.occurred"}}:</p> + <pre class="gt-whitespace-pre-wrap">{{.ErrorMsg}}</pre> + {{end}} + + <div class="center gt-mt-5"> + {{if .ShowFooterVersion}}<p>{{.locale.Tr "admin.config.app_ver"}}: {{AppVer}}</p>{{end}} + {{if .IsAdmin}}<p>{{.locale.Tr "error.report_message" | Safe}}</p>{{end}} + </div> + </div> </div> +{{/* when a sub-template triggers an 500 error, its parent template has been partially rendered, +then the 500 page will be rendered after that partially rendered page, the HTML/JS are totally broken. +so use this inline script to try to move it to main viewport */}} +<script type="module"> +const embedded = document.querySelector('.page-content .page-content.status-page-500'); +if (embedded) { + // move footer to main view + const footer = document.querySelector('footer'); + if (footer) document.querySelector('body').append(footer); + // move the 500 error page content to main view + const embeddedParent = embedded.parentNode; + let main = document.querySelector('.page-content'); + main = main ?? document.querySelector('body'); + main.prepend(document.createElement('hr')); + main.prepend(embedded); + embeddedParent.remove(); // remove the unrelated 500-page elements (eg: the duplicate nav bar) +} +</script> {{template "base/footer" .}} |