feat: Catch graph error in boundary

editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx

@@ -8,8 +8,8 @@ import Tab, { tabClasses, TabProps } from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import Typography from "@mui/material/Typography";
 import { SiteAddress } from "@planx/components/FindProperty/model";
-import { ErrorSummaryContainer } from "@planx/components/shared/Preview/ErrorSummaryContainer";
 import { SchemaFields } from "@planx/components/shared/Schema/SchemaFields";
+import { GraphError } from "components/Error/GraphError";
 import { GeoJsonObject } from "geojson";
 import sortBy from "lodash/sortBy";
 import { useStore } from "pages/FlowEditor/lib/store";
@@ -305,32 +305,14 @@ export const Presentational: React.FC<PresentationalProps> = (props) => (
   </MapAndLabelProvider>
 );
 
-const GraphError = (props: Props) => (
-  <Card handleSubmit={props.handleSubmit} isValid>
-    <CardHeader title={props.title} description={props.description} />
-    <ErrorSummaryContainer
-      role="status"
-      data-testid="error-summary-invalid-graph"
-    >
-      <Typography variant="h4" component="h2" gutterBottom>
-        Invalid graph
-      </Typography>
-      <Typography variant="body2">
-        Edit this flow so that "MapAndLabel" is positioned after "FindProperty";
-        an initial address is required to correctly display the map.
-      </Typography>
-    </ErrorSummaryContainer>
-  </Card>
-);
-
 function MapAndLabelComponent(props: Props) {
   const teamSettings = useStore.getState().teamSettings;
   const passport = useStore((state) => state.computePassport());
   const { latitude, longitude } =
     (passport?.data?._address as SiteAddress) || {};
 
   if (!latitude || !longitude) {
-    return <GraphError {...props} />;
+    throw new GraphError("nodeMustFollowFindProperty");
   }
 
   return (

editor.planx.uk/src/@planx/components/PlanningConstraints/Public.tsx

@@ -9,6 +9,7 @@ import Card from "@planx/components/shared/Preview/Card";
 import CardHeader from "@planx/components/shared/Preview/CardHeader";
 import type { PublicProps } from "@planx/components/ui";
 import DelayedLoadingIndicator from "components/DelayedLoadingIndicator";
+import { GraphError } from "components/Error/GraphError";
 import capitalize from "lodash/capitalize";
 import { useStore } from "pages/FlowEditor/lib/store";
 import { HandleSubmit } from "pages/Preview/Node";
@@ -63,6 +64,8 @@ function Component(props: Props) {
 
   // PlanningConstraints must come after at least a FindProperty in the graph
   const showGraphError = !x || !y || !longitude || !latitude;
+  if (showGraphError)
+    throw new GraphError("mapInputFieldMustFollowFindProperty");
 
   // Even though this component will fetch fresh GIS data when coming "back",
   //   still prepopulate any previously marked inaccurateConstraints
@@ -145,8 +148,6 @@ function Component(props: Props) {
     ...roads?.metadata,
   };
 
-  if (showGraphError) return <ConstraintsGraphError {...props} />;
-
   const isLoading = isValidating || isValidatingRoads;
   if (isLoading)
     return (
@@ -396,28 +397,3 @@ const ConstraintsFetchError = (props: ConstraintsFetchErrorProps) => (
     </ErrorSummaryContainer>
   </Card>
 );
-
-interface ConstraintsGraphErrorProps {
-  title: string;
-  description: string;
-  handleSubmit?: HandleSubmit;
-}
-
-const ConstraintsGraphError = (props: ConstraintsGraphErrorProps) => (
-  <Card handleSubmit={props.handleSubmit} isValid>
-    <CardHeader title={props.title} description={props.description} />
-    <ErrorSummaryContainer
-      role="status"
-      data-testid="error-summary-invalid-graph"
-    >
-      <Typography variant="h4" component="h2" gutterBottom>
-        Invalid graph
-      </Typography>
-      <Typography variant="body2">
-        Edit this flow so that "Planning constraints" is positioned after "Find
-        property"; an address or site boundary drawing is required to fetch
-        data.
-      </Typography>
-    </ErrorSummaryContainer>
-  </Card>
-);

editor.planx.uk/src/@planx/components/PropertyInformation/Public.tsx

@@ -1,12 +1,12 @@
 import { useQuery } from "@apollo/client";
 import Box from "@mui/material/Box";
 import Link from "@mui/material/Link";
-import Typography from "@mui/material/Typography";
 import { visuallyHidden } from "@mui/utils";
 import Card from "@planx/components/shared/Preview/Card";
 import CardHeader from "@planx/components/shared/Preview/CardHeader";
 import { SummaryListTable } from "@planx/components/shared/Preview/SummaryList";
 import type { PublicProps } from "@planx/components/ui";
+import { GraphError } from "components/Error/GraphError";
 import { Feature } from "geojson";
 import { publicClient } from "lib/graphql";
 import find from "lodash/find";
@@ -17,7 +17,6 @@ import React from "react";
 
 import type { SiteAddress } from "../FindProperty/model";
 import { FETCH_BLPU_CODES } from "../FindProperty/Public";
-import { ErrorSummaryContainer } from "../shared/Preview/ErrorSummaryContainer";
 import { MapContainer } from "../shared/Preview/MapContainer";
 import type { PropertyInformation } from "./model";
 
@@ -32,7 +31,10 @@ function Component(props: PublicProps<PropertyInformation>) {
     client: publicClient,
   });
 
-  return passport.data?._address ? (
+  if (!passport.data?._address)
+    throw new GraphError("nodeMustFollowFindProperty");
+
+  return (
     <Presentational
       title={props.title}
       description={props.description}
@@ -60,21 +62,6 @@ function Component(props: PublicProps<PropertyInformation>) {
         });
       }}
     />
-  ) : (
-    <Card>
-      <ErrorSummaryContainer
-        role="status"
-        data-testid="error-summary-invalid-graph"
-      >
-        <Typography variant="h4" component="h2" gutterBottom>
-          Invalid graph
-        </Typography>
-        <Typography variant="body2">
-          Edit this flow so that "Property information" is positioned after
-          "Find property"; an address is required to render.
-        </Typography>
-      </ErrorSummaryContainer>
-    </Card>
   );
 }
 

