MSD: Send unknown error to logstash (#107233)

Author: taipeicoder

client/dashboard/.eslintrc.js

@@ -16,12 +16,14 @@ module.exports = {
 							// Allowed: calypso/lib/explat
 							// Allowed: calypso/lib/interval/use-interval (temporary)
 							// Allowed: calypso/lib/load-dev-helpers
+							// Allowed: calypso/lib/logstash
 							// Allowed: calypso/lib/wp
 							'!calypso/lib',
 							'calypso/lib/*',
 							'!calypso/lib/explat',
 							'!calypso/lib/interval',
 							'!calypso/lib/load-dev-helpers',
+							'!calypso/lib/logstash',
 							'!calypso/lib/wp',
 							// Allowed: calypso/assets/icons
 							// Allowed: calypso/assets/images

client/dashboard/app/500/index.tsx

@@ -1,5 +1,5 @@
-import { Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import Notice from '../../components/notice';
 import { PageHeader } from '../../components/page-header';
 import PageLayout from '../../components/page-layout';
 import RouterLinkButton from '../../components/router-link-button';
@@ -18,11 +18,7 @@ function UnknownError( { error }: { error: Error } ) {
 					}
 				/>
 			}
-			notices={
-				<Notice status="error" isDismissible={ false }>
-					{ error.message }
-				</Notice>
-			}
+			notices={ <Notice variant="error">{ error.message }</Notice> }
 		></PageLayout>
 	);
 }

client/dashboard/app/router/index.tsx

@@ -1,4 +1,6 @@
+import calypsoConfig from '@automattic/calypso-config';
 import { Router, createRoute, redirect } from '@tanstack/react-router';
+import { logToLogstash } from 'calypso/lib/logstash';
 import NotFound from '../404';
 import UnknownError from '../500';
 import { createDomainsRoutes } from './domains';
@@ -8,6 +10,7 @@ import { createPluginsRoutes } from './plugins';
 import { rootRoute } from './root';
 import { createSitesRoutes } from './sites';
 import type { AppConfig } from '../context';
+import type { ErrorInfo } from 'react';
 
 interface RouteContext {
 	config?: AppConfig;
@@ -61,6 +64,19 @@ export const getRouter = ( config: AppConfig ) => {
 		},
 		defaultErrorComponent: UnknownError,
 		defaultNotFoundComponent: NotFound,
+		defaultOnCatch: ( error: Error, errorInfo: ErrorInfo ) => {
+			logToLogstash( {
+				feature: 'calypso_client',
+				message: 'Unknown error',
+				severity: calypsoConfig( 'env_id' ) === 'production' ? 'error' : 'debug',
+				tags: [ 'dashboard' ],
+				properties: {
+					env: calypsoConfig( 'env_id' ),
+					message: error.message,
+					stack: errorInfo.componentStack,
+				},
+			} );
+		},
 		defaultPreload: 'intent',
 		defaultPreloadStaleTime: 0,
 		// Calling document.startViewTransition() ourselves is really tricky,

client/sites/v2/components/500.tsx

@@ -0,0 +1,17 @@
+import { __ } from '@wordpress/i18n';
+import Notice from 'calypso/dashboard/components/notice';
+import { PageHeader } from 'calypso/dashboard/components/page-header';
+import PageLayout from 'calypso/dashboard/components/page-layout';
+
+function UnknownError( { error }: { error: Error } ) {
+	return (
+		<PageLayout
+			header={
+				<PageHeader title={ __( '500 Error' ) } description={ __( 'Something wrong happened.' ) } />
+			}
+			notices={ <Notice variant="error">{ error.message }</Notice> }
+		></PageLayout>
+	);
+}
+
+export default UnknownError;

client/sites/v2/utils/router.ts

@@ -1,16 +1,34 @@
+import calypsoConfig from '@automattic/calypso-config';
 import pagejs from '@automattic/calypso-router';
 import { createMemoryHistory } from '@tanstack/react-router';
+import { logToLogstash } from 'calypso/lib/logstash';
+import UnknownError from '../components/500';
 import type { AnyRoute, AnyRouter } from '@tanstack/react-router';
 import type { AppConfig } from 'calypso/dashboard/app/context';
+import type { ErrorInfo } from 'react';
 
 export function getRouterOptions( config: AppConfig ) {
 	return {
 		basepath: config.basePath,
 		context: {
 			config,
 		},
+		defaultOnCatch: ( error: Error, errorInfo: ErrorInfo ) => {
+			logToLogstash( {
+				feature: 'calypso_client',
+				message: 'Unknown error (backport)',
+				severity: calypsoConfig( 'env_id' ) === 'production' ? 'error' : 'debug',
+				tags: [ 'dashboard' ],
+				properties: {
+					env: calypsoConfig( 'env_id' ),
+					message: error.message,
+					stack: errorInfo.componentStack,
+				},
+			} );
+		},
 		defaultPreload: 'intent' as const,
 		defaultPreloadStaleTime: 0,
+		defaultErrorComponent: UnknownError,
 		defaultNotFoundComponent: () => null,
 		defaultViewTransition: true,