Improve error handling when loading Y.Maps (#39)

dtpstat · Jan 29, 2022 · e571cee · e571cee
1 parent b5ac620
commit e571cee
Showing 1 changed file with 32 additions and 0 deletions.
diff --git a/src/components/inherited-map/components/map/map.js b/src/components/inherited-map/components/map/map.js
@@ -1,10 +1,22 @@
+import * as Sentry from "@sentry/nextjs";
 import { observer } from "mobx-react";
 import * as React from "react";
+import styled from "styled-components";
 
 import { useStore } from "../../models/root-store";
 import { StyledMap } from "./styles";
 // import { debounce } from 'utils'
 
+const ErrorMessage = styled.div`
+  position: absolute;
+  bottom: 20px;
+  font-size: 1.5rem;
+  left: 0;
+  right: 0;
+  text-align: center;
+  color: red;
+`;
+
 export const Map = observer(() => {
   const { mapStore } = useStore();
   // const boundsChangeHandler = React.useCallback( // TODO
@@ -22,6 +34,10 @@ export const Map = observer(() => {
     [mapStore],
   );
   React.useEffect(() => {
+    if (!window.ymaps) {
+      return;
+    }
+
     window.ymaps.ready(["Heatmap"]).then(() => {
       const { center, zoom } = mapStore;
       const map = new window.ymaps.Map(
@@ -67,5 +83,21 @@ export const Map = observer(() => {
 
   const mapRef = React.useRef();
 
+  React.useEffect(() => {
+    if (!window.ymaps) {
+      Sentry.captureException(
+        new Error("Map was not rendered because window.ymaps is undefined"),
+      );
+    }
+  }, []);
+
+  if (!window.ymaps) {
+    return (
+      <ErrorMessage>
+        Яндекс.Карты не загрузились. Попробуйте обновить страницу.
+      </ErrorMessage>
+    );
+  }
+
   return <StyledMap id="map" ref={mapRef} />;
 });