Website: Add error report modal

packages/docs/site/docs/13-contributing/07-crash-reports.md

@@ -12,7 +12,7 @@ When Playground crashes on Playground.WordPress.net users are able to submit a c
 ## Development
 
 Logs are sent to the [logger API on Playground.WordPress.net](https://github.com/WordPress/wordpress-playground/blob/c52d7dbd94dbe3ffc57adde4d9844545ade97f93/packages/playground/website/public/logger.php). The logger API is a simple REST API that accepts a POST request with a `message` parameter.
-The API validates the message and then sends it to the [#playground-logs channel on the Making WordPress Slack(https://wordpress.slack.com/archives/C06Q5DCKZ3L).
+The API validates the message and then sends it to the [#playground-logs channel on the Making WordPress Slack](https://wordpress.slack.com/archives/C06Q5DCKZ3L).
 
 ### Slack app
 

packages/php-wasm/logger/src/lib/logger.ts

@@ -127,6 +127,7 @@ export class Logger extends EventTarget {
 					new CustomEvent(this.fatalErrorEvent, {
 						detail: {
 							logs: this.getLogs(),
+							source: event.source,
 						},
 					})
 				);

packages/php-wasm/universal/src/lib/base-php.ts

@@ -288,6 +288,8 @@ export abstract class BasePHP implements IsomorphicLocalPHP {
 				);
 				// @ts-ignore
 				error.output = output;
+				// @ts-ignore
+				error.source = 'request';
 				console.error(error);
 				throw error;
 			}
@@ -296,6 +298,8 @@ export abstract class BasePHP implements IsomorphicLocalPHP {
 			this.dispatchEvent({
 				type: 'request.error',
 				error: e as Error,
+				// Distinguish between PHP request and PHP-wasm errors
+				source: (e as any).source ?? 'php-wasm',
 			});
 			throw e;
 		} finally {

packages/php-wasm/universal/src/lib/universal-php.ts

@@ -14,6 +14,7 @@ export interface PHPRequestEndEvent {
 export interface PHPRequestErrorEvent {
 	type: 'request.error';
 	error: Error;
+	source?: 'request' | 'php-wasm';
 }
 
 /**

packages/playground/website/.htaccess

@@ -5,7 +5,7 @@ AddEncoding x-gzip .gz
 Header unset ETag
 Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
 </FilesMatch>
-<FilesMatch "index\.js|blueprint-schema\.json|wp-cli.phar">
+<FilesMatch "index\.js|blueprint-schema\.json|logger.php|wp-cli.phar">
 Header set Access-Control-Allow-Origin "*"
 Header unset ETag
 Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"

packages/playground/website/public/logger.php

@@ -33,13 +33,13 @@ function response($ok, $error = null)
 function validate_message($message)
 {
     // Validate description. Description is required
-    preg_match('/(?<=What happened\?\n\n)(.*?)(?=\n\nLogs)/s', $message, $description);
+    preg_match('/(?<=What happened\?\n\n)(.+?)(?=\n\nLogs)/s', $message, $description);
     if (empty($description)) {
         return false;
     }
 
     // Validate logs if exists. Logs need to match the PHP error log format
-    preg_match('/(?<=Logs\n\n)(.*?)(?=\n\nUrl)/s', $message, $logs);
+    preg_match('/(?<=Logs\n\n)(.+?)(?=\n\nUrl)/s', $message, $logs);
     if (!empty($logs)) {
         $logs = $logs[0];
         if (preg_match('/\[\d{2}-[A-Za-z]{3}-\d{4} \d{2}:\d{2}:\d{2} UTC\](.*)/s', $logs) !== 1) {
@@ -48,7 +48,11 @@ function validate_message($message)
     }
 
     // Validate URL if exists
-    preg_match('/(?<=Url\n\n)(.*)/s', $message, $url);
+    preg_match(
+        '/(?<=Url\n\n)(.+)/s',
+        $message,
+        $url
+    );
     if (!empty($url)) {
         $url = $url[0];
         if (filter_var($url, FILTER_VALIDATE_URL) === false) {
@@ -66,12 +70,14 @@ function validate_message($message)
 if (!isset($_POST['message'])) {
     response(false, 'No message provided');
 }
-$text = $_POST['message'];
+$message = urldecode($_POST['message']);
+$message = str_replace("\r\n", "\n", $message); // Replace \r\n with \n
+$message = str_replace("\r", "\n", $message); // Replace remaining \r with \n
 
-if (!validate_message($text)) {
+if (!validate_message($message)) {
     response(false, 'Invalid message');
 }
-$text = urlencode($text);
+$text = urlencode($message);
 
 $ch = curl_init();
 curl_setopt($ch, CURLOPT_URL, "https://slack.com/api/chat.postMessage?channel=$channel&text=$text");

packages/playground/website/src/components/error-report-modal/index.tsx

@@ -0,0 +1,169 @@
+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';
+
+export function ErrorReportModal() {
+	const [showModal, setShowModal] = useState(false);
+	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') {
+				setShowModal(true);
+				setText('');
+				setLogs(error.detail.logs.join(''));
+				setUrl(window.location.href);
+			}
+		});
+	}, []);
+
+	function resetForm() {
+		setText('');
+		setLogs('');
+		setUrl('');
+	}
+
+	function resetSubmission() {
+		setSubmitted(false);
+		setSubmitError('');
+	}
+
+	function onClose() {
+		setShowModal(false);
+		resetForm();
+		resetSubmission();
+	}
+
+	async function onSubmit() {
+		setLoading(true);
+		const formdata = new FormData();
+		formdata.append(
+			'message',
+			['What happened?', text, 'Logs', logs, 'Url', url].join('\n\n')
+		);
+		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={showModal} 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>
+	);
+}

packages/playground/website/src/components/error-report-modal/style.module.css

@@ -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;
+}

packages/playground/website/src/components/modal/style.module.css

@@ -20,5 +20,4 @@
 	padding: 15px;
 	text-align: left;
 	max-height: 90vh;
-	overflow: auto;
 }

packages/playground/website/src/main.tsx

@@ -27,6 +27,11 @@ import { ExportFormValues } from './github/github-export-form/form';
 import { joinPaths } from '@php-wasm/util';
 import { PlaygroundContext } from './playground-context';
 import { collectWindowErrors, logger } from '@php-wasm/logger';
+import { ErrorReportModal } from './components/error-report-modal';
+
+collectWindowErrors(logger);
+
+collectWindowErrors(logger);
 
 collectWindowErrors(logger);
 
@@ -87,6 +92,7 @@ function Main() {
 
 	return (
 		<PlaygroundContext.Provider value={{ storage }}>
+			<ErrorReportModal />
 			<PlaygroundViewport
 				storage={storage}
 				displayMode={displayMode}