-
Notifications
You must be signed in to change notification settings - Fork 268
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Website: Add error report modal (#1102)
This PR is missing data submission and shouldn't be merged. ## What is this PR doing? When a PHP request fails a modal will load that allows users to report errors to us. ## What problem is it solving? It will help us collect Playground errors that we need to improve stability. ## How is the problem addressed? By allowing users to submit error reports to us. ## Testing Instructions - Checkout this branch - Start the local dev server `npm run dev` - Update [this line ](https://github.com/WordPress/wordpress-playground/pull/1102/files#diff-46008bd779d2dd5cb639272c824aa9529721d171731bc22c6b073c0d73aab3c0R9)to be true by default - Confirm that a modal is opened - Modify the input data - Click _Report error_ - See the[ submitted report in Slack](https://wordpress.slack.com/archives/C06Q5DCKZ3L)  --------- Co-authored-by: Adam Zielinski <adam@adamziel.com>
- Loading branch information
Showing
12 changed files
with
257 additions
and
46 deletions.
There are no files selected for viewing
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
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
182 changes: 182 additions & 0 deletions
182
packages/playground/website/src/components/error-report-modal/index.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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,182 @@ | ||
| import { useEffect, useState } from 'react'; | ||
| import Modal from '../modal'; | ||
| import { addFatalErrorListener, logger } from '@php-wasm/logger'; | ||
| import { Button, TextareaControl, TextControl } from '@wordpress/components'; | ||
|
|
||
| import css from './style.module.css'; | ||
|
|
||
| import { usePlaygroundContext } from '../../playground-context'; | ||
|
|
||
| export function ErrorReportModal() { | ||
| const { showErrorModal, setShowErrorModal } = usePlaygroundContext(); | ||
| const [loading, setLoading] = useState(false); | ||
| const [text, setText] = useState(''); | ||
| const [logs, setLogs] = useState(''); | ||
| const [url, setUrl] = useState(''); | ||
| const [submitted, setSubmitted] = useState(false); | ||
| const [submitError, setSubmitError] = useState(''); | ||
|
|
||
| useEffect(() => { | ||
| addFatalErrorListener(logger, (e) => { | ||
| const error = e as CustomEvent; | ||
| if (error.detail?.source === 'php-wasm') { | ||
| setShowErrorModal(true); | ||
| } | ||
| }); | ||
| }, [setShowErrorModal]); | ||
|
|
||
| useEffect(() => { | ||
| resetForm(); | ||
| if (showErrorModal) { | ||
| setLogs(logger.getLogs().join('')); | ||
| setUrl(window.location.href); | ||
| } | ||
| }, [showErrorModal, setShowErrorModal, logs, setLogs]); | ||
|
|
||
| function resetForm() { | ||
| setText(''); | ||
| setLogs(''); | ||
| setUrl(''); | ||
| } | ||
|
|
||
| function resetSubmission() { | ||
| setSubmitted(false); | ||
| setSubmitError(''); | ||
| } | ||
|
|
||
| function onClose() { | ||
| setShowErrorModal(false); | ||
| resetForm(); | ||
| resetSubmission(); | ||
| } | ||
|
|
||
| async function onSubmit() { | ||
| setLoading(true); | ||
| const formdata = new FormData(); | ||
| formdata.append('description', text); | ||
| if (logs) { | ||
| formdata.append('logs', logs); | ||
| } | ||
| if (url) { | ||
| formdata.append('url', url); | ||
| } | ||
| try { | ||
| const response = await fetch( | ||
| 'https://playground.wordpress.net/logger.php', | ||
| { | ||
| method: 'POST', | ||
| body: formdata, | ||
| } | ||
| ); | ||
| setSubmitted(true); | ||
|
|
||
| const body = await response.json(); | ||
| if (!body.ok) { | ||
| throw new Error(body.error); | ||
| } | ||
|
|
||
| setSubmitError(''); | ||
| resetForm(); | ||
| } catch (e) { | ||
| setSubmitError((e as Error).message); | ||
| } finally { | ||
| setLoading(false); | ||
| } | ||
| } | ||
|
|
||
| function getTitle() { | ||
| if (!submitted) { | ||
| return 'Report error'; | ||
| } else if (submitError) { | ||
| return 'Failed to report the error'; | ||
| } else { | ||
| return 'Thank you for reporting the error'; | ||
| } | ||
| } | ||
|
|
||
| function getContent() { | ||
| if (!submitted) { | ||
| return ( | ||
| <> | ||
| Playground crashed because of an error. You can help resolve | ||
| the issue by sharing the error details with us. | ||
| </> | ||
| ); | ||
| } else if (submitError) { | ||
| return ( | ||
| <> | ||
| We were unable to submit the error report. Please try again | ||
| or open an{' '} | ||
| <a href="https://github.com/WordPress/wordpress-playground/issues/"> | ||
| issue on GitHub. | ||
| </a> | ||
| </> | ||
| ); | ||
| } else { | ||
| return ( | ||
| <> | ||
| Your report has been submitted to the{' '} | ||
| <a href="https://wordpress.slack.com/archives/C06Q5DCKZ3L"> | ||
| Making WordPress #playground-logs Slack channel | ||
| </a>{' '} | ||
| and will be reviewed by the team. | ||
| </> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Show the form if the error has not been submitted or if there was an error submitting it. | ||
| * | ||
| * @return {boolean} | ||
| */ | ||
| function showForm() { | ||
| return !submitted || submitError; | ||
| } | ||
|
|
||
| return ( | ||
| <Modal isOpen={showErrorModal} onRequestClose={onClose}> | ||
| <header className={css.errorReportModalHeader}> | ||
| <h2>{getTitle()}</h2> | ||
| <p>{getContent()}</p> | ||
| </header> | ||
| {showForm() && ( | ||
| <> | ||
| <main> | ||
| <TextareaControl | ||
| label="What happened?" | ||
| help="Describe what caused the error and how can we reproduce it." | ||
| value={text} | ||
| onChange={setText} | ||
| className={css.errorReportModalTextarea} | ||
| required={true} | ||
| /> | ||
| <TextareaControl | ||
| label="Logs" | ||
| value={logs} | ||
| onChange={setLogs} | ||
| className={css.errorReportModalTextarea} | ||
| /> | ||
|
|
||
| <TextControl | ||
| label="Url" | ||
| value={url} | ||
| onChange={setUrl} | ||
| /> | ||
| </main> | ||
| <footer className={css.errorReportModalFooter}> | ||
| <Button | ||
| variant="primary" | ||
| onClick={onSubmit} | ||
| isBusy={loading} | ||
| disabled={loading || !text} | ||
| > | ||
| Report error | ||
| </Button> | ||
| <Button onClick={onClose}>Cancel</Button> | ||
| </footer> | ||
| </> | ||
| )} | ||
| </Modal> | ||
| ); | ||
| } |
19 changes: 19 additions & 0 deletions
19
packages/playground/website/src/components/error-report-modal/style.module.css
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,19 @@ | ||
| .error-report-modal__header h2 { | ||
| font-size: 20px; | ||
| } | ||
|
|
||
| .error-report-modal__header p { | ||
| font-size: 13px; | ||
| } | ||
|
|
||
| .error-report-modal__textarea textarea { | ||
| resize: vertical; | ||
| width: 100% !important; | ||
| } | ||
|
|
||
| .error-report-modal__footer { | ||
| margin-top: 20px; | ||
| } | ||
| .error-report-modal__error { | ||
| margin: 16px 0 0; | ||
| } |
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 |
|---|---|---|
|
|
@@ -20,5 +20,4 @@ | |
| padding: 15px; | ||
| text-align: left; | ||
| max-height: 90vh; | ||
| overflow: auto; | ||
| } | ||
23 changes: 23 additions & 0 deletions
23
packages/playground/website/src/components/toolbar-buttons/report-error.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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { MenuItem } from '@wordpress/components'; | ||
| import { bug } from '@wordpress/icons'; | ||
|
|
||
| import { usePlaygroundContext } from '../../playground-context'; | ||
|
|
||
| type Props = { onClose: () => void }; | ||
| export function ReportError({ onClose }: Props) { | ||
| const { setShowErrorModal } = usePlaygroundContext(); | ||
| return ( | ||
| <MenuItem | ||
| icon={bug} | ||
| iconPosition="left" | ||
| data-cy="report-error" | ||
| aria-label="Report an error in Playground" | ||
| onClick={() => { | ||
| setShowErrorModal(true); | ||
| onClose(); | ||
| }} | ||
| > | ||
| Report error | ||
| </MenuItem> | ||
| ); | ||
| } |
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
Oops, something went wrong.