Added fallback error page for unhandled errors in the posts app (#24402)

ref
https://linear.app/ghost/issue/PROD-2313/unhandled-errors-in-the-stats-and-posts-apps-display-a-full-stack

Currently unhandled errors in the posts app use the default react error
page, which includes a full stack trace and is not friendly for users.
This adds a generic fallback error boundary and error page, which
matches the existing "Loading interrupted" screen that is shown if the
app can't be loaded.

Users should never see this screen, but just in case it's better to have
something more user friendly like this.

Author: cmraible

apps/posts/src/App.tsx

@@ -1,3 +1,4 @@
+import PostsErrorBoundary from './components/errors/PostsErrorBoundary';
 import React, {createContext, useContext} from 'react';
 import {APP_ROUTE_PREFIX, routes} from '@src/routes';
 import {AppContextType, BaseAppProps, FrameworkProvider, Outlet, RouterProvider} from '@tryghost/admin-x-framework';
@@ -41,9 +42,11 @@ const App: React.FC<AppProps> = ({framework, designSystem, fromAnalytics = false
         >
             <PostsAppContext.Provider value={appContextValue}>
                 <RouterProvider prefix={APP_ROUTE_PREFIX} routes={routes}>
-                    <ShadeApp className="shade-posts" darkMode={designSystem.darkMode} fetchKoenigLexical={null}>
-                        <Outlet />
-                    </ShadeApp>
+                    <PostsErrorBoundary>
+                        <ShadeApp className="shade-posts" darkMode={designSystem.darkMode} fetchKoenigLexical={null}>
+                            <Outlet />
+                        </ShadeApp>
+                    </PostsErrorBoundary>
                 </RouterProvider>
             </PostsAppContext.Provider>
         </FrameworkProvider>

apps/posts/src/components/errors/PostsErrorBoundary.tsx

@@ -0,0 +1,22 @@
+import PostsErrorPage from './PostsErrorPage';
+import React from 'react';
+
+class PostsErrorBoundary 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 <PostsErrorPage error={this.state.error} />;
+        }
+        return this.props.children;
+    }
+}
+
+export default PostsErrorBoundary;

apps/posts/src/components/errors/PostsErrorPage.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+interface PostsErrorPageProps {
+    error?: Error;
+}
+
+const PostsErrorPage: React.FC<PostsErrorPageProps> = () => {
+    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 PostsErrorPage;