Add logging support to Playground

packages/php-wasm/logger/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+	"extends": ["../../../.eslintrc.json"],
+	"ignorePatterns": ["!**/*"],
+	"overrides": [
+		{
+			"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+			"rules": {}
+		},
+		{
+			"files": ["*.ts", "*.tsx"],
+			"rules": {}
+		},
+		{
+			"files": ["*.js", "*.jsx"],
+			"rules": {}
+		}
+	]
+}

packages/php-wasm/logger/package.json

@@ -0,0 +1,28 @@
+{
+	"name": "@php-wasm/logger",
+	"version": "0.0.1",
+	"description": "A logger for PHP-wasm clients like Playground and WP-now.",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/wordpress-playground"
+	},
+	"homepage": "https://developer.wordpress.org/playground",
+	"author": "The WordPress contributors",
+	"typedoc": {
+		"entryPoint": "./src/index.ts",
+		"readmeFile": "./README.md",
+		"displayName": "@php-wasm/logger",
+		"tsconfig": "./tsconfig.lib.json"
+	},
+	"publishConfig": {
+		"access": "public",
+		"directory": "../../../dist/packages/php-wasm/logger"
+	},
+	"license": "GPL-2.0-or-later",
+	"main": "index.cjs",
+	"types": "index.d.ts",
+	"engines": {
+		"node": ">=18.18.2",
+		"npm": ">=8.11.0"
+	}
+}

packages/php-wasm/logger/project.json

@@ -0,0 +1,50 @@
+{
+	"name": "php-wasm-logger",
+	"$schema": "../../../node_modules/nx/schemas/project-schema.json",
+	"sourceRoot": "packages/php-wasm/logger/src",
+	"projectType": "library",
+	"targets": {
+		"build": {
+			"executor": "@nx/vite:build",
+			"outputs": ["{options.outputPath}"],
+			"options": {
+				"outputPath": "dist/packages/php-wasm/logger"
+			}
+		},
+		"test": {
+			"executor": "nx:noop",
+			"dependsOn": ["test:vite"]
+		},
+		"test:esmcjs": {
+			"executor": "@wp-playground/nx-extensions:assert-built-esm-and-cjs",
+			"options": {
+				"outputPath": "dist/packages/php-wasm/logger"
+			},
+			"dependsOn": ["build"]
+		},
+		"test:vite": {
+			"executor": "@nx/vite:test",
+			"outputs": ["{workspaceRoot}/coverage/packages/php-wasm/logger"],
+			"options": {
+				"passWithNoTests": true,
+				"reportsDirectory": "../../../coverage/packages/php-wasm/logger"
+			}
+		},
+		"lint": {
+			"executor": "@nx/linter:eslint",
+			"outputs": ["{options.outputFile}"],
+			"options": {
+				"lintFilePatterns": ["packages/php-wasm/logger/**/*.ts"]
+			}
+		}
+	},
+	"typecheck": {
+		"executor": "nx:run-commands",
+		"options": {
+			"commands": [
+				"tsc -p packages/php-wasm/logger/tsconfig.lib.json --noEmit",
+				"tsc -p packages/php-wasm/logger/tsconfig.spec.json --noEmit"
+			]
+		}
+	}
+}

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

@@ -0,0 +1 @@
+export * from './logger';

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

