✨ [Feature reactplay#498]: Add Error Boundaries (reactplay#514)

* ✨ [Feature reactplay#498]: Add Error Boundaries

* Minor change

* Correct formatting

* Addressing review comments

Co-authored-by: Tapas Adhikary <[email protected]>

package.json

@@ -29,6 +29,7 @@
  "react": "^18.0.0",
  "react-codemirror2": "^7.2.1",
  "react-dom": "^18.0.0",
+ "react-error-boundary": "^3.1.4",
  "react-helmet": "^6.1.0",
  "react-hot-toast": "^2.3.0",
  "react-icons": "^4.3.1",

src/ErrorBoundary/ErrorBoundary.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import ErrorFallback from "./ErrorFallback";
+
+const ErrorBoundry = ({ children }) => {
+ const onErrorReset = () => {
+ /**
+ * Had to do this because we have placed the ErrorBoundary at the top level
+ * and we can't use the react-router hooks outside of the Router
+ */
+ window.location.href = "/";
+ };
+
+ return (
+ <ErrorBoundary FallbackComponent={ErrorFallback} onReset={onErrorReset}>
+ {children}
+ </ErrorBoundary>
+ );
+};
+
+export default ErrorBoundry;

src/ErrorBoundary/ErrorFallback.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+import { ReactComponent as ImageOops } from "images/img-oops.svg";
+import { Button, Typography } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+
+const useStyle = makeStyles({
+ Typography: {
+ margin: "8px 0px",
+ fontWeight: 600,
+ },
+ Button: {
+ background: "#00f2fe",
+ color: "#ffffff",
+ "&:hover": {
+ background: "#00f2fe",
+ color: "#ffffff",
+ },
+ },
+});
+
+const ErrorFallback = ({ error, resetErrorBoundary }) => {
+ const classes = useStyle();
+
+ return (
+ <div className="error-boundary-fallback">
+ <ImageOops className="error-boundary-image" />
+ <Typography className={classes.Typography}>
+ Something went wrong!
+ </Typography>
+ <Typography className={classes.Typography}>{error.message}</Typography>
+ <Button
+ className={classes.Button}
+ variant="contained"
+ onClick={resetErrorBoundary}
+ >
+ Go back
+ </Button>
+ </div>
+ );
+};
+
+export default ErrorFallback;

src/common/playlists/playlist.css

@@ -697,7 +697,8 @@
  color: var(--color-neutral-80);
 }
 /* Play not found */
-.play-not-found {
+.play-not-found,
+.error-boundary-fallback {
  min-height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
@@ -706,13 +707,15 @@
  padding: 0 1rem;
 }
 
-.play-not-found .play-not-found-image {
+.play-not-found .play-not-found-image,
+.error-boundary-fallback .error-boundary-image {
  max-width: 100%;
  height: auto;
 }
 
 @media screen and (max-width: 768px) {
- .play-not-found .play-not-found-image {
+ .play-not-found .play-not-found-image,
+ .error-boundary-fallback .error-boundary-image {
  max-width: 50%;
  margin-bottom: 2rem;
  }

src/index.js

@@ -5,6 +5,7 @@ import React, { useState } from "react";
 import { createRoot } from "react-dom/client";
 import reportWebVitals from "reportWebVitals";
 import register from "./registerServiceWorker";
+import ErrorBoundry from "./ErrorBoundary/ErrorBoundary";
 
 /** removing console statement in react prod build */
 if (process.env.NODE_ENV !== "development") {
@@ -34,9 +35,11 @@ const Index = () => {
  };
  return (
  <React.StrictMode>
- <SearchContext.Provider value={value}>
- <RouteDefs />
- </SearchContext.Provider>
+ <ErrorBoundry>
+ <SearchContext.Provider value={value}>
+ <RouteDefs />
+ </SearchContext.Provider>
+ </ErrorBoundry>
  </React.StrictMode>
  );
 };