Added fallback error page for unhandled errors in stats app (#24382)

ref
https://linear.app/ghost/issue/PROD-2313/fix-fallback-error-page-for-unhandled-errors-in-the-stats-app

There is currently a bug in the stats app that throws an error from the
GlobalDataProvider, before the app has fully rendered. This error is
preventing the whole app from loading, and instead it is falling back to
this very unfriendly error page:

<img width="1421" height="474" alt="image"
src="https://github.com/user-attachments/assets/baefda11-7edd-4bb9-8873-47c8b4d5a467"
/>

The fix for that error is irrelevant to this PR — it will be fixed in a
separate PR. This PR is strictly to add a fallback error page for any
unhandled errors in the stats app, so no user ever sees the abomination
above. For now this adds the same exact fallback error handler that is
used for all the `admin-x-` apps, defined in the Ember admin-x-component
file.

<img width="867" height="692" alt="image"
src="https://github.com/user-attachments/assets/0f80c13d-6222-45df-8626-93f0e6a8fd62"
/>

Author: cmraible

apps/stats/src/App.tsx

@@ -1,4 +1,5 @@
 import GlobalDataProvider from './providers/GlobalDataProvider';
+import StatsErrorBoundary from './components/errors/StatsErrorBoundary';
 import {APP_ROUTE_PREFIX, routes} from '@src/routes';
 import {AppProvider, BaseAppProps, FrameworkProvider, Outlet, RouterProvider} from '@tryghost/admin-x-framework';
 import {ShadeApp} from '@tryghost/shade';
@@ -17,11 +18,13 @@ const App: React.FC<BaseAppProps> = ({framework, designSystem, appSettings}) =>
         >
             <AppProvider appSettings={appSettings}>
                 <RouterProvider prefix={APP_ROUTE_PREFIX} routes={routes}>
-                    <GlobalDataProvider>
-                        <ShadeApp className="shade-stats" darkMode={designSystem.darkMode} fetchKoenigLexical={null}>
-                            <Outlet />
-                        </ShadeApp>
-                    </GlobalDataProvider>
+                    <StatsErrorBoundary>
+                        <GlobalDataProvider>
+                            <ShadeApp className="shade-stats" darkMode={designSystem.darkMode} fetchKoenigLexical={null}>
+                                <Outlet />
+                            </ShadeApp>
+                        </GlobalDataProvider>
+                    </StatsErrorBoundary>
                 </RouterProvider>
             </AppProvider>
         </FrameworkProvider>

apps/stats/src/components/errors/StatsErrorBoundary.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import StatsErrorPage from './StatsErrorPage';
+
+class StatsErrorBoundary extends React.Component<{children: React.ReactNode}, {hasError: boolean, error?: Error}> {
+    constructor(props: {children: React.ReactNode}) {
+        super(props);
+        this.state = {hasError: false};
+    }
+
+    static getDerivedStateFromError(error: Error) {
+        return {hasError: true, error};
+    }
+
+    render() {
+        if (this.state.hasError) {
+            return <StatsErrorPage error={this.state.error} />;
+        }
+        return this.props.children;
+    }
+}
+
+export default StatsErrorBoundary;

apps/stats/src/components/errors/StatsErrorPage.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+interface StatsErrorPageProps {
+    error?: Error;
+}
+
+const StatsErrorPage: React.FC<StatsErrorPageProps> = () => {
+    return (
+        <div className="admin-x-container-error">
+            <div className="admin-x-error">
+                <h1>Loading interrupted</h1>
+                <p>They say life is a series of trials and tribulations. This moment right here? It&apos;s a tribulation. Our app was supposed to load, and yet here we are. Loadless. Click back to the dashboard to try again.</p>
+                <a className="cursor-pointer" onClick={() => window.location.reload()}>&larr; Back to the dashboard</a>
+            </div>
+        </div>
+    );
+};
+
+export default StatsErrorPage;