Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add dedicated error page (#586)
* feat(wip): add basic error page skeleton * refactor: PageTitle component from jsx to tsx * feat: add basic error page * test: ability to render example error page in dev mode * Apply suggestions from code review Co-authored-by: Gigi <109058+dergigi@users.noreply.github.com>
- Loading branch information
1 parent
4c7ba2b
commit 42c9f5d
Showing
8 changed files
with
204 additions
and
72 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,92 @@ | ||
import { Trans, useTranslation } from 'react-i18next' | ||
import * as rb from 'react-bootstrap' | ||
import { useRouteError } from 'react-router-dom' | ||
import PageTitle from './PageTitle' | ||
import { t } from 'i18next' | ||
import { useEffect } from 'react' | ||
|
||
export function ErrorThrowingComponent() { | ||
useEffect(() => { | ||
throw new Error('This error is thrown on purpose. Only to be used for testing.') | ||
}, []) | ||
return <></> | ||
} | ||
|
||
interface ErrorViewProps { | ||
title: string | ||
subtitle: string | ||
reason: string | ||
stacktrace?: string | ||
} | ||
|
||
function ErrorView({ title, subtitle, reason, stacktrace }: ErrorViewProps) { | ||
return ( | ||
<div> | ||
<PageTitle title={title} subtitle={subtitle} /> | ||
|
||
<p> | ||
<Trans i18nKey="error_page.report_bug"> | ||
Please{' '} | ||
<a | ||
href="https://github.com/joinmarket-webui/jam/issues/new?labels=bug&template=bug_report.md" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
open an issue on GitHub | ||
</a>{' '} | ||
for this error to be reviewed and resolved in an upcoming version. | ||
</Trans> | ||
</p> | ||
|
||
<div className="my-4"> | ||
<h6>{t('error_page.heading_reason')}</h6> | ||
<rb.Alert variant="danger">{reason}</rb.Alert> | ||
</div> | ||
|
||
{stacktrace && ( | ||
<div className="my-4"> | ||
<h6>{t('error_page.heading_stacktrace')}</h6> | ||
<pre className="border p-2"> | ||
<code>{stacktrace}</code> | ||
</pre> | ||
</div> | ||
)} | ||
</div> | ||
) | ||
} | ||
|
||
function UnknownError({ error }: { error: any }) { | ||
const { t } = useTranslation() | ||
|
||
return ( | ||
<ErrorView | ||
title={t('error_page.unknown_error.title')} | ||
subtitle={t('error_page.unknown_error.subtitle')} | ||
reason={error.message || t('global.errors.reason_unknown')} | ||
stacktrace={error.stack} | ||
/> | ||
) | ||
} | ||
|
||
function ErrorWithDetails({ error }: { error: Error }) { | ||
const { t } = useTranslation() | ||
|
||
return ( | ||
<ErrorView | ||
title={t('error_page.error_with_details.title')} | ||
subtitle={t('error_page.error_with_details.subtitle')} | ||
reason={error.message || t('global.errors.reason_unknown')} | ||
stacktrace={error.stack} | ||
/> | ||
) | ||
} | ||
|
||
export default function ErrorPage() { | ||
const error = useRouteError() | ||
|
||
if (error instanceof Error) { | ||
return <ErrorWithDetails error={error} /> | ||
} else { | ||
return <UnknownError error={error} /> | ||
} | ||
} |
10 changes: 8 additions & 2 deletions
10
src/components/PageTitle.jsx → src/components/PageTitle.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters