Skip to content

Conversation

@dcalhoun
Copy link
Member

@dcalhoun dcalhoun commented Nov 20, 2025

What?

Improve observability by reporting errors occurring outside of the React tree, and therefore uncaught by the existing ErrorBoundary component.

Why?

Close CMM-827. There may be disruptive errors occurring outside of React components.

How?

  • Add global error handlers for error and unhandledrejection.
  • Filter out errors deemed to be "external" to reduce noise.

Testing Instructions

1. Verify GutenbergKit errors are reported

  1. Apply the example errors diff below.
  2. Place a breakpoint on the corresponding native handler.
  3. Open the editor.
  4. Verify the errors trigger the breakpoints.
Example GutenbergKit errors diff

diff --git a/src/utils/editor-environment.js b/src/utils/editor-environment.js
index 91ef3e1..8caf2a5 100644
--- a/src/utils/editor-environment.js
+++ b/src/utils/editor-environment.js
@@ -40,6 +40,7 @@ export function setUpEditorEnvironment() {
 		.then( loadPluginsIfEnabled )
 		.then( initializeEditor )
 		.then( setupGlobalErrorHandlers )
+		.then( testErrorHandlers ) // TEMPORARY: Remove after testing
 		.catch( handleError );
 }
 
@@ -96,3 +97,37 @@ function handleError( err ) {
 	document.body.innerHTML = errorDetails;
 	editorLoaded();
 }
+
+// TEMPORARY: Test error handlers - Remove this entire function after testing
+/**
+ * Triggers test errors to verify global error handlers are working.
+ * This function schedules three different error scenarios with delays
+ * to test both the window.error and unhandledrejection handlers.
+ */
+function testErrorHandlers() {
+	// eslint-disable-next-line no-console
+	console.log( '🧪 GutenbergKit: Testing error handlers in 2 seconds...' );
+
+	// Test 1: Uncaught error (should be caught by window.error handler)
+	setTimeout( () → {
+		// eslint-disable-next-line no-console
+		console.log( '🧪 Test 1: Throwing uncaught error' );
+		throw new Error( 'TEST: Uncaught error from GutenbergKit' );
+	}, 2000 );
+
+	// Test 2: Unhandled promise rejection with Error object
+	// (should be caught by unhandledrejection handler)
+	setTimeout( () → {
+		// eslint-disable-next-line no-console
+		console.log( '🧪 Test 2: Creating unhandled promise rejection' );
+		Promise.reject( new Error( 'TEST: Unhandled promise rejection' ) );
+	}, 4000 );
+
+	// Test 3: Unhandled promise rejection with string
+	// (should be caught by unhandledrejection handler and converted to Error)
+	setTimeout( () → {
+		// eslint-disable-next-line no-console
+		console.log( '🧪 Test 3: Rejecting promise with string' );
+		Promise.reject( 'TEST: String rejection from promise' );
+	}, 6000 );
+}

2. Verify external errors are not reported

  1. Apply the example errors diff below.
  2. Place a breakpoint on the corresponding native handler.
  3. Open the editor for a site with the Jetpack plugin.
  4. Insert the Jetpack Paywall block.
  5. Verify the errors do not trigger the breakpoints.
Example external errors diff

diff --git a/src/utils/editor.jsx b/src/utils/editor.jsx
index ac38763..d3f3a1d 100644
--- a/src/utils/editor.jsx
+++ b/src/utils/editor.jsx
@@ -44,7 +44,7 @@ export function initializeEditor( {
 	preferenceDispatch.set( 'core', 'editorMode', 'visual' );
 
 	registerCoreBlocks();
-	unregisterDisallowedBlocks( allowedBlockTypes );
+	// unregisterDisallowedBlocks( allowedBlockTypes );
 	const post = getPost();
 
 	createRoot( document.getElementById( 'root' ) ).render(
diff --git a/src/utils/global-error-handler.js b/src/utils/global-error-handler.js
index 72d1b54..fbb9c33 100644
--- a/src/utils/global-error-handler.js
+++ b/src/utils/global-error-handler.js
@@ -65,6 +65,7 @@ function isExternalError( filename, errorObj ) {
 		filename?.startsWith( 'http' ) &&
 		! filename.includes( window.location.origin )
 	) {
+		console.log( '>>> Detected external error from filename:', filename );
 		return true;
 	}
 
@@ -77,6 +78,10 @@ function isExternalError( filename, errorObj ) {
 				line.includes( 'http' ) &&
 				! line.includes( window.location.origin )
 			) {
+				console.log(
+					'>>> Detected external error from stack line:',
+					line
+				);
 				return true;
 			}
 		}

Accessibility Testing Instructions

N/A, no user-facing changes.

Screenshots or screencast

N/A, no user-facing changes.

Improve observability of errors that occur outside of the React tree and
its `ErrorBoundary`.
This path is not used by the project and had not impact. The
`window.location.origin` is what achieved the correct outcome.
@dcalhoun dcalhoun added the [Type] Task Issues or PRs that have been broken down into an individual action to take label Nov 20, 2025
@dcalhoun dcalhoun marked this pull request as ready for review November 21, 2025 00:00
@dcalhoun dcalhoun requested a review from jkmassel November 21, 2025 00:00
@dcalhoun dcalhoun merged commit 75c9788 into trunk Nov 25, 2025
11 checks passed
@dcalhoun dcalhoun deleted the task/expand-error-reporting branch November 25, 2025 17:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Type] Task Issues or PRs that have been broken down into an individual action to take

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants