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,