editor.planx.uk/src/@planx/components/shared/Schema/InputFields/MapFieldInput.tsx

@@ -2,6 +2,7 @@ import Box from "@mui/material/Box";
 import { SiteAddress } from "@opensystemslab/planx-core/types";
 import { MapContainer } from "@planx/components/shared/Preview/MapContainer";
 import type { MapField } from "@planx/components/shared/Schema/model";
+import { GraphError } from "components/Error/GraphError";
 import { Feature } from "geojson";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React, { useEffect, useState } from "react";
@@ -18,12 +19,8 @@ export const MapFieldInput: React.FC<Props<MapField>> = (props) => {
       (state.computePassport()?.data?.["_address"] as SiteAddress) || {},
   );
 
-  if (!longitude || !latitude) {
-    throw Error(
-      'Edit this flow so that this component is positioned after "FindProperty"; an address is required for schemas that include a "map" field.',
-      { cause: "Invalid graph" },
-    );
-  }
+  if (!longitude || !latitude)
+    throw new GraphError("mapInputFieldMustFollowFindProperty");
 
   const {
     formik,

editor.planx.uk/src/components/ErrorFallback.tsx → editor.planx.uk/src/components/Error/ErrorFallback.tsx

@@ -3,21 +3,24 @@ import Card from "@planx/components/shared/Preview/Card";
 import { ErrorSummaryContainer } from "@planx/components/shared/Preview/ErrorSummaryContainer";
 import React from "react";
 
-import { logger } from "../airbrake";
+import { logger } from "../../airbrake";
+import { GraphErrorComponent, isGraphError } from "./GraphError";
 
-function ErrorFallback(props: { error: Error }) {
-  logger.notify(props.error);
+const ErrorFallback: React.FC<{ error: Error }> = ({ error }) => {
+  if (isGraphError(error)) return <GraphErrorComponent error={error} />;
+
+  logger.notify(error);
 
   return (
     <Card>
       <ErrorSummaryContainer role="alert">
         <Typography variant="h4" component="h1" gutterBottom>
-          {(props.error.cause as string) || "Something went wrong"}
+          Something went wrong
         </Typography>
         <Typography>
-          {props.error?.message && (
+          {error.message && (
             <pre style={{ color: "#E91B0C", whiteSpace: "pre-line" }}>
-              {props.error.message}
+              {error.message}
             </pre>
           )}
         </Typography>
@@ -27,6 +30,6 @@ function ErrorFallback(props: { error: Error }) {
       </ErrorSummaryContainer>
     </Card>
   );
-}
+};
 
 export default ErrorFallback;

editor.planx.uk/src/components/Error/GraphError.tsx

@@ -0,0 +1,45 @@
+import Typography from "@mui/material/Typography";
+import Card from "@planx/components/shared/Preview/Card";
+import CardHeader from "@planx/components/shared/Preview/CardHeader";
+import { ErrorSummaryContainer } from "@planx/components/shared/Preview/ErrorSummaryContainer";
+import React from "react";
+
+type GraphErrorType =
+  | "nodeMustFollowFindProperty"
+  | "mapInputFieldMustFollowFindProperty";
+
+const GRAPH_ERROR_MESSAGES: Record<GraphErrorType, string> = {
+  nodeMustFollowFindProperty:
+    'Edit this flow so that this node is positioned after "Find property"; an address or site boundary drawing is required to fetch data',
+  mapInputFieldMustFollowFindProperty:
+    'Edit this flow so that this component is positioned after "FindProperty"; an address is required for schemas that include a "map" field.',
+};
+
+export class GraphError extends Error {
+  constructor(public type: GraphErrorType) {
+    super();
+    this.type = type;
+  }
+}
+
+export const isGraphError = (error: unknown): error is GraphError =>
+  error instanceof GraphError;
+
+export const GraphErrorComponent: React.FC<{ error: GraphError }> = ({
+  error,
+}) => (
+  <Card>
+    <CardHeader />
+    <ErrorSummaryContainer
+      role="status"
+      data-testid="error-summary-invalid-graph"
+    >
+      <Typography variant="h4" component="h2" gutterBottom>
+        Invalid graph
+      </Typography>
+      <Typography variant="body2">
+        {GRAPH_ERROR_MESSAGES[error.type]}
+      </Typography>
+    </ErrorSummaryContainer>
+  </Card>
+);

editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/EventsLog.tsx

@@ -15,7 +15,7 @@ import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import Typography from "@mui/material/Typography";
 import DelayedLoadingIndicator from "components/DelayedLoadingIndicator";
-import ErrorFallback from "components/ErrorFallback";
+import ErrorFallback from "components/Error/ErrorFallback";
 import { format } from "date-fns";
 import React, { useState } from "react";
 import ErrorSummary from "ui/shared/ErrorSummary";

editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx

@@ -9,7 +9,7 @@ import IconButton from "@mui/material/IconButton";
 import { styled } from "@mui/material/styles";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { parseFormValues } from "@planx/components/shared";
-import ErrorFallback from "components/ErrorFallback";
+import ErrorFallback from "components/Error/ErrorFallback";
 import { hasFeatureFlag } from "lib/featureFlags";
 import React from "react";
 import { ErrorBoundary } from "react-error-boundary";

editor.planx.uk/src/pages/Preview/Questions.tsx

@@ -12,7 +12,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { ApplicationPath, Session } from "types";
 
-import ErrorFallback from "../../components/ErrorFallback";
+import ErrorFallback from "../../components/Error/ErrorFallback";
 import { useStore } from "../FlowEditor/lib/store";
 import Node, { HandleSubmit } from "./Node";
 

editor.planx.uk/src/pages/layout/FlowEditorLayout.tsx

@@ -1,4 +1,4 @@
-import ErrorFallback from "components/ErrorFallback";
+import ErrorFallback from "components/Error/ErrorFallback";
 import FlowEditor from "pages/FlowEditor";
 import React, { PropsWithChildren } from "react";
 import { ErrorBoundary } from "react-error-boundary";

editor.planx.uk/src/pages/layout/PublicLayout.tsx

@@ -6,7 +6,7 @@ import {
   ThemeProvider,
 } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
-import ErrorFallback from "components/ErrorFallback";
+import ErrorFallback from "components/Error/ErrorFallback";
 import Feedback from "components/Feedback";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React, { PropsWithChildren } from "react";