Merge pull request #85 from which-ecosystem/errors

Handle frontend errors

7 files changed, 62 insertions, 23 deletions

diff --git a/package-lock.json b/package-lock.json
index a79494a..4ec8cee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10858,6 +10858,24 @@
         "scheduler": "^0.19.1"
       }
     },
+    "react-error-boundary": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-2.3.1.tgz",
+      "integrity": "sha512-w1i++MM5GV6WTnM3MtLdw9CNXxqydkZwbwNDT9GBFBaWs0sp21z27DGIevb3fism1T+LGfdWgTFlhaq7G1pIMA==",
+      "requires": {
+        "@babel/runtime": "^7.10.5"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.11.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
+          "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
+    },
     "react-error-overlay": {
       "version": "6.0.7",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz",
diff --git a/package.json b/package.json
index afb17ab..7375c36 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "notistack": "^0.9.17",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-error-boundary": "^2.3.1",
     "react-icons": "^3.10.0",
     "react-router-dom": "^5.2.0",
     "react-sage": "^0.1.2",
diff --git a/src/assets/error.svg b/src/assets/error.svg
new file mode 100644
index 0000000..5adc7a3
--- /dev/null
+++ b/src/assets/error.svg
@@ -0,0 +1 @@
+<svg id="f698cf57-4f6b-4529-a39c-70592e247574" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="840" height="726.85" viewBox="0 0 840 726.85"><defs><linearGradient id="aba94383-0ea8-4a3d-bf3d-6bf7d0bb624b" x1="432" y1="245.78" x2="432" y2="18.85" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient><linearGradient id="e6500262-d2e6-47ad-ace4-95109017cb85" x1="447.27" y1="1916.01" x2="447.27" y2="1730.58" gradientTransform="matrix(0.95, 0.32, -0.32, 0.95, 752.71, -1245.02)" xlink:href="#aba94383-0ea8-4a3d-bf3d-6bf7d0bb624b"/><linearGradient id="ba3c64e7-a915-4515-a2e7-88140805555d" x1="334.27" y1="1539.38" x2="334.27" y2="1353.95" gradientTransform="matrix(0.95, 0.32, -0.32, 0.95, 752.71, -1245.02)" xlink:href="#aba94383-0ea8-4a3d-bf3d-6bf7d0bb624b"/><linearGradient id="fa3dfd3f-e414-4f67-9974-b38d7e79cebc" x1="432" y1="258.09" x2="432" y2="103.27" xlink:href="#aba94383-0ea8-4a3d-bf3d-6bf7d0bb624b"/></defs><title>Taken</title><g opacity="0.8"><ellipse cx="432" cy="132.31" rx="146.46" ry="113.46" fill="url(#aba94383-0ea8-4a3d-bf3d-6bf7d0bb624b)"/></g><ellipse cx="432" cy="132.31" rx="143.21" ry="110.94" fill="#6c63ff"/><path d="M491.94,231.21c0-61.27,64.11-110.94,143.2-110.94A175.54,175.54,0,0,1,706.5,135c-25.17-17-58.1-27.33-94.14-27.33-79.09,0-143.21,49.67-143.21,110.94,0,41.14,28.91,77.05,71.86,96.21C510.94,294.48,491.94,264.57,491.94,231.21Z" transform="translate(-180 -86.57)" fill="#fff" opacity="0.1"/><polygon points="432 176.9 590.76 451.88 749.52 726.85 432 726.85 114.48 726.85 273.24 451.88 432 176.9" fill="#6c63ff" opacity="0.2"/><g opacity="0.3"><path d="M649.67,652.79,662,616.2a62.66,62.66,0,0,0-23.2-70.89l.1-.06a61.48,61.48,0,0,0-15.79-8h0l-.17-.06-.19-.06h0a61.55,61.55,0,0,0-16.9-3.18,59.28,59.28,0,0,0-6.11,0,62.32,62.32,0,0,0-10.49,1.45c-1,.22-2,.47-2.91.74s-1.93.56-2.88.87c-1.9.63-3.77,1.34-5.6,2.15-.92.4-1.83.82-2.72,1.27a61.47,61.47,0,0,0-7.75,4.56c-.83.57-1.64,1.16-2.44,1.76a62,62,0,0,0-21.24,29.6L524.33,634a61.86,61.86,0,0,0-2.68,28.12c.2,1.45.45,2.89.74,4.32s.65,2.84,1,4.24c.27.93.55,1.86.86,2.78.46,1.37,1,2.74,1.51,4.08.37.89.76,1.78,1.17,2.66.81,1.75,1.71,3.46,2.68,5.13s2,3.3,3.16,4.88c.84,1.18,1.73,2.34,2.65,3.46,1.24,1.5,2.54,3,3.92,4.33a61.81,61.81,0,0,0,21,13.89h0l0,0,.34.14a21.66,21.66,0,0,1,1.4-2.17c3-4.11,8.22-7,13.19-5.92.36.08.72.19,1.08.3,2.52.89,5,2.48,7.43,3.26a6.66,6.66,0,0,0,5.61-.07c4.86-2.59,3.06-10.76,7.23-14.34a6.5,6.5,0,0,1,.61-.46,1.88,1.88,0,0,1-.16-.23c3.22-2,7.68-.67,11.39.62,4,1.41,9.22,2.36,12-.91,1.88-2.24,1.74-5.65,3.53-8,2.08-2.7,6-3,9.39-2.52l.17.05c6.5,2.68,13.6-1.77,13.1-8.78C646.06,663.51,649,654.7,649.67,652.79Z" transform="translate(-180 -86.57)" fill="url(#e6500262-d2e6-47ad-ace4-95109017cb85)"/></g><path d="M563.21,706.78c2.92-4,7.93-6.8,12.73-5.71s9.35,5.66,13.62,3.37c5.84-3.12,1.7-14.59,11.18-15.44a12.44,12.44,0,0,1,5.77,1c4,1.63,10.26,3.47,13.34-.2,1.81-2.16,1.68-5.45,3.41-7.69,2-2.6,5.81-2.93,9.06-2.43l.16.05c6.27,2.59,13.13-1.71,12.64-8.47-.63-9,2.23-17.48,2.85-19.32l11.88-35.31A60.38,60.38,0,0,0,622,540.34h0a60.38,60.38,0,0,0-76.27,37.86L527,633.73a60.39,60.39,0,0,0,34.82,75.15A21.47,21.47,0,0,1,563.21,706.78Z" transform="translate(-180 -86.57)" fill="#fff"/><circle cx="405.35" cy="486.08" r="6.51" opacity="0.2"/><circle cx="442.37" cy="498.53" r="6.51" opacity="0.2"/><ellipse cx="595.55" cy="603.56" rx="9.76" ry="6.51" transform="translate(-346.41 888.98) rotate(-71.4)" fill="#e0e0e0"/><circle cx="552.53" cy="487.52" r="9.76" fill="#fff"/><circle cx="583.45" cy="472.17" r="4.88" fill="#fff"/><g opacity="0.5"><g opacity="0.3"><path d="M662.67,259.79,675,223.2a62.66,62.66,0,0,0-23.2-70.89l.1-.06a61.48,61.48,0,0,0-15.79-8h0l-.17-.06-.19-.06h0a61.55,61.55,0,0,0-16.9-3.18,59.28,59.28,0,0,0-6.11,0,62.32,62.32,0,0,0-10.49,1.45c-1,.22-2,.47-2.91.74s-1.93.56-2.88.87c-1.9.63-3.77,1.34-5.6,2.15-.92.4-1.83.82-2.72,1.27a61.47,61.47,0,0,0-7.75,4.56c-.83.57-1.64,1.16-2.44,1.76a62,62,0,0,0-21.24,29.6L537.33,241a61.86,61.86,0,0,0-2.68,28.12c.2,1.45.45,2.89.74,4.32s.65,2.84,1,4.24c.27.93.55,1.86.86,2.78.46,1.37,1,2.74,1.51,4.08.37.89.76,1.78,1.17,2.66.81,1.75,1.71,3.46,2.68,5.13s2,3.3,3.16,4.88c.84,1.18,1.73,2.34,2.65,3.46,1.24,1.5,2.54,2.95,3.92,4.33a61.81,61.81,0,0,0,21,13.89h0l0,0,.34.14a21.66,21.66,0,0,1,1.4-2.17c3-4.11,8.22-7,13.19-5.92.36.08.72.19,1.08.3,2.52.89,5,2.48,7.43,3.26a6.66,6.66,0,0,0,5.61-.07c4.86-2.59,3.06-10.76,7.23-14.34a6.5,6.5,0,0,1,.61-.46,1.88,1.88,0,0,1-.16-.23c3.22-2,7.68-.67,11.39.62,4,1.41,9.22,2.36,12-.91,1.88-2.24,1.74-5.65,3.53-8,2.08-2.7,6-3,9.39-2.52l.17,0c6.5,2.68,13.6-1.77,13.1-8.78C659.06,270.51,662,261.7,662.67,259.79Z" transform="translate(-180 -86.57)" fill="url(#ba3c64e7-a915-4515-a2e7-88140805555d)"/></g><path d="M576.21,313.78c2.92-4,7.93-6.8,12.73-5.71s9.35,5.66,13.62,3.37c5.84-3.12,1.7-14.59,11.18-15.44a12.44,12.44,0,0,1,5.77,1c4,1.63,10.26,3.47,13.34-.2,1.81-2.16,1.68-5.45,3.41-7.69,2-2.6,5.81-2.93,9.06-2.43l.16.05c6.27,2.59,13.13-1.71,12.64-8.47-.63-9,2.23-17.48,2.85-19.32l11.88-35.31A60.38,60.38,0,0,0,635,147.34h0a60.38,60.38,0,0,0-76.27,37.86L540,240.73a60.39,60.39,0,0,0,34.82,75.15A21.47,21.47,0,0,1,576.21,313.78Z" transform="translate(-180 -86.57)" fill="#fff"/><circle cx="418.35" cy="93.08" r="6.51" opacity="0.2"/><circle cx="455.37" cy="105.53" r="6.51" opacity="0.2"/></g><path d="M749.52,186A87.52,87.52,0,0,1,752.31,208c0,61.27-64.11,110.94-143.2,110.94C544.38,318.9,489.69,285.64,472,240c13.14,50.77,71,89,140.41,89,79.09,0,143.21-49.67,143.21-110.94A88.16,88.16,0,0,0,749.52,186Z" transform="translate(-180 -86.57)" opacity="0.1"/><g opacity="0.8"><ellipse cx="432" cy="180.68" rx="296.18" ry="77.41" fill="url(#fa3dfd3f-e414-4f67-9974-b38d7e79cebc)"/></g><path d="M612,192.4c-158.18,0-286.42,33.51-286.42,74.86H898.42C898.42,225.91,770.18,192.4,612,192.4Z" transform="translate(-180 -86.57)" fill="#fff"/><path d="M612,342.11c158.18,0,286.42-33.51,286.42-74.85H325.58C325.58,308.6,453.82,342.11,612,342.11Z" transform="translate(-180 -86.57)" fill="#fff"/><path d="M612,342.11c158.18,0,286.42-33.51,286.42-74.85H325.58C325.58,308.6,453.82,342.11,612,342.11Z" transform="translate(-180 -86.57)" opacity="0.05"/><rect x="295.3" y="161.15" width="273.4" height="39.06" rx="17.22" opacity="0.05"/><path d="M313.89,144.38a3.68,3.68,0,0,1-2.05-4.44,1.86,1.86,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.82,1.82,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2.05,2,2,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.62,1.62,0,0,0,.36.21,3.68,3.68,0,0,1,2.05,4.44,1.89,1.89,0,0,0-.08.4h0a1.84,1.84,0,0,0,3.31,1.23h0a1.65,1.65,0,0,0,.2-.37,3.67,3.67,0,0,1,4.44-2,2,2,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.62,1.62,0,0,0,313.89,144.38Z" transform="translate(-180 -86.57)" fill="#4d8af0" opacity="0.5"/><path d="M822.89,450.38a3.68,3.68,0,0,1-2-4.44,1.86,1.86,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.82,1.82,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2.05,2,2,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.62,1.62,0,0,0,.36.21,3.68,3.68,0,0,1,2,4.44,1.89,1.89,0,0,0-.08.4h0a1.84,1.84,0,0,0,3.31,1.23h0a1.65,1.65,0,0,0,.2-.37,3.67,3.67,0,0,1,4.44-2,2,2,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.62,1.62,0,0,0,822.89,450.38Z" transform="translate(-180 -86.57)" fill="#4d8af0" opacity="0.5"/><path d="M260.89,592.38a3.68,3.68,0,0,1-2.05-4.44,1.86,1.86,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.82,1.82,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2.05,2,2,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.62,1.62,0,0,0,.36.21,3.68,3.68,0,0,1,2.05,4.44,1.89,1.89,0,0,0-.08.4h0a1.84,1.84,0,0,0,3.31,1.23h0a1.65,1.65,0,0,0,.2-.37,3.67,3.67,0,0,1,4.44-2,2,2,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.62,1.62,0,0,0,260.89,592.38Z" transform="translate(-180 -86.57)" fill="#4d8af0" opacity="0.5"/><path d="M205.89,261.38a3.68,3.68,0,0,1-2-4.44,1.86,1.86,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.82,1.82,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2.05,2,2,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.62,1.62,0,0,0,.36.21,3.68,3.68,0,0,1,2.05,4.44,1.89,1.89,0,0,0-.08.4h0a1.84,1.84,0,0,0,3.31,1.23h0a1.65,1.65,0,0,0,.2-.37,3.67,3.67,0,0,1,4.44-2,2,2,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.62,1.62,0,0,0,205.89,261.38Z" transform="translate(-180 -86.57)" fill="#4d8af0" opacity="0.5"/><path d="M812.89,93.38a3.68,3.68,0,0,1-2-4.44,1.86,1.86,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.82,1.82,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,2,2,0,0,0-.41-.08h0A1.84,1.84,0,0,0,801.34,93h0a1.62,1.62,0,0,0,.36.21,3.68,3.68,0,0,1,2,4.44,1.89,1.89,0,0,0-.08.4h0A1.84,1.84,0,0,0,807,99.23h0a1.65,1.65,0,0,0,.2-.37,3.67,3.67,0,0,1,4.44-2,2,2,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.62,1.62,0,0,0,812.89,93.38Z" transform="translate(-180 -86.57)" fill="#4d8af0" opacity="0.5"/><g opacity="0.5"><rect x="110" y="257.85" width="3" height="17" fill="#47e6b1"/><rect x="290" y="344.43" width="3" height="17" transform="translate(464.43 -25.15) rotate(90)" fill="#47e6b1"/></g><g opacity="0.5"><rect x="830" y="177.85" width="3" height="17" fill="#47e6b1"/><rect x="1010" y="264.43" width="3" height="17" transform="translate(1104.43 -825.15) rotate(90)" fill="#47e6b1"/></g><g opacity="0.5"><rect x="730" y="456.85" width="3" height="17" fill="#47e6b1"/><rect x="910" y="543.43" width="3" height="17" transform="translate(1283.43 -446.15) rotate(90)" fill="#47e6b1"/></g><circle cx="723" cy="81.85" r="6" fill="#f55f44" opacity="0.5"/><circle cx="6" cy="12.85" r="6" fill="#f55f44" opacity="0.5"/><circle cx="186" cy="357.85" r="6" fill="#f55f44" opacity="0.5"/><ellipse cx="234" cy="154.43" rx="34" ry="7" opacity="0.05"/><ellipse cx="234" cy="207.43" rx="34" ry="7" opacity="0.05"/><ellipse cx="621" cy="154.43" rx="34" ry="7" opacity="0.05"/><ellipse cx="621" cy="207.43" rx="34" ry="7" opacity="0.05"/><ellipse cx="432" cy="124.43" rx="34" ry="7" opacity="0.05"/><ellipse cx="457" cy="51.43" rx="34" ry="7" opacity="0.05"/><ellipse cx="392" cy="81.43" rx="34" ry="7" opacity="0.05"/><ellipse cx="517" cy="94.43" rx="34" ry="7" opacity="0.05"/><ellipse cx="432" cy="228.43" rx="34" ry="7" opacity="0.05"/></svg>
\ No newline at end of file
diff --git a/src/assets/server.svg b/src/assets/server.svg
new file mode 100644
index 0000000..79e3c5b
--- /dev/null
+++ b/src/assets/server.svg
@@ -0,0 +1 @@
+<svg id="aa03ddf9-f8f2-4819-a4ce-be9b0a220741" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1119.60911" height="699" viewBox="0 0 1119.60911 699"><title>server down</title><circle cx="292.60911" cy="213" r="213" fill="#f2f2f2"/><path d="M31.39089,151.64237c0,77.49789,48.6181,140.20819,108.70073,140.20819" transform="translate(-31.39089 -100.5)" fill="#2f2e41"/><path d="M140.09162,291.85056c0-78.36865,54.255-141.78356,121.30372-141.78356" transform="translate(-31.39089 -100.5)" fill="#00796b"/><path d="M70.77521,158.66768c0,73.61476,31.00285,133.18288,69.31641,133.18288" transform="translate(-31.39089 -100.5)" fill="#00796b"/><path d="M140.09162,291.85056c0-100.13772,62.7103-181.16788,140.20819-181.16788" transform="translate(-31.39089 -100.5)" fill="#2f2e41"/><path d="M117.22379,292.83905s15.41555-.47479,20.06141-3.783,23.713-7.2585,24.86553-1.95278,23.16671,26.38821,5.76263,26.5286-40.43935-2.711-45.07627-5.53549S117.22379,292.83905,117.22379,292.83905Z" transform="translate(-31.39089 -100.5)" fill="#a8a8a8"/><path d="M168.224,311.78489c-17.40408.14042-40.43933-2.71094-45.07626-5.53548-3.53126-2.151-4.93843-9.86945-5.40926-13.43043-.32607.014-.51463.02-.51463.02s.97638,12.43276,5.61331,15.2573,27.67217,5.67589,45.07626,5.53547c5.02386-.04052,6.7592-1.82793,6.66391-4.47526C173.87935,310.756,171.96329,311.75474,168.224,311.78489Z" transform="translate(-31.39089 -100.5)" opacity="0.2"/><ellipse cx="198.60911" cy="424.5" rx="187" ry="25.43993" fill="#3f3d56"/><ellipse cx="198.60911" cy="424.5" rx="157" ry="21.35866" opacity="0.1"/><ellipse cx="836.60911" cy="660.5" rx="283" ry="38.5" fill="#3f3d56"/><ellipse cx="310.60911" cy="645.5" rx="170" ry="23.12721" fill="#3f3d56"/><path d="M494,726.5c90,23,263-30,282-90" transform="translate(-31.39089 -100.5)" fill="none" stroke="#2f2e41" stroke-miterlimit="10" stroke-width="2"/><path d="M341,359.5s130-36,138,80-107,149-17,172" transform="translate(-31.39089 -100.5)" fill="none" stroke="#2f2e41" stroke-miterlimit="10" stroke-width="2"/><path d="M215.40233,637.78332s39.0723-10.82,41.47675,24.04449-32.15951,44.78287-5.10946,51.69566" transform="translate(-31.39089 -100.5)" fill="none" stroke="#2f2e41" stroke-miterlimit="10" stroke-width="2"/><path d="M810.09554,663.73988,802.218,714.03505s-38.78182,20.60284-11.51335,21.20881,155.73324,0,155.73324,0,24.84461,0-14.54318-21.81478l-7.87756-52.719Z" transform="translate(-31.39089 -100.5)" fill="#2f2e41"/><path d="M785.21906,734.69812c6.193-5.51039,16.9989-11.252,16.9989-11.252l7.87756-50.2952,113.9216.10717,7.87756,49.582c9.185,5.08711,14.8749,8.987,18.20362,11.97818,5.05882-1.15422,10.58716-5.44353-18.20362-21.38921l-7.87756-52.719-113.9216,3.02983L802.218,714.03506S769.62985,731.34968,785.21906,734.69812Z" transform="translate(-31.39089 -100.5)" opacity="0.1"/><rect x="578.43291" y="212.68859" width="513.25314" height="357.51989" rx="18.04568" fill="#2f2e41"/><rect x="595.70294" y="231.77652" width="478.71308" height="267.83694" fill="#3f3d56"/><circle cx="835.05948" cy="223.29299" r="3.02983" fill="#f2f2f2"/><path d="M1123.07694,621.32226V652.6628a18.04341,18.04341,0,0,1-18.04568,18.04568H627.86949A18.04341,18.04341,0,0,1,609.8238,652.6628V621.32226Z" transform="translate(-31.39089 -100.5)" fill="#2f2e41"/><polygon points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 651.452 645.651 962.312 645.651 968.978 667.466" fill="#2f2e41"/><path d="M1125.828,762.03359c-.59383,2.539-2.83591,5.21743-7.90178,7.75032-18.179,9.08949-55.1429-2.42386-55.1429-2.42386s-28.4804-4.84773-28.4804-17.573a22.72457,22.72457,0,0,1,2.49658-1.48459c7.64294-4.04351,32.98449-14.02122,77.9177.42248a18.73921,18.73921,0,0,1,8.54106,5.59715C1125.07908,756.45353,1126.50669,759.15715,1125.828,762.03359Z" transform="translate(-31.39089 -100.5)" fill="#2f2e41"/><path d="M1125.828,762.03359c-22.251,8.526-42.0843,9.1622-62.43871-4.975-10.26507-7.12617-19.59089-8.88955-26.58979-8.75618,7.64294-4.04351,32.98449-14.02122,77.9177.42248a18.73921,18.73921,0,0,1,8.54106,5.59715C1125.07908,756.45353,1126.50669,759.15715,1125.828,762.03359Z" transform="translate(-31.39089 -100.5)" opacity="0.1"/><ellipse cx="1066.53846" cy="654.13477" rx="7.87756" ry="2.42386" fill="#f2f2f2"/><circle cx="835.05948" cy="545.66686" r="11.51335" fill="#f2f2f2"/><polygon points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 968.978 667.466" opacity="0.1"/><rect x="108.60911" y="159" width="208" height="242" fill="#2f2e41"/><rect x="87.60911" y="135" width="250" height="86" fill="#3f3d56"/><rect x="87.60911" y="237" width="250" height="86" fill="#3f3d56"/><rect x="87.60911" y="339" width="250" height="86" fill="#3f3d56"/><rect x="271.60911" y="150" width="16" height="16" fill="#00796b" opacity="0.4"/><rect x="294.60911" y="150" width="16" height="16" fill="#00796b" opacity="0.8"/><rect x="317.60911" y="150" width="16" height="16" fill="#00796b"/><rect x="271.60911" y="251" width="16" height="16" fill="#00796b" opacity="0.4"/><rect x="294.60911" y="251" width="16" height="16" fill="#00796b" opacity="0.8"/><rect x="317.60911" y="251" width="16" height="16" fill="#00796b"/><rect x="271.60911" y="352" width="16" height="16" fill="#00796b" opacity="0.4"/><rect x="294.60911" y="352" width="16" height="16" fill="#00796b" opacity="0.8"/><rect x="317.60911" y="352" width="16" height="16" fill="#00796b"/><circle cx="316.60911" cy="538" r="79" fill="#2f2e41"/><rect x="280.60911" y="600" width="24" height="43" fill="#2f2e41"/><rect x="328.60911" y="600" width="24" height="43" fill="#2f2e41"/><ellipse cx="300.60911" cy="643.5" rx="20" ry="7.5" fill="#2f2e41"/><ellipse cx="348.60911" cy="642.5" rx="20" ry="7.5" fill="#2f2e41"/><circle cx="318.60911" cy="518" r="27" fill="#fff"/><circle cx="318.60911" cy="518" r="9" fill="#3f3d56"/><path d="M271.36733,565.03228c-6.37889-28.56758,14.01185-57.43392,45.544-64.47477s62.2651,10.41,68.644,38.9776-14.51861,39.10379-46.05075,46.14464S277.74622,593.59986,271.36733,565.03228Z" transform="translate(-31.39089 -100.5)" fill="#00796b"/><ellipse cx="417.21511" cy="611.34365" rx="39.5" ry="12.40027" transform="translate(-238.28665 112.98044) rotate(-23.17116)" fill="#2f2e41"/><ellipse cx="269.21511" cy="664.34365" rx="39.5" ry="12.40027" transform="translate(-271.07969 59.02084) rotate(-23.17116)" fill="#2f2e41"/><path d="M394,661.5c0,7.732-19.90861,23-42,23s-43-14.268-43-22,20.90861-6,43-6S394,653.768,394,661.5Z" transform="translate(-31.39089 -100.5)" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/src/components/EmptyState/EmptyState.tsx b/src/components/EmptyState/EmptyState.tsx
index f79a391..7167ba2 100644
--- a/src/components/EmptyState/EmptyState.tsx
+++ b/src/components/EmptyState/EmptyState.tsx
@@ -1,14 +1,18 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 
+import Image from '../Image/Image';
 import Message from '../Message/Message';
 import noContentIcon from '../../assets/noContent.svg';
 import constructionIcon from '../../assets/construction.svg';
+import serverIcon from '../../assets/server.svg';
+import errorIcon from '../../assets/error.svg';
 
 
 interface PropTypes {
-  variant?: 'default' | 'construction';
+  variant?: 'default' | 'construction' | 'waiting' | 'error';
   message?: string;
+  smart?: boolean;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -25,16 +29,26 @@ const CONTEXT = {
   construction: {
     icon: constructionIcon,
     tagline: 'Coming soon'
+  },
+  waiting: {
+    icon: serverIcon,
+    tagline: 'Waiting for server'
+  },
+  error: {
+    icon: errorIcon,
+    tagline: 'Something went wrong'
   }
 };
 
-const EmptyState: React.FC<PropTypes> = ({ variant = 'default', message }) => {
+const EmptyState: React.FC<PropTypes> = ({ variant = 'default', smart = false, message }) => {
   const classes = useStyles();
   const { icon, tagline } = CONTEXT[variant];
 
+  const Component = smart ? Image : 'img';
+
   return (
     <Message tagline={tagline} message={message}>
-      <img src={icon} className={classes.img} alt="No content" />
+      <Component src={icon} className={classes.img} alt="No content" />
     </Message>
   );
 };
diff --git a/src/containers/Page/DynoWaiter.tsx b/src/containers/Page/DynoWaiter.tsx
index 05d269f..92255da 100644
--- a/src/containers/Page/DynoWaiter.tsx
+++ b/src/containers/Page/DynoWaiter.tsx
@@ -7,9 +7,7 @@ import React, {
 import { makeStyles } from '@material-ui/core/styles';
 import { get } from '../../requests';
 import Loading from '../../components/Loading/Loading';
-import Image from '../../components/Image/Image';
-import Message from '../../components/Message/Message';
-import coffeIcon from '../../assets/coffeeBreak.svg';
+import EmptyState from '../../components/EmptyState/EmptyState';
 
 const DYNO_WAKEUP_TIME = 30;
 
@@ -67,8 +65,8 @@ const DynoWaiter: React.FC = ({ children }) => {
     <>
       {!isReady && (
         <>
-          <Loading message={message} tagline={message && 'Waiting for the server'} />
-          {message && <Message><Image src={coffeIcon} className={classes.img} /></Message>}
+          <Loading />
+          {message && <EmptyState variant="waiting" smart message={message} />}
         </>
       )}
       <div className={isReady ? '' : classes.hidden}>
diff --git a/src/containers/Page/Page.tsx b/src/containers/Page/Page.tsx
index 475f76d..a1d6456 100644
--- a/src/containers/Page/Page.tsx
+++ b/src/containers/Page/Page.tsx
@@ -2,11 +2,13 @@ import React, { Suspense, useEffect } from 'react';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { useMediaQuery } from '@material-ui/core';
 import { SnackbarProvider } from 'notistack';
+import { ErrorBoundary } from 'react-error-boundary';
 import { useHistory } from 'react-router-dom';
 
 import Router from './Router';
 import DynoWaiter from './DynoWaiter';
 import Loading from '../../components/Loading/Loading';
+import EmptyState from '../../components/EmptyState/EmptyState';
 
 
 const useStyles = makeStyles(theme => ({
@@ -33,22 +35,26 @@ const Page: React.FC = () => {
   }, [history]);
 
   return (
-    <SnackbarProvider
-      preventDuplicate
-      maxSnack={isMobile ? 1 : 3}
-      anchorOrigin={{
-        vertical: 'top',
-        horizontal: 'right'
-      }}
+    <ErrorBoundary
+      FallbackComponent={() => <EmptyState variant="error" message="Try reloading the page." />}
     >
-      <div className={classes.root}>
-        <Suspense fallback={<Loading />}>
-          <DynoWaiter>
-            <Router />
-          </DynoWaiter>
-        </Suspense>
-      </div>
-    </SnackbarProvider>
+      <SnackbarProvider
+        preventDuplicate
+        maxSnack={isMobile ? 1 : 3}
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'right'
+        }}
+      >
+        <div className={classes.root}>
+          <Suspense fallback={<Loading />}>
+            <DynoWaiter>
+              <Router />
+            </DynoWaiter>
+          </Suspense>
+        </div>
+      </SnackbarProvider>
+    </ErrorBoundary>
   );
 };