fix(frontend): do not use redirects outside the react router (#6739)

* fix(frontend): use history.replace to something went wrong instead of redirects

* fix(frontend): update the something went wrong page to error boundary fallback
This commit is contained in:
Vikrant Gupta 2025-01-02 13:30:31 +05:30 committed by GitHub
parent 3e675bb9a5
commit 28d27bc5c1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 14 additions and 6 deletions

View File

@ -189,7 +189,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
if (fromPathname) { if (fromPathname) {
history.push(fromPathname); history.push(fromPathname);
setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, ''); setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
} else { } else if (pathname !== ROUTES.SOMETHING_WENT_WRONG) {
history.push(ROUTES.APPLICATION); history.push(ROUTES.APPLICATION);
} }
} else { } else {

View File

@ -22,7 +22,7 @@ import { IUser } from 'providers/App/types';
import { DashboardProvider } from 'providers/Dashboard/Dashboard'; import { DashboardProvider } from 'providers/Dashboard/Dashboard';
import { QueryBuilderProvider } from 'providers/QueryBuilder'; import { QueryBuilderProvider } from 'providers/QueryBuilder';
import { Suspense, useCallback, useEffect, useState } from 'react'; import { Suspense, useCallback, useEffect, useState } from 'react';
import { Redirect, Route, Router, Switch } from 'react-router-dom'; import { Route, Router, Switch } from 'react-router-dom';
import { CompatRouter } from 'react-router-dom-v5-compat'; import { CompatRouter } from 'react-router-dom-v5-compat';
import { extractDomain, isCloudUser, isEECloudUser } from 'utils/app'; import { extractDomain, isCloudUser, isEECloudUser } from 'utils/app';
@ -240,12 +240,19 @@ function App(): JSX.Element {
// if the required calls fails then return a something went wrong error // if the required calls fails then return a something went wrong error
// this needs to be on top of data missing error because if there is an error, data will never be loaded and it will // this needs to be on top of data missing error because if there is an error, data will never be loaded and it will
// move to indefinitive loading // move to indefinitive loading
if (userFetchError || licensesFetchError) { if (
return <Redirect to={ROUTES.SOMETHING_WENT_WRONG} />; (userFetchError || licensesFetchError) &&
pathname !== ROUTES.SOMETHING_WENT_WRONG
) {
history.replace(ROUTES.SOMETHING_WENT_WRONG);
} }
// if all of the data is not set then return a spinner, this is required because there is some gap between loading states and data setting // if all of the data is not set then return a spinner, this is required because there is some gap between loading states and data setting
if (!licenses || !user.email || !featureFlags) { if (
(!licenses || !user.email || !featureFlags) &&
!userFetchError &&
!licensesFetchError
) {
return <Spinner tip="Loading..." />; return <Spinner tip="Loading..." />;
} }
} }

View File

@ -180,7 +180,7 @@ export const PasswordReset = Loadable(
export const SomethingWentWrong = Loadable( export const SomethingWentWrong = Loadable(
() => () =>
import( import(
/* webpackChunkName: "SomethingWentWrong" */ 'pages/SomethingWentWrong' /* webpackChunkName: "ErrorBoundaryFallback" */ 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback'
), ),
); );

View File

@ -214,6 +214,7 @@ export const routesToSkip = [
ROUTES.MESSAGING_QUEUES, ROUTES.MESSAGING_QUEUES,
ROUTES.MESSAGING_QUEUES_DETAIL, ROUTES.MESSAGING_QUEUES_DETAIL,
ROUTES.INFRASTRUCTURE_MONITORING_HOSTS, ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
ROUTES.SOMETHING_WENT_WRONG,
]; ];
export const routesToDisable = [ROUTES.LOGS_EXPLORER, ROUTES.LIVE_LOGS]; export const routesToDisable = [ROUTES.LOGS_EXPLORER, ROUTES.LIVE_LOGS];