@@ -0,0 +1,156 @@
+import { UniversalPHP } from "@php-wasm/universal/src/lib/universal-php";
+/**
+ * Log severity levels.
+ */
+export type LogSeverity = 'debug' | 'info' | 'warn' | 'error' | 'fatal';
+
+/**
+ * A logger for Playground.
+ */
+export class Logger {
+    private readonly LOG_PREFIX = 'Playground';
+
+    /**
+     * The length of the last PHP log.
+     */
+    private lastPHPLogLength = 0;
+
+    /**
+     * The path to the error log file.
+     */
+    private errorLogPath = '/wordpress/wp-content/debug.log';
+
+    constructor(errorLogPath?: string) {
+        if (errorLogPath) {
+            this.errorLogPath = errorLogPath;
+        }
+        this.collectJavaScriptErrors();
+    }
+
+    /**
+     * Collect errors from JavaScript window events like error and log them.
+     */
+    private collectJavaScriptErrors() {
+         if (typeof window !== 'undefined') {
+            window.addEventListener('error', (event) => {
+                this.log(
+                    `${event.message} in ${event.filename} on line ${event.lineno}:${event.colno}`,
+                    'fatal'
+                );
+            });
+            window.addEventListener('unhandledrejection', (event) => {
+                this.log(
+                    `${event.reason.stack}`,
+                    'fatal'
+                );
+            });
+            window.addEventListener('rejectionhandled', (event) => {
+                this.log(
+                    `${event.reason.stack}`,
+                    'fatal'
+                );
+            });
+        }
+    }
+
+    /**
+     * Read the WordPress debug.log file and return its content.
+     *
+     * @param UniversalPHP playground instance
+     * @returns string The content of the debug.log file
+     */
+	private async getRequestPhpErrorLog(playground: UniversalPHP) {
+		if (!await playground.fileExists(this.errorLogPath)) {
+			return '';
+		}
+		return await playground.readFileAsText(this.errorLogPath);
+	}
+    /**
+     * Register a listener for the request.end event and log the data.
+     * @param UniversalPHP playground instance
+     */
+    public addPlaygroundRequestEndListener(playground: UniversalPHP) {
+        playground.addEventListener('request.end', async () => {
+            const log = await this.getRequestPhpErrorLog(playground);
+            if (log.length > this.lastPHPLogLength) {
+                this.logRaw(log.substring(this.lastPHPLogLength));
+                this.lastPHPLogLength = log.length;
+            }
+        } );
+    }
+
+
+    /**
+     * Get UTC date in the PHP log format https://github.com/php/php-src/blob/master/main/main.c#L849
+     *
+     * @param date
+     * @returns string
+     */
+    private formatLogDate(date: Date): string {
+        const formattedDate = new Intl.DateTimeFormat('en-GB', {
+            year: 'numeric',
+            month: 'short',
+            day: '2-digit',
+            timeZone: 'UTC',
+        }).format(date).replace(/ /g, '-');
+
+        const formattedTime = new Intl.DateTimeFormat('en-GB', {
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            hour12: false,
+            timeZone: 'UTC',
+            timeZoneName: 'short'
+        }).format(date);
+        return formattedDate + ' ' + formattedTime;
+    }
+
+    /**
+     * Format log message and severity and log it.
+     * @param string message
+     * @param LogSeverity severity
+     */
+    public formatMessage(message: string, severity: LogSeverity): string {
+        const now = this.formatLogDate(new Date());
+        return `[${now}] ${this.LOG_PREFIX} ${severity}: ${message}`;
+    }
+
+    /**
+     * Log message with severity and timestamp.
+     * @param string message
+     * @param LogSeverity severity
+     */
+    public log(message: string, severity?: LogSeverity): void {
+        if (severity === undefined) {
+            severity = 'info';
+        }
+        const log = this.formatMessage(message, severity);
+        this.logRaw(log);
+    }
+
+    /**
+     * Log message without severity and timestamp.
+     * @param string log
+     */
+    public logRaw(log: string): void {
+        console.debug(log);
+    }
+};
+
+/**
+ * The logger instance.
+ */
+let logger: Logger | undefined = undefined;
+
+/**
+ * Get the logger instance.
+ *
+ * @param errorLogPath The path to the error log file.
+ * @returns Logger
+ */
+export function getLogger(errorLogPath?: string): Logger {
+    if (!logger) {
+        logger = new Logger(errorLogPath);
+    }
+    return logger;
+}

packages/php-wasm/logger/tsconfig.json

@@ -0,0 +1,23 @@
+{
+	"extends": "../../../tsconfig.base.json",
+	"compilerOptions": {
+		"forceConsistentCasingInFileNames": true,
+		"strict": true,
+		"noImplicitOverride": true,
+		"allowSyntheticDefaultImports": true,
+		"noPropertyAccessFromIndexSignature": true,
+		"noImplicitReturns": true,
+		"noFallthroughCasesInSwitch": true,
+		"types": ["vitest"]
+	},
+	"files": [],
+	"include": [],
+	"references": [
+		{
+			"path": "./tsconfig.lib.json"
+		},
+		{
+			"path": "./tsconfig.spec.json"
+		}
+	]
+}

packages/php-wasm/logger/tsconfig.lib.json

@@ -0,0 +1,10 @@
+{
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"outDir": "../../../dist/out-tsc",
+		"declaration": true,
+		"types": ["node"]
+	},
+	"include": ["src/**/*.ts"],
+	"exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}

packages/php-wasm/logger/tsconfig.spec.json

@@ -0,0 +1,19 @@
+{
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"outDir": "../../dist/out-tsc",
+		"types": ["vitest/globals", "vitest/importMeta", "vite/client", "node"]
+	},
+	"include": [
+		"vite.config.ts",
+		"src/**/*.test.ts",
+		"src/**/*.spec.ts",
+		"src/**/*.test.tsx",
+		"src/**/*.spec.tsx",
+		"src/**/*.test.js",
+		"src/**/*.spec.js",
+		"src/**/*.test.jsx",
+		"src/**/*.spec.jsx",
+		"src/**/*.d.ts"
+	]
+}

packages/php-wasm/logger/vite.config.ts

@@ -0,0 +1,48 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+
+import dts from 'vite-plugin-dts';
+import { join } from 'path';
+
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { viteTsConfigPaths } from '../../vite-ts-config-paths';
+
+export default defineConfig({
+	cacheDir: '../../../node_modules/.vite/php-wasm-logger',
+
+	plugins: [
+		dts({
+			entryRoot: 'src',
+			tsconfigPath: join(__dirname, 'tsconfig.lib.json'),
+		}),
+
+		viteTsConfigPaths({
+			root: '../../../',
+		}),
+	],
+
+	// Configuration for building your library.
+	// See: https://vitejs.dev/guide/build.html#library-mode
+	build: {
+		lib: {
+			// Could also be a dictionary or array of multiple entry points.
+			entry: 'src/index.ts',
+			name: 'php-wasm-logger',
+			fileName: 'index',
+			formats: ['es', 'cjs'],
+		},
+		rollupOptions: {
+			// External packages that should not be bundled into your library.
+			external: [],
+		},
+	},
+
+	test: {
+		globals: true,
+		cache: {
+			dir: '../../../node_modules/.vitest',
+		},
+		environment: 'jsdom',
+		include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+	},
+});