Show error log if Playground fails to start

packages/php-wasm/logger/src/lib/handlers/log-to-memory.ts

@@ -1,11 +1,11 @@
 import { LogHandler } from '../log-handlers';
 import { formatLogEntry, Log } from '../logger';
 
-const prepareLogMessage = (message: any, ...args: any[]): string => {
-	return [
-		typeof message === 'object' ? JSON.stringify(message) : message,
-		...args.map((arg) => JSON.stringify(arg)),
-	].join(' ');
+const prepareLogMessage = (logMessage: object): string => {
+	if (logMessage instanceof Error) {
+		return [logMessage.message, logMessage.stack].join('\n');
+	}
+	return JSON.stringify(logMessage, null, 2);
 };
 
 export const logs: string[] = [];

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

@@ -9,7 +9,7 @@ import { usePlaygroundContext } from '../../playground-context';
 import { Blueprint } from '@wp-playground/blueprints';
 
 export function ErrorReportModal(props: { blueprint: Blueprint }) {
-	const { showErrorModal, setShowErrorModal } = usePlaygroundContext();
+	const { activeModal, setActiveModal } = usePlaygroundContext();
 	const [loading, setLoading] = useState(false);
 	const [text, setText] = useState('');
 	const [logs, setLogs] = useState('');
@@ -21,18 +21,16 @@ export function ErrorReportModal(props: { blueprint: Blueprint }) {
 		addCrashListener(logger, (e) => {
 			const error = e as CustomEvent;
 			if (error.detail?.source === 'php-wasm') {
-				setShowErrorModal(true);
+				setActiveModal('error-report');
 			}
 		});
-	}, [setShowErrorModal]);
+	}, [setActiveModal]);
 
 	useEffect(() => {
 		resetForm();
-		if (showErrorModal) {
-			setLogs(logger.getLogs().join('\n'));
-			setUrl(window.location.href);
-		}
-	}, [showErrorModal, setShowErrorModal, logs, setLogs]);
+		setLogs(logger.getLogs().join('\n'));
+		setUrl(window.location.href);
+	}, [activeModal, setActiveModal, logs, setLogs]);
 
 	function resetForm() {
 		setText('');
@@ -46,7 +44,7 @@ export function ErrorReportModal(props: { blueprint: Blueprint }) {
 	}
 
 	function onClose() {
-		setShowErrorModal(false);
+		setActiveModal(false);
 		resetForm();
 		resetSubmission();
 	}
@@ -150,7 +148,7 @@ export function ErrorReportModal(props: { blueprint: Blueprint }) {
 	}
 
 	return (
-		<Modal isOpen={showErrorModal} onRequestClose={onClose}>
+		<Modal isOpen={true} onRequestClose={onClose}>
 			<header className={css.errorReportModalHeader}>
 				<h2>{getTitle()}</h2>
 				<p>{getContent()}</p>

packages/playground/website/src/components/log-modal/index.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useState } from 'react';
+import Modal from '../modal';
+import { logger } from '@php-wasm/logger';
+
+import css from './style.module.css';
+
+import { usePlaygroundContext } from '../../playground-context';
+import { TextControl } from '@wordpress/components';
+
+export function LogModal(props: { description?: JSX.Element; title?: string }) {
+	const { activeModal, setActiveModal } = usePlaygroundContext();
+	const [logs, setLogs] = useState<string[]>([]);
+	const [searchTerm, setSearchTerm] = useState('');
+
+	useEffect(getLogs, [activeModal]);
+
+	function getLogs() {
+		setLogs(logger.getLogs());
+	}
+
+	function onClose() {
+		setActiveModal(false);
+	}
+
+	function logList() {
+		return logs
+			.filter((log) =>
+				log.toLowerCase().includes(searchTerm.toLowerCase())
+			)
+			.reverse()
+			.map((log, index) => (
+				<pre className={css.logModalLog} key={index}>
+					{log}
+				</pre>
+			));
+	}
+
+	const styles = {
+		content: { width: 800 },
+	};
+
+	return (
+		<Modal isOpen={true} onRequestClose={onClose} styles={styles}>
+			<header>
+				<h2>{props.title || 'Logs'}</h2>
+				{props.description}
+				<TextControl
+					title="Search"
+					placeholder="Search logs"
+					value={searchTerm}
+					onChange={setSearchTerm}
+					autoFocus={true}
+					className={css.logModalSearch}
+				/>
+			</header>
+			<main className={css.logModalMain}>{logList()}</main>
+		</Modal>
+	);
+}

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

@@ -0,0 +1,14 @@
+.log-modal__main {
+	padding-bottom: 20px;
+}
+
+.log-modal__search {
+	/* Title margin bottom + log margin top */
+	margin-bottom: 1.33rem;
+}
+
+.log-modal__log {
+	text-wrap: wrap;
+	word-wrap: break-word;
+	margin: 0.5rem 0;
+}

packages/playground/website/src/components/modal/index.tsx

@@ -4,7 +4,7 @@ import css from './style.module.css';
 ReactModal.setAppElement('#root');
 
 interface ModalProps extends ReactModal.Props {
-	mergeStyles?: boolean;
+	styles?: ReactModal.Styles;
 }
 export const defaultStyles: ReactModal.Styles = {
 	content: {
@@ -29,8 +29,12 @@ export const defaultStyles: ReactModal.Styles = {
 	},
 };
 export default function Modal(props: ModalProps) {
+	const styles = {
+		overlay: { ...defaultStyles.overlay, ...props.styles?.overlay },
+		content: { ...defaultStyles.content, ...props.styles?.content },
+	};
 	return (
-		<ReactModal style={defaultStyles} {...props}>
+		<ReactModal style={styles} {...props}>
 			<div className={css.modalInner} id="modal-content">
 				<button
 					id="import-close-modal--btn"

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

@@ -0,0 +1,45 @@
+import { Button } from '@wordpress/components';
+import { LogModal } from '../log-modal';
+import { useState } from '@wordpress/element';
+
+import css from './style.module.css';
+
+export const localStorageKey = 'playground-start-error-dont-show-again';
+
+export function StartErrorModal() {
+	const [dontShowAgain, setDontShowAgain] = useState(
+		localStorage.getItem(localStorageKey) === 'true'
+	);
+
+	if (dontShowAgain) {
+		return null;
+	}
+
+	const dismiss = () => {
+		localStorage.setItem(localStorageKey, 'true');
+		setDontShowAgain(true);
+	};
+
+	const description = (
+		<>
+			<p>
+				An error occurred while starting Playground. Please read the
+				logs below to understand the issue. If there is Invalid
+				blueprint error, the error will include the step which caused
+				the issue. You can review your blueprint and{' '}
+				<a href="https://wordpress.github.io/wordpress-playground/blueprints-api/troubleshoot-and-debug-blueprints">
+					check out the documentation
+				</a>{' '}
+				for more information.
+			</p>
+			<Button
+				className={css.startErrorModalDismiss}
+				text="Don't show again"
+				onClick={dismiss}
+				variant="secondary"
+				isSmall={true}
+			/>
+		</>
+	);
+	return <LogModal title="Error" description={description} />;
+}

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

@@ -0,0 +1,3 @@
+.start-error-modal__dismiss {
+	margin-bottom: 1.33rem;
+}

packages/playground/website/src/components/toolbar-buttons/report-error.tsx

@@ -5,15 +5,15 @@ import { usePlaygroundContext } from '../../playground-context';
 
 type Props = { onClose: () => void };
 export function ReportError({ onClose }: Props) {
-	const { setShowErrorModal } = usePlaygroundContext();
+	const { setActiveModal } = usePlaygroundContext();
 	return (
 		<MenuItem
 			icon={bug}
 			iconPosition="left"
 			data-cy="report-error"
 			aria-label="Report an error in Playground"
 			onClick={() => {
-				setShowErrorModal(true);
+				setActiveModal('error-report');
 				onClose();
 			}}
 		>

packages/playground/website/src/components/toolbar-buttons/view-logs.tsx

@@ -0,0 +1,23 @@
+import { MenuItem } from '@wordpress/components';
+import { details } from '@wordpress/icons';
+
+import { usePlaygroundContext } from '../../playground-context';
+
+type Props = { onClose: () => void };
+export function ViewLogs({ onClose }: Props) {
+	const { setActiveModal } = usePlaygroundContext();
+	return (
+		<MenuItem
+			icon={details}
+			iconPosition="left"
+			data-cy="view-logs"
+			aria-label="View logs"
+			onClick={() => {
+				setActiveModal('log');
+				onClose();
+			}}
+		>
+			View logs
+		</MenuItem>
+	);
+}

packages/playground/website/src/lib/hooks.ts

@@ -2,6 +2,8 @@ import { useEffect, useRef, useState } from 'react';
 import { Blueprint, startPlaygroundWeb } from '@wp-playground/client';
 import type { PlaygroundClient } from '@wp-playground/client';
 import { getRemoteUrl } from './config';
+import { usePlaygroundContext } from '../playground-context';
+import { logger } from '@php-wasm/logger';
 
 interface UsePlaygroundOptions {
 	blueprint?: Blueprint;
@@ -14,6 +16,7 @@ export function usePlayground({ blueprint, storage }: UsePlaygroundOptions) {
 	const [url, setUrl] = useState<string>();
 	const [playground, setPlayground] = useState<PlaygroundClient>();
 	const [awaitedIframe, setAwaitedIframe] = useState(false);
+	const { setActiveModal } = usePlaygroundContext();
 
 	useEffect(() => {
 		if (started.current) {
@@ -45,12 +48,17 @@ export function usePlayground({ blueprint, storage }: UsePlaygroundOptions) {
 				playgroundTmp = playground;
 				(window as any)['playground'] = playground;
 			},
-		}).finally(async () => {
-			if (playgroundTmp) {
-				playgroundTmp.onNavigation((url) => setUrl(url));
-				setPlayground(() => playgroundTmp);
-			}
-		});
+		})
+			.catch((error) => {
+				logger.error(error);
+				setActiveModal('start-error');
+			})
+			.finally(async () => {
+				if (playgroundTmp) {
+					playgroundTmp.onNavigation((url) => setUrl(url));
+					setPlayground(() => playgroundTmp);
+				}
+			});
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [iframe, awaitedIframe]);
 

packages/playground/website/src/main.tsx

@@ -17,6 +17,7 @@ import { ResetSiteMenuItem } from './components/toolbar-buttons/reset-site';
 import { DownloadAsZipMenuItem } from './components/toolbar-buttons/download-as-zip';
 import { RestoreFromZipMenuItem } from './components/toolbar-buttons/restore-from-zip';
 import { ReportError } from './components/toolbar-buttons/report-error';
+import { ViewLogs } from './components/toolbar-buttons/view-logs';
 import { resolveBlueprint } from './lib/resolve-blueprint';
 import { GithubImportMenuItem } from './components/toolbar-buttons/github-import-menu-item';
 import { acquireOAuthTokenIfNeeded } from './github/acquire-oauth-token-if-needed';
@@ -29,11 +30,13 @@ import {
 	asPullRequestAction,
 } from './github/github-export-form/form';
 import { joinPaths } from '@php-wasm/util';
-import { PlaygroundContext } from './playground-context';
+import { ActiveModal, PlaygroundContext } from './playground-context';
 import { collectWindowErrors, logger } from '@php-wasm/logger';
 import { ErrorReportModal } from './components/error-report-modal';
 import { asContentType } from './github/import-from-github';
 import { GitHubOAuthGuardModal } from './github/github-oauth-guard';
+import { LogModal } from './components/log-modal';
+import { StartErrorModal } from './components/start-error-modal';
 
 collectWindowErrors(logger);
 
@@ -87,7 +90,7 @@ if (currentConfiguration.wp === '6.3') {
 acquireOAuthTokenIfNeeded();
 
 function Main() {
-	const [showErrorModal, setShowErrorModal] = useState(false);
+	const [activeModal, setActiveModal] = useState<ActiveModal | false>(false);
 	const [githubExportFiles, setGithubExportFiles] = useState<any[]>();
 	const [githubExportValues, setGithubExportValues] = useState<
 		Partial<ExportFormValues>
@@ -127,11 +130,22 @@ function Main() {
 		return values;
 	});
 
+	const modal = () => {
+		if (activeModal === 'log') {
+			return <LogModal />;
+		} else if (activeModal === 'error-report') {
+			return <ErrorReportModal blueprint={blueprint} />;
+		} else if (activeModal === 'start-error') {
+			return <StartErrorModal />;
+		}
+		return null;
+	};
+
 	return (
 		<PlaygroundContext.Provider
-			value={{ storage, showErrorModal, setShowErrorModal }}
+			value={{ storage, activeModal, setActiveModal }}
 		>
-			<ErrorReportModal blueprint={blueprint} />
+			{modal()}
 			<PlaygroundViewport
 				storage={storage}
 				displayMode={displayMode}
@@ -165,6 +179,7 @@ function Main() {
 									<RestoreFromZipMenuItem onClose={onClose} />
 									<GithubImportMenuItem onClose={onClose} />
 									<GithubExportMenuItem onClose={onClose} />
+									<ViewLogs onClose={onClose} />
 									<MenuItem
 										icon={external}
 										iconPosition="left"

packages/playground/website/src/playground-context.tsx

@@ -1,9 +1,15 @@
 import { createContext, useContext } from 'react';
 import { StorageType } from './types';
 
+export type ActiveModal = 'error-report' | 'log' | 'start-error' | false;
+
 export const PlaygroundContext = createContext<{
 	storage: StorageType;
-	showErrorModal: boolean;
-	setShowErrorModal: (show: boolean) => void;
-}>({ storage: 'none', showErrorModal: false, setShowErrorModal: () => {} });
+	activeModal: ActiveModal;
+	setActiveModal: (modal: ActiveModal) => void;
+}>({
+	storage: 'none',
+	activeModal: false,
+	setActiveModal: () => {},
+});
 export const usePlaygroundContext = () => useContext(PlaygroundContext);