feat(graph): add error boundary error page for project details

graph/client/src/app/routes.tsx

@@ -11,6 +11,8 @@ import {
 } from '@nx/graph/shared';
 import { TasksSidebarErrorBoundary } from './feature-tasks/tasks-sidebar-error-boundary';
 import { ProjectDetailsPage } from '@nx/graph/project-details';
+import { ErrorBoundary } from './ui-components/error-boundary';
+import { ProjectGraphProjectNode } from 'nx/src/config/project-graph';
 
 const { appConfig } = getEnvironmentConfig();
 const projectGraphDataService = getProjectGraphDataService();
@@ -71,7 +73,11 @@ const sourceMapsLoader = async (selectedWorkspaceId: string) => {
 const projectDetailsLoader = async (
   selectedWorkspaceId: string,
   projectName: string
-) => {
+): Promise<{
+  hash: string;
+  project: ProjectGraphProjectNode;
+  sourceMap: Record<string, string[]>;
+}> => {
   const workspaceData = await workspaceDataLoader(selectedWorkspaceId);
   const sourceMaps = await sourceMapsLoader(selectedWorkspaceId);
 
@@ -88,6 +94,7 @@ const projectDetailsLoader = async (
 const childRoutes: RouteObject[] = [
   {
     path: 'projects',
+    errorElement: <ErrorBoundary />,
     children: [
       {
         index: true,
@@ -152,6 +159,7 @@ const childRoutes: RouteObject[] = [
 export const devRoutes: RouteObject[] = [
   {
     path: '/',
+    errorElement: <ErrorBoundary />,
     children: [
       {
         index: true,
@@ -165,6 +173,7 @@ export const devRoutes: RouteObject[] = [
         path: ':selectedWorkspaceId',
         id: 'selectedWorkspace',
         element: <Shell />,
+        errorElement: <ErrorBoundary />,
         shouldRevalidate: ({ currentParams, nextParams }) => {
           return (
             currentParams.selectedWorkspaceId !== nextParams.selectedWorkspaceId
@@ -185,6 +194,7 @@ export const devRoutes: RouteObject[] = [
           const projectName = params.projectName;
           return projectDetailsLoader(params.selectedWorkspaceId, projectName);
         },
+        errorElement: <ErrorBoundary />,
       },
     ],
   },
@@ -194,7 +204,7 @@ export const releaseRoutes: RouteObject[] = [
   {
     path: '/',
     id: 'selectedWorkspace',
-    loader: async ({ request, params }) => {
+    loader: async () => {
       const selectedWorkspaceId = appConfig.defaultWorkspaceId;
       return workspaceDataLoader(selectedWorkspaceId);
     },
@@ -213,12 +223,14 @@ export const releaseRoutes: RouteObject[] = [
       },
       ...childRoutes,
     ],
+    errorElement: <ErrorBoundary />,
   },
   {
     path: 'project-details/:projectName',
     id: 'selectedProjectDetails',
     element: <ProjectDetailsPage />,
-    loader: async ({ request, params }) => {
+    errorElement: <ErrorBoundary />,
+    loader: async ({ params }) => {
       const projectName = params.projectName;
       return projectDetailsLoader(appConfig.defaultWorkspaceId, projectName);
     },

graph/client/src/app/ui-components/error-boundary.tsx

@@ -0,0 +1,20 @@
+import { useRouteError } from 'react-router-dom';
+
+export function ErrorBoundary() {
+  let error = useRouteError().toString();
+
+  let message = 'Failed to fetch data for graph.';
+  if (process.env.NX_INVOKED_BY_RUNNER) {
+    message += ` Please rerun the command: \`nx run ${process.env.NX_TASK_TARGET_PROJECT}:${process.env.NX_TASK_TARGET_TARGET}\`.`;
+  }
+
+  return (
+    <div className="flex flex-col bg-gray-50 items-center justify-center h-screen w-full">
+      <h1 className="text-4xl mb-4">Error</h1>
+      <div>
+        <p className="mb-4">{message}</p>
+        <p className="text-sm">Error message: {error}</p>
+      </div>
+    </div>
+  );
+}

graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx

@@ -4,9 +4,7 @@ import {
   ChevronDownIcon,
   ChevronUpIcon,
   EyeIcon,
-  InformationCircleIcon,
   PlayIcon,
-  QuestionMarkCircleIcon,
 } from '@heroicons/react/24/outline';
 
 // nx-ignore-next-line

nx-dev/ui-markdoc/src/lib/tags/project-details.component.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from '@nx/nx-dev/ui-theme';
 import { JSX, ReactElement, useEffect, useState } from 'react';
 import { ProjectDetails as ProjectDetailsUi } from '@nx/graph/ui-project-details';
 
@@ -26,7 +25,6 @@ export function ProjectDetails({
   jsonFile?: string;
   children: ReactElement;
 }): JSX.Element {
-  const [theme] = useTheme();
   const [parsedProps, setParsedProps] = useState<any>();
   const getData = async (path: string) => {
     const response = await fetch('/documentation/' + path, {