Skip to content

feat: Add error boundaries to layout components and introduce RouteEr… #9384

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ngsanthosh wants to merge 3 commits into
base: master
Choose a base branch
from
+469 −153
Open

feat: Add error boundaries to layout components and introduce RouteEr… #9384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d62d2ee
refactor: extract duplicated error boundary logic to shared utility m…
ngsanthosh Nov 24, 2025
427a7de
refactor: address PR review comments
ngsanthosh Dec 15, 2025
c816660
AI code review changes
ngsanthosh Dec 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 25 additions & 30 deletions apps/console/src/layouts/app-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,16 @@

import { PreLoader } from "@wso2is/admin.core.v1/components/pre-loader";
import { ProtectedRoute } from "@wso2is/admin.core.v1/components/protected-route";
import { getEmptyPlaceholderIllustrations } from "@wso2is/admin.core.v1/configs/ui";
import { AppConstants } from "@wso2is/admin.core.v1/constants/app-constants";
import { AppState, store } from "@wso2is/admin.core.v1/store";
import { AppUtils } from "@wso2is/admin.core.v1/utils/app-utils";
import { createBrokenPageFallback, createRouteErrorHandler } from "@wso2is/admin.core.v1/utils/error-boundary-utils";
import { RouteInterface } from "@wso2is/core/models";
import { CommonUtils } from "@wso2is/core/utils";
import {
CookieConsentBanner,
EmptyPlaceholder,
ErrorBoundary,
LinkButton
ErrorBoundary
} from "@wso2is/react-components";
import React, { FunctionComponent, ReactElement, Suspense, useEffect, useState } from "react";
import React, { FunctionComponent, ReactElement, ReactNode, Suspense, useEffect, useState } from "react";
import { Trans, useTranslation } from "react-i18next";
import { useSelector } from "react-redux";
import { Redirect, Route, RouteComponentProps, Switch } from "react-router-dom";
Expand All @@ -52,6 +49,10 @@ const AppLayout: FunctionComponent<Record<string, unknown>> = (): ReactElement =
});
const appHomePath: string = useSelector((state: AppState) => state.config.deployment.appHomePath);

const handleRouteChunkError: ((_error: Error, _errorInfo: React.ErrorInfo) => void) = createRouteErrorHandler(appHomePath);

const brokenPageFallback: ReactNode = createBrokenPageFallback(t);

