Handle errors from Keycloak JS in the Account Console (#27721)

Closes #14501

Signed-off-by: Jon Koops <jonkoops@gmail.com>
This commit is contained in:
Jon Koops 2024-03-08 16:03:03 +01:00 committed by GitHub
parent c5553b46b4
commit 264ab4d268
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 21 additions and 4 deletions

View file

@ -10,9 +10,13 @@ import {
import { useTranslation } from "react-i18next";
import { isRouteErrorResponse, useRouteError } from "react-router-dom";
export const ErrorPage = () => {
type ErrorPageProps = {
error?: unknown;
};
export const ErrorPage = (props: ErrorPageProps) => {
const { t } = useTranslation();
const error = useRouteError();
const error = useRouteError() ?? props.error;
const errorMessage = getErrorMessage(error);
function onRetry() {

View file

@ -11,6 +11,7 @@ import {
} from "react";
import { AlertProvider, Help } from "ui-shared";
import { Environment } from "../environment";
import { ErrorPage } from "./ErrorPage";
export type KeycloakContext = KeycloakContextProps & {
keycloak: Keycloak;
@ -39,6 +40,7 @@ export const KeycloakProvider = ({
}: PropsWithChildren<KeycloakContextProps>) => {
const calledOnce = useRef(false);
const [init, setInit] = useState(false);
const [error, setError] = useState<unknown>();
const keycloak = useMemo(
() =>
new Keycloak({
@ -54,6 +56,7 @@ export const KeycloakProvider = ({
if (calledOnce.current) {
return;
}
const init = () => {
return keycloak.init({
onLoad: "check-sso",
@ -61,11 +64,21 @@ export const KeycloakProvider = ({
responseMode: "query",
});
};
init().then(() => setInit(true));
init()
.then(() => setInit(true))
.catch((error) => setError(error));
calledOnce.current = true;
}, [keycloak]);
if (!init) return <Spinner />;
if (error) {
return <ErrorPage error={error} />;
}
if (!init) {
return <Spinner />;
}
return (
<KeycloakEnvContext.Provider value={{ environment, keycloak }}>