react-query 에러가 발생하여 Unknown error페이지로 이동한 경우, X버튼이나 Go to Home 버튼을 클릭을 했음에도 불구하고 화면에 어떠한 동작도 하지 않는 이슈가 발생 했다.

index.tsx

console.info(`App Environment : ${process.env.REACT_APP_ENV}`);

// Google Tag Manager
TagManager.initialize({
  gtmId: process.env.REACT_APP_GTM_ID,
});

const container = document.getElementById(`root`);
const root = createRoot(container!);
root.render(
  <QueryClientProvider client={queryClient}>
    <ReactQueryDevtools initialIsOpen={false} />
    <Provider store={store}>
      <NetworkErrorBoundary>
        <JwtProvider />
        <UserSecurityProvider />
        <TokensProvider />
        <StadiumProvider />
        {/* <InvestmentProvider /> */}
        <App />
      </NetworkErrorBoundary>
    </Provider>
  </QueryClientProvider>,
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: <https://cra.link/PWA>
serviceWorkerRegistration.unregister();

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: <https://bit.ly/CRA-vitals>
reportWebVitals();

App.tsx

<IonApp>
      {/* eslint-disable-next-line react/jsx-no-undef */}
      <IonReactRouter>
        <PushNotificationHandler />
        <KstardiumAppUrlListener />
        <RouteEventProvider />
        <UiProvider />

        <Suspense fallback={<LoadingLayer />}>
          <ErrorBoundary>
            <Route
              exact
              path={[
                `/home`,
            

참고하면 좋을 bridge 코드

에러바운더리와 서스펜서를 사용하면 선언적프로그래밍이 가능.

에러바운더리 16, 서스펜스 18이지만 환상의 조합