/**
* Listen for base name changes and updated the layout routes.
*/
Expand All @@ -63,25 +64,8 @@ const AppLayout: FunctionComponent<Record<string, unknown>> = (): ReactElement =
<>
<ErrorBoundary
onChunkLoadError={ AppUtils.onChunkLoadError }
handleError={ (_error: Error, _errorInfo: React.ErrorInfo) => {
sessionStorage.setItem("auth_callback_url_console", appHomePath);
} }
fallback={ (
<EmptyPlaceholder
action={ (
<LinkButton onClick={ () => CommonUtils.refreshPage() }>
{ t("console:common.placeholders.brokenPage.action") }
</LinkButton>
) }
image={ getEmptyPlaceholderIllustrations().brokenPage }
imageSize="tiny"
subtitle={ [
t("console:common.placeholders.brokenPage.subtitles.0"),
t("console:common.placeholders.brokenPage.subtitles.1")
] }
title={ t("console:common.placeholders.brokenPage.title") }
/>
) }
handleError={ handleRouteChunkError }
fallback={ brokenPageFallback }
>
<Suspense fallback={ <PreLoader /> }>
<Switch>
Expand All @@ -101,11 +85,22 @@ const AppLayout: FunctionComponent<Record<string, unknown>> = (): ReactElement =
: (
<Route
path={ route.path }
render={ (renderProps: RouteComponentProps) =>
route.component
? <route.component { ...renderProps } />
: null
}
render={ (renderProps: RouteComponentProps) => {
if (!route.component) {
return null;
}

return (
<ErrorBoundary
key={ renderProps.location.pathname }
onChunkLoadError={ AppUtils.onChunkLoadError }
handleError={ handleRouteChunkError }
fallback={ brokenPageFallback }
>
<route.component { ...renderProps } />
</ErrorBoundary>
);
} }
key={ index }
exact={ route.exact }
/>
Expand Down
65 changes: 25 additions & 40 deletions apps/console/src/layouts/dashboard-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ import { FeatureStatus, useCheckFeatureStatus } from "@wso2is/access-control";
import { getProfileInformation } from "@wso2is/admin.authentication.v1/store";
import Header from "@wso2is/admin.core.v1/components/header";
import { ProtectedRoute } from "@wso2is/admin.core.v1/components/protected-route";
import { getEmptyPlaceholderIllustrations } from "@wso2is/admin.core.v1/configs/ui";
import { AppConstants } from "@wso2is/admin.core.v1/constants/app-constants";
import { UIConstants } from "@wso2is/admin.core.v1/constants/ui-constants";
import { history } from "@wso2is/admin.core.v1/helpers/history";
Expand All @@ -33,6 +32,7 @@ import { ConfigReducerStateInterface } from "@wso2is/admin.core.v1/models/reduce
import { AppState } from "@wso2is/admin.core.v1/store";
import { AppUtils } from "@wso2is/admin.core.v1/utils/app-utils";
import { CommonUtils as ConsoleCommonUtils } from "@wso2is/admin.core.v1/utils/common-utils";
import { createBrokenPageFallback, createRouteErrorHandler } from "@wso2is/admin.core.v1/utils/error-boundary-utils";
import { RouteUtils } from "@wso2is/admin.core.v1/utils/route-utils";
import { applicationConfig } from "@wso2is/admin.extensions.v1";
import FeatureGateConstants from "@wso2is/admin.feature-gate.v1/constants/feature-gate-constants";
Expand All @@ -55,10 +55,8 @@ import { RouteUtils as CommonRouteUtils, CommonUtils } from "@wso2is/core/utils"
import {
Alert,
ContentLoader,
EmptyPlaceholder,
ErrorBoundary,
GenericIcon,
LinkButton
GenericIcon
} from "@wso2is/react-components";
import isEmpty from "lodash-es/isEmpty";
import kebabCase from "lodash-es/kebabCase";
Expand Down Expand Up @@ -194,6 +192,11 @@ const DashboardLayout: FunctionComponent<RouteComponentProps> = (
setPreferences({ leftNavbarCollapsed: !leftNavbarCollapsed });
};

const handleRouteChunkError: ((_error: Error, _errorInfo: React.ErrorInfo) => void) =
createRouteErrorHandler(config.deployment.appHomePath);

const brokenPageFallback: ReactNode = createBrokenPageFallback(t);

/**
* Conditionally renders a route. If a route has defined a Redirect to
* URL, it will be directed to the specified one. If the route is stated
Expand All @@ -216,11 +219,22 @@ const DashboardLayout: FunctionComponent<RouteComponentProps> = (
) : (
<Route
path={ route.path }
render={ (renderProps: RouteComponentProps): ReactNode =>
route.component ? (
<route.component { ...renderProps } />
) : null
}
render={ (renderProps: RouteComponentProps): ReactNode => {
if (!route.component) {
return null;
}

return (
<ErrorBoundary
key={ renderProps.location.pathname }
onChunkLoadError={ AppUtils.onChunkLoadError }
handleError={ handleRouteChunkError }
fallback={ brokenPageFallback }
>
<route.component { ...renderProps } />
</ErrorBoundary>
);
} }
key={ key }
exact={ route.exact }
/>
Expand Down Expand Up @@ -434,37 +448,8 @@ const DashboardLayout: FunctionComponent<RouteComponentProps> = (
>
<ErrorBoundary
onChunkLoadError={ AppUtils.onChunkLoadError }
handleError={ (_error: Error, _errorInfo: React.ErrorInfo) => {
sessionStorage.setItem("auth_callback_url_console", config.deployment.appHomePath);
} }
fallback={
(<EmptyPlaceholder
action={
(<LinkButton
onClick={ () => CommonUtils.refreshPage() }
>
{ t(
"console:common.placeholders.brokenPage.action"
) }
</LinkButton>)
}
image={
getEmptyPlaceholderIllustrations().brokenPage
}
imageSize="tiny"
subtitle={ [
t(
"console:common.placeholders.brokenPage.subtitles.0"
),
t(
"console:common.placeholders.brokenPage.subtitles.1"
)
] }
title={ t(
"console:common.placeholders.brokenPage.title"
) }
/>)
}
handleError={ handleRouteChunkError }
fallback={ brokenPageFallback }
>
<Suspense fallback={ <ContentLoader dimmer={ false } /> }>
{
Expand Down
51 changes: 26 additions & 25 deletions apps/console/src/layouts/default-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,19 +24,20 @@ import { FeatureAccessConfigInterface, useRequiredScopes } from "@wso2is/access-
import { getProfileInformation } from "@wso2is/admin.authentication.v1/store";
import Header from "@wso2is/admin.core.v1/components/header";
import { ProtectedRoute } from "@wso2is/admin.core.v1/components/protected-route";
import { getEmptyPlaceholderIllustrations } from "@wso2is/admin.core.v1/configs/ui";

import { AppConstants } from "@wso2is/admin.core.v1/constants/app-constants";
import { UIConstants } from "@wso2is/admin.core.v1/constants/ui-constants";
import { history } from "@wso2is/admin.core.v1/helpers/history";
import { FeatureConfigInterface } from "@wso2is/admin.core.v1/models/config";
import { AppState } from "@wso2is/admin.core.v1/store";
import { AppUtils } from "@wso2is/admin.core.v1/utils/app-utils";
import { createBrokenPageFallback, createRouteErrorHandler } from "@wso2is/admin.core.v1/utils/error-boundary-utils";
import { RouteUtils } from "@wso2is/admin.core.v1/utils/route-utils";
import { applicationConfig } from "@wso2is/admin.extensions.v1";
import { AlertInterface, ProfileInfoInterface, RouteInterface } from "@wso2is/core/models";
import { initializeAlertSystem } from "@wso2is/core/store";
import { RouteUtils as CommonRouteUtils, CommonUtils } from "@wso2is/core/utils";
import { Alert, ContentLoader, EmptyPlaceholder, ErrorBoundary, LinkButton } from "@wso2is/react-components";
import { RouteUtils as CommonRouteUtils } from "@wso2is/core/utils";
import { Alert, ContentLoader, ErrorBoundary } from "@wso2is/react-components";
import isEmpty from "lodash-es/isEmpty";
import React, { FunctionComponent, ReactElement, ReactNode, Suspense, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
Expand Down Expand Up @@ -124,6 +125,10 @@ export const DefaultLayout: FunctionComponent<DefaultLayoutPropsInterface> = ({
* @param key - Index of the route.
* @returns Resolved route to be rendered.
*/
const handleRouteChunkError: ((_error: Error, _errorInfo: React.ErrorInfo) => void) = createRouteErrorHandler(appHomePath);

const brokenPageFallback: ReactNode = createBrokenPageFallback(t);

const renderRoute = (route: RouteInterface, key: number): ReactNode =>
route.redirectTo ? (
<Redirect key={ key } to={ route.redirectTo } />
Expand All @@ -137,9 +142,22 @@ export const DefaultLayout: FunctionComponent<DefaultLayoutPropsInterface> = ({
) : (
<Route
path={ route.path }
render={ (renderProps: RouteComponentProps): ReactNode =>
route.component ? <route.component { ...renderProps } /> : null
}
render={ (renderProps: RouteComponentProps): ReactNode => {
if (!route.component) {
return null;
}

return (
<ErrorBoundary
key={ renderProps.location.pathname }
onChunkLoadError={ AppUtils.onChunkLoadError }
handleError={ handleRouteChunkError }
fallback={ brokenPageFallback }
>
<route.component { ...renderProps } />
</ErrorBoundary>
);
} }
key={ key }
exact={ route.exact }
/>
Expand Down Expand Up @@ -202,25 +220,8 @@ export const DefaultLayout: FunctionComponent<DefaultLayoutPropsInterface> = ({
>
<ErrorBoundary
onChunkLoadError={ AppUtils.onChunkLoadError }
handleError={ (_error: Error, _errorInfo: React.ErrorInfo) => {
sessionStorage.setItem("auth_callback_url_console", appHomePath);
} }
fallback={
(<EmptyPlaceholder
action={
(<LinkButton onClick={ () => CommonUtils.refreshPage() }>
{ t("console:common.placeholders.brokenPage.action") }
</LinkButton>)
}
image={ getEmptyPlaceholderIllustrations().brokenPage }
imageSize="tiny"
subtitle={ [
t("console:common.placeholders.brokenPage.subtitles.0"),
t("console:common.placeholders.brokenPage.subtitles.1")
] }
title={ t("console:common.placeholders.brokenPage.title") }
/>)
}
handleError={ handleRouteChunkError }
fallback={ brokenPageFallback }
>
<Suspense fallback={ <ContentLoader dimmer={ false } /> }>
{ isMarketingConsentBannerEnabled && applicationConfig.marketingConsent.getBannerComponent() }
Expand Down
54 changes: 25 additions & 29 deletions apps/console/src/layouts/full-screen-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,18 @@
*/

import { ProtectedRoute } from "@wso2is/admin.core.v1/components/protected-route";
import { getEmptyPlaceholderIllustrations } from "@wso2is/admin.core.v1/configs/ui";
import { AppConstants } from "@wso2is/admin.core.v1/constants/app-constants";
import { FeatureConfigInterface } from "@wso2is/admin.core.v1/models/config";
import { AppState } from "@wso2is/admin.core.v1/store";
import { AppUtils } from "@wso2is/admin.core.v1/utils/app-utils";
import { createBrokenPageFallback, createRouteErrorHandler } from "@wso2is/admin.core.v1/utils/error-boundary-utils";
import { RouteUtils } from "@wso2is/admin.core.v1/utils/route-utils";
import { RouteInterface } from "@wso2is/core/models";
import { RouteUtils as CommonRouteUtils, CommonUtils } from "@wso2is/core/utils";
import { RouteUtils as CommonRouteUtils } from "@wso2is/core/utils";
import {
ContentLoader,
EmptyPlaceholder,
ErrorBoundary,
FullScreenLayout as FullScreenLayoutSkeleton,
LinkButton
FullScreenLayout as FullScreenLayoutSkeleton
} from "@wso2is/react-components";
import isEmpty from "lodash-es/isEmpty";
import React, {
Expand Down Expand Up @@ -108,6 +106,10 @@ const FullScreenLayout: FunctionComponent<FullScreenLayoutPropsInterface> = (
* @param key - Index of the route.
* @returns Resolved route to be rendered.
*/
const handleRouteChunkError: ((_error: Error, _errorInfo: React.ErrorInfo) => void) = createRouteErrorHandler(appHomePath);

const brokenPageFallback: ReactNode = createBrokenPageFallback(t);

const renderRoute = (route: RouteInterface, key: number): ReactNode => (
route.redirectTo
? <Redirect key={ key } to={ route.redirectTo }/>
Expand All @@ -123,11 +125,22 @@ const FullScreenLayout: FunctionComponent<FullScreenLayoutPropsInterface> = (
: (
<Route
path={ route.path }
render={ (renderProps: RouteComponentProps): ReactNode =>
route.component
? <route.component { ...renderProps } />
: null
}
render={ (renderProps: RouteComponentProps): ReactNode => {
if (!route.component) {
return null;
}

return (
<ErrorBoundary
key={ renderProps.location.pathname }
onChunkLoadError={ AppUtils.onChunkLoadError }
handleError={ handleRouteChunkError }
fallback={ brokenPageFallback }
>
<route.component { ...renderProps } />
</ErrorBoundary>
);
} }
key={ key }
exact={ route.exact }
/>
Expand Down Expand Up @@ -165,25 +178,8 @@ const FullScreenLayout: FunctionComponent<FullScreenLayoutPropsInterface> = (
<FullScreenLayoutSkeleton>
<ErrorBoundary
onChunkLoadError={ AppUtils.onChunkLoadError }
handleError={ (_error: Error, _errorInfo: React.ErrorInfo) => {
sessionStorage.setItem("auth_callback_url_console", appHomePath);
} }
fallback={ (
<EmptyPlaceholder
action={ (
<LinkButton onClick={ () => CommonUtils.refreshPage() }>
{ t("console:common.placeholders.brokenPage.action") }
</LinkButton>
) }
image={ getEmptyPlaceholderIllustrations().brokenPage }
imageSize="tiny"
subtitle={ [
t("console:common.placeholders.brokenPage.subtitles.0"),
t("console:common.placeholders.brokenPage.subtitles.1")
] }
title={ t("console:common.placeholders.brokenPage.title") }
/>
) }
handleError={ handleRouteChunkError }
fallback={ brokenPageFallback }
>
<Suspense fallback={ <ContentLoader dimmer={ false } /> }>
<Switch>
Expand Down
Loading