diff --git a/packages/react-core/src/components/ErrorPage/ErrorPage.tsx b/packages/react-core/src/components/ErrorPage/ErrorPage.tsx index 29a281bb7..9fefad05c 100644 --- a/packages/react-core/src/components/ErrorPage/ErrorPage.tsx +++ b/packages/react-core/src/components/ErrorPage/ErrorPage.tsx @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import { Button } from '@douglasneuroinformatics/libui/components'; import { useDownload, useTranslation } from '@douglasneuroinformatics/libui/hooks'; @@ -13,39 +13,78 @@ export type ErrorPageProps = { export const ErrorPage = ({ error }: ErrorPageProps) => { const download = useDownload(); const { t } = useTranslation(); + const [copyState, setCopyState] = useState<'COPIED' | 'FAILED' | 'READY'>('READY'); useEffect(() => { console.error(error); }, [error]); + const report = JSON.stringify(serializeError(error), null, 2); + + // `navigator.clipboard` is absent outside a secure context, so an instance served over plain http + // has no clipboard at all. Say so rather than appearing to copy nothing — the report is the only + // thing the administrator has to go on, and the download beside this button is the way out. + const copyReport = async () => { + try { + if (!navigator.clipboard) { + throw new Error('The clipboard is unavailable outside a secure context'); + } + await navigator.clipboard.writeText(report); + setCopyState('COPIED'); + } catch (err) { + console.error(err); + setCopyState('FAILED'); + } + }; + let heading = t({ en: 'Unknown Error', fr: 'Erreur inconnue' }); if (isAxiosError(error) && error.status) { heading = `${error.status} - ${getReasonPhrase(error.status)}`; } return ( -
{t({ - en: 'We apologize for the inconvenience. Please download the error report using the button below and send it to your platform administrator for further assistance.', - fr: "Nous nous excusons pour ce désagrément. Veuillez télécharger le rapport d'erreur à l'aide du bouton ci-dessous et l'envoyer à l'administrateur de votre plateforme pour obtenir de l'aide." + en: 'We apologize for the inconvenience. Please copy or download the error report using the buttons below and send it to your platform administrator for further assistance.', + fr: "Nous nous excusons pour ce désagrément. Veuillez copier ou télécharger le rapport d'erreur à l'aide des boutons ci-dessous et l'envoyer à l'administrateur de votre plateforme pour obtenir de l'aide." })}