Skip to content

Commit

Permalink
Fix Stepper performance bug (#97354)
Browse files Browse the repository at this point in the history
  • Loading branch information
alshakero authored Dec 12, 2024
1 parent 1e7b768 commit 8c0021b
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 79 deletions.
81 changes: 3 additions & 78 deletions client/boot/common.js
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -16,16 +15,14 @@ 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';
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';
Expand All @@ -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 {
Expand All @@ -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' );
Expand Down Expand Up @@ -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.' );

Expand Down
2 changes: 1 addition & 1 deletion client/landing/stepper/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@ import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { BrowserRouter, matchPath } 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';
Expand Down
80 changes: 80 additions & 0 deletions client/lib/error-logger/setup-error-logger.js
Original file line number Diff line number Diff line change
@@ -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();
} );
}

0 comments on commit 8c0021b

Please sign in to comment.