add map layer failure fallback (#2708)

Author: CollinBeczak

src/components/EnhancedMap/SourcedTileLayer/SourcedTileLayer.jsx

@@ -11,6 +11,7 @@ import {
   normalizeLayer,
 } from "../../../services/VisibleLayer/LayerSources";
 import WithErrors from "../../HOCs/WithErrors/WithErrors";
+import TileLayerErrorBoundary from "../../TaskClusterMap/TileLayerErrorBoundary";
 
 /**
  * SourcedTileLayer renders a react-leaflet TileLayer from the current
@@ -21,7 +22,7 @@ import WithErrors from "../../HOCs/WithErrors/WithErrors";
  *
  * @author [Neil Rotstan](https://github.com/nrotstan)
  */
-const SourcedTileLayer = (props) => {
+const SourcedTileLayerInternal = (props) => {
   const [layerRenderFailed, setLayerRenderFailed] = useState(false);
 
   const attribution = (layer) => {
@@ -35,7 +36,7 @@ const SourcedTileLayer = (props) => {
   };
 
   useEffect(() => {
-    if (layerRenderFailed && currentLayer) {
+    if (layerRenderFailed) {
       setLayerRenderFailed(false);
     }
   }, [props.source.id]);
@@ -45,7 +46,7 @@ const SourcedTileLayer = (props) => {
   }
 
   if (layerRenderFailed) {
-    if (fallbackLayer) {
+    if (props.fallbackLayer) {
       return (
         <FormattedMessage
           {...AppErrors.map.renderFailure}
@@ -59,13 +60,20 @@ const SourcedTileLayer = (props) => {
 
   const normalizedLayer = normalizeLayer(props.source);
 
+  const handleTileError = () => {
+    setLayerRenderFailed(true);
+  };
+
   if (normalizedLayer.type === "bing") {
     return (
       <BingLayer
         key={normalizedLayer.id}
         {...normalizedLayer}
         type="Aerial"
         attribution={attribution(normalizedLayer)}
+        eventHandlers={{
+          tileerror: handleTileError,
+        }}
       />
     );
   }
@@ -75,20 +83,34 @@ const SourcedTileLayer = (props) => {
       key={normalizedLayer.id}
       {...normalizedLayer}
       attribution={attribution(normalizedLayer)}
+      eventHandlers={{
+        tileerror: handleTileError,
+      }}
       {...props}
     />
   );
 };
 
+const SourcedTileLayer = (props) => {
+  return (
+    <TileLayerErrorBoundary sourceId={props.source?.id}>
+      <SourcedTileLayerInternal {...props} />
+    </TileLayerErrorBoundary>
+  );
+};
+
 SourcedTileLayer.propTypes = {
   /** LayerSource to use */
   source: layerSourceShape,
   /** Set to true to suppress display of source attribution */
   skipAttribution: PropTypes.bool,
+  /** Set to true if this is a fallback layer */
+  fallbackLayer: PropTypes.bool,
 };
 
 SourcedTileLayer.defaultProps = {
   skipAttribution: false,
+  fallbackLayer: false,
 };
 
 export default WithErrors(injectIntl(SourcedTileLayer));

src/components/TaskClusterMap/TileLayerErrorBoundary.jsx

@@ -0,0 +1,76 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+import AppErrors from "../../services/Error/AppErrors";
+
+/**
+ * Error boundary component that provides a black screen fallback
+ * when tile layer rendering fails
+ */
+class TileLayerErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.state.hasError && prevProps.sourceId !== this.props.sourceId) {
+      this.setState({ hasError: false });
+    }
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error("Tile layer error:", error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: "#000000",
+            zIndex: 1,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "#ffffff",
+            fontSize: "14px",
+            padding: "60px",
+            fontFamily: "Arial, sans-serif",
+          }}
+        >
+          <div style={{ textAlign: "center" }}>
+            <FormattedMessage
+              {...AppErrors.map.renderFailure}
+              values={{ details: "map layer unavailable" }}
+            />
+            <div style={{ marginTop: "10px", fontSize: "12px", opacity: 0.8 }}>
+              <FormattedMessage
+                id="TileLayerErrorBoundary.retryMessage"
+                defaultMessage="Please refresh the page to retry"
+              />
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+TileLayerErrorBoundary.propTypes = {
+  children: PropTypes.node.isRequired,
+  sourceId: PropTypes.string,
+};
+
+export default TileLayerErrorBoundary;