diff --git a/client/boot/common.js b/client/boot/common.js index a9583f41a8013..66a2fcea55dec 100644 --- a/client/boot/common.js +++ b/client/boot/common.js @@ -1,7 +1,6 @@ import accessibleFocus from '@automattic/accessible-focus'; import config from '@automattic/calypso-config'; import page from '@automattic/calypso-router'; -import { addBreadcrumb, initSentry } from '@automattic/calypso-sentry'; import { getUrlParts } from '@automattic/calypso-url'; import { geolocateCurrencySymbol } from '@automattic/format-currency'; import { getLanguageSlugs } from '@automattic/i18n-utils'; @@ -16,8 +15,6 @@ import { ProviderWrappedLayout } from 'calypso/controller'; import isA8CForAgencies from 'calypso/lib/a8c-for-agencies/is-a8c-for-agencies'; import { initializeAnalytics } from 'calypso/lib/analytics/init'; import getSuperProps from 'calypso/lib/analytics/super-props'; -import { tracksEvents } from 'calypso/lib/analytics/tracks'; -import Logger from 'calypso/lib/catch-js-errors'; import DesktopListeners from 'calypso/lib/desktop-listeners'; import detectHistoryNavigation from 'calypso/lib/detect-history-navigation'; import isJetpackCloud from 'calypso/lib/jetpack/is-jetpack-cloud'; @@ -25,7 +22,7 @@ import loadDevHelpers from 'calypso/lib/load-dev-helpers'; import { attachLogmein } from 'calypso/lib/logmein'; import { checkFormHandler } from 'calypso/lib/protect-form'; import { setReduxStore as setReduxBridgeReduxStore } from 'calypso/lib/redux-bridge'; -import { getSiteFragment, normalize } from 'calypso/lib/route'; +import { normalize } from 'calypso/lib/route'; import { isLegacyRoute } from 'calypso/lib/route/legacy-routes'; import { hasTouch } from 'calypso/lib/touch-detect'; import { isOutsideCalypso } from 'calypso/lib/url'; @@ -35,7 +32,7 @@ import { setSupportSessionReduxStore } from 'calypso/lib/user/support-user-inter import { setupRoutes } from 'calypso/sections-middleware'; import { createReduxStore } from 'calypso/state'; import { setCurrentUser } from 'calypso/state/current-user/actions'; -import { getCurrentUserId, isUserLoggedIn } from 'calypso/state/current-user/selectors'; +import { isUserLoggedIn } from 'calypso/state/current-user/selectors'; import { getInitialState, getStateFromCache, persistOnChange } from 'calypso/state/initial-state'; import { init as pushNotificationsInit } from 'calypso/state/push-notifications/actions'; import { @@ -47,7 +44,7 @@ import initialReducer from 'calypso/state/reducer'; import { setStore } from 'calypso/state/redux-store'; import { setRoute } from 'calypso/state/route/actions'; import { setNextLayoutFocus } from 'calypso/state/ui/layout-focus/actions'; -import { getSelectedSiteId, getSectionName } from 'calypso/state/ui/selectors'; +import { setupErrorLogger } from '../lib/error-logger/setup-error-logger'; import { setupLocale } from './locale'; const debug = debugFactory( 'calypso' ); @@ -245,78 +242,6 @@ const configureReduxStore = ( currentUser, reduxStore ) => { } }; -export function setupErrorLogger( reduxStore ) { - // Add a bit of metadata from the redux store to the sentry event. - const beforeSend = ( event ) => { - const state = reduxStore.getState(); - const tags = { - blog_id: getSelectedSiteId( state ), - calypso_section: getSectionName( state ), - }; - - event.tags = { - ...tags, - ...event.tags, - }; - - return event; - }; - - // Note that Sentry can disable itself and do some cleanup if needed, so we - // run it before the catch-js-errors check. (Otherwise, cleanup would never - // never happen.) - initSentry( { beforeSend, userId: getCurrentUserId( reduxStore.getState() ) } ); - - if ( ! config.isEnabled( 'catch-js-errors' ) ) { - return; - } - - // At this point, the normal error logger is still set up so that logstash - // contains a definitive log of calypso errors. - const errorLogger = new Logger(); - - // Save errorLogger to a singleton for use in arbitrary logging. - require( 'calypso/lib/catch-js-errors/log' ).registerLogger( errorLogger ); - - // Save data to JS error logger - errorLogger.saveDiagnosticData( { - user_id: getCurrentUserId( reduxStore.getState() ), - calypso_env: config( 'env_id' ), - } ); - - errorLogger.saveDiagnosticReducer( function () { - const state = reduxStore.getState(); - return { - blog_id: getSelectedSiteId( state ), - calypso_section: getSectionName( state ), - }; - } ); - - tracksEvents.on( 'record-event', ( eventName, lastTracksEvent ) => - errorLogger.saveExtraData( { lastTracksEvent } ) - ); - - let prevPath; - page( '*', function ( context, next ) { - const path = context.canonicalPath.replace( - getSiteFragment( context.canonicalPath ), - ':siteId' - ); - // Also save the context to Sentry for easier debugging. - addBreadcrumb( { - category: 'navigation', - data: { - from: prevPath ?? path, - to: path, - should_capture: true, // Hint that this is our own breadcrumb, not the default navigation one. - }, - } ); - prevPath = path; - errorLogger.saveNewPath( path ); - next(); - } ); -} - const setupMiddlewares = ( currentUser, reduxStore, reactQueryClient ) => { debug( 'Executing Calypso setup middlewares.' ); diff --git a/client/landing/stepper/declarative-flow/internals/components/help-center/async.tsx b/client/landing/stepper/declarative-flow/internals/components/help-center/async.tsx index f485bdab20aa7..00e900e97d118 100644 --- a/client/landing/stepper/declarative-flow/internals/components/help-center/async.tsx +++ b/client/landing/stepper/declarative-flow/internals/components/help-center/async.tsx @@ -12,8 +12,18 @@ const AsyncHelpCenter = () => { setShowHelpCenter( false ); }, [ setShowHelpCenter ] ); + /** + * The ?v2 query parameter ensures Webpack treats this Help Center as separate from the one in the main client app. + * Without it, Webpack would create one shared chunk, loaded in both apps. Since Stepper is smaller, more CSS would + * need be bundled into that shared chunk. This is great for Stepper, but it duplicates the CSS in the main client app. + * See: #97480 + */ return ( - + ); }; diff --git a/client/landing/stepper/index.tsx b/client/landing/stepper/index.tsx index 36176538f4a39..4186125b56fcf 100644 --- a/client/landing/stepper/index.tsx +++ b/client/landing/stepper/index.tsx @@ -18,12 +18,12 @@ import { createRoot } from 'react-dom/client'; import { Provider } from 'react-redux'; import { BrowserRouter } from 'react-router-dom'; import { requestAllBlogsAccess } from 'wpcom-proxy-request'; -import { setupErrorLogger } from 'calypso/boot/common'; import { setupLocale } from 'calypso/boot/locale'; import AsyncLoad from 'calypso/components/async-load'; import CalypsoI18nProvider from 'calypso/components/calypso-i18n-provider'; import { addHotJarScript } from 'calypso/lib/analytics/hotjar'; import getSuperProps from 'calypso/lib/analytics/super-props'; +import { setupErrorLogger } from 'calypso/lib/error-logger/setup-error-logger'; import { initializeCurrentUser } from 'calypso/lib/user/shared-utils'; import { onDisablePersistence } from 'calypso/lib/user/store'; import { createReduxStore } from 'calypso/state'; diff --git a/client/lib/error-logger/setup-error-logger.js b/client/lib/error-logger/setup-error-logger.js new file mode 100644 index 0000000000000..cfee60e9cb138 --- /dev/null +++ b/client/lib/error-logger/setup-error-logger.js @@ -0,0 +1,80 @@ +import config from '@automattic/calypso-config'; +import page from '@automattic/calypso-router'; +import { addBreadcrumb, initSentry } from '@automattic/calypso-sentry'; +import { tracksEvents } from 'calypso/lib/analytics/tracks'; +import Logger from 'calypso/lib/catch-js-errors'; +import { getSiteFragment } from 'calypso/lib/route'; +import { getCurrentUserId } from 'calypso/state/current-user/selectors'; +import { getSelectedSiteId, getSectionName } from 'calypso/state/ui/selectors'; + +export function setupErrorLogger( reduxStore ) { + // Add a bit of metadata from the redux store to the sentry event. + const beforeSend = ( event ) => { + const state = reduxStore.getState(); + const tags = { + blog_id: getSelectedSiteId( state ), + calypso_section: getSectionName( state ), + }; + + event.tags = { + ...tags, + ...event.tags, + }; + + return event; + }; + + // Note that Sentry can disable itself and do some cleanup if needed, so we + // run it before the catch-js-errors check. (Otherwise, cleanup would never + // never happen.) + initSentry( { beforeSend, userId: getCurrentUserId( reduxStore.getState() ) } ); + + if ( ! config.isEnabled( 'catch-js-errors' ) ) { + return; + } + + // At this point, the normal error logger is still set up so that logstash + // contains a definitive log of calypso errors. + const errorLogger = new Logger(); + + // Save errorLogger to a singleton for use in arbitrary logging. + require( 'calypso/lib/catch-js-errors/log' ).registerLogger( errorLogger ); + + // Save data to JS error logger + errorLogger.saveDiagnosticData( { + user_id: getCurrentUserId( reduxStore.getState() ), + calypso_env: config( 'env_id' ), + } ); + + errorLogger.saveDiagnosticReducer( function () { + const state = reduxStore.getState(); + return { + blog_id: getSelectedSiteId( state ), + calypso_section: getSectionName( state ), + }; + } ); + + tracksEvents.on( 'record-event', ( eventName, lastTracksEvent ) => + errorLogger.saveExtraData( { lastTracksEvent } ) + ); + + let prevPath; + page( '*', function ( context, next ) { + const path = context.canonicalPath.replace( + getSiteFragment( context.canonicalPath ), + ':siteId' + ); + // Also save the context to Sentry for easier debugging. + addBreadcrumb( { + category: 'navigation', + data: { + from: prevPath ?? path, + to: path, + should_capture: true, // Hint that this is our own breadcrumb, not the default navigation one. + }, + } ); + prevPath = path; + errorLogger.saveNewPath( path ); + next(); + } ); +}