diff --git a/client/dashboard/.eslintrc.js b/client/dashboard/.eslintrc.js
index 85d93e9bb793..93eb8a40b4d1 100644
--- a/client/dashboard/.eslintrc.js
+++ b/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
diff --git a/client/dashboard/app/500/index.tsx b/client/dashboard/app/500/index.tsx
index f136c467525b..bf8dffcabbf9 100644
--- a/client/dashboard/app/500/index.tsx
+++ b/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={
-
- { error.message }
-
- }
+ notices={ { error.message } }
>
);
}
diff --git a/client/dashboard/app/router/index.tsx b/client/dashboard/app/router/index.tsx
index bdcd4814cb26..175540eb33f9 100644
--- a/client/dashboard/app/router/index.tsx
+++ b/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,
diff --git a/client/sites/v2/components/500.tsx b/client/sites/v2/components/500.tsx
new file mode 100644
index 000000000000..a0751f24faa0
--- /dev/null
+++ b/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 (
+
+ }
+ notices={ { error.message } }
+ >
+ );
+}
+
+export default UnknownError;
diff --git a/client/sites/v2/utils/router.ts b/client/sites/v2/utils/router.ts
index a82bc066a890..907a412356d5 100644
--- a/client/sites/v2/utils/router.ts
+++ b/client/sites/v2/utils/router.ts
@@ -1,7 +1,11 @@
+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 {
@@ -9,8 +13,22 @@ export function getRouterOptions( config: AppConfig ) {
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,