Add a error page when ui is crashed

frontend/src/App/index.tsx

@@ -18,8 +18,8 @@ import Socketio from "../@socketio";
 import { LoadingIndicator, ModalProvider } from "../components";
 import Sidebar from "../Sidebar";
 import Auth from "../special-pages/AuthPage";
+import ErrorBoundary from "../special-pages/ErrorBoundary";
 import LaunchError from "../special-pages/LaunchError";
-import UIError from "../special-pages/UIError";
 import { useBaseUrl, useHasUpdateInject } from "../utilites";
 import Header from "./Header";
 import Router from "./Router";
@@ -62,8 +62,8 @@ const App: FunctionComponent<Props> = () => {
   } else if (typeof initialized === "string") {
     return <LaunchError>{initialized}</LaunchError>;
   }
-  try {
-    return (
+  return (
+    <ErrorBoundary>
       <SidebarToggleContext.Provider value={toggleSidebar}>
         <Row noGutters className="header-container">
           <Header></Header>
@@ -75,10 +75,8 @@ const App: FunctionComponent<Props> = () => {
           </ModalProvider>
         </Row>
       </SidebarToggleContext.Provider>
-    );
-  } catch (e) {
-    return <UIError error={e}></UIError>;
-  }
+    </ErrorBoundary>
+  );
 };
 
 const MainRouter: FunctionComponent = () => {

frontend/src/Movies/Detail/table.tsx

@@ -104,7 +104,7 @@ const Table: FunctionComponent<Props> = ({ movie, profile }) => {
   const data: Subtitle[] = useMemo(() => {
     const missing = movie.missing_subtitles.map((item) => ({
       ...item,
-      path: missingText
+      path: missingText,
     }));
 
     let raw_subtitles = movie.subtitles;

frontend/src/components/modals/SeriesUploadModal.tsx

@@ -173,7 +173,7 @@ const SeriesUploadModal: FunctionComponent<SerieProps & BaseModalProps> = ({
   );
 
   const uploadSubtitles = useCallback(async () => {
-    if (series === null) {
+    if (series === null || language === null) {
       return;
     }
 
@@ -189,7 +189,7 @@ const SeriesUploadModal: FunctionComponent<SerieProps & BaseModalProps> = ({
     let exception = false;
 
     for (const info of pending) {
-      if (info.instance && language) {
+      if (info.instance) {
         const { sonarrEpisodeId: episodeid } = info.instance;
         const { file } = info;
         const { code2, hi, forced } = language;

frontend/src/special-pages/ErrorBoundary.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import UIError from "./UIError";
+
+interface State {
+  error: Error | null;
+}
+
+class ErrorBoundary extends React.Component<{}, State> {
+  constructor(props: {}) {
+    super(props);
+    this.state = { error: null };
+  }
+
+  componentDidCatch(error: Error) {
+    this.setState({ error });
+  }
+
+  render() {
+    const { children } = this.props;
+    const { error } = this.state;
+    if (error) {
+      return <UIError error={error}></UIError>;
+    }
+
+    return children;
+  }
+}
+
+export default ErrorBoundary;

frontend/src/special-pages/UIError.tsx

@@ -1,4 +1,4 @@
-import { faSadCry as fasSadCry } from "@fortawesome/free-regular-svg-icons";
+import { faDizzy } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { FunctionComponent } from "react";
 import { Button, Container } from "react-bootstrap";
@@ -12,8 +12,8 @@ interface Props {
 const UIError: FunctionComponent<Props> = ({ error }) => (
   <Container className="d-flex flex-column align-items-center my-5">
     <h1>
-      <FontAwesomeIcon className="mr-2" icon={fasSadCry}></FontAwesomeIcon>
-      Ouch! UI is crashed!
+      <FontAwesomeIcon className="mr-2" icon={faDizzy}></FontAwesomeIcon>
+      Oops! UI is crashed!
     </h1>
     <p>{error.message}</p>
     <div className="d-flex flex-row">