fix:handle non-existing feature toggle

frontend/src/component/App.tsx

@@ -75,8 +75,22 @@ const App = ({ location, user, fetchUiBootstrap, feedback }: IAppProps) => {
     };
 
     return (
-        <SWRConfig value={{
-            onError: (error) => {
+        <SWRConfig
+            value={{
+                onErrorRetry: (
+                    error,
+                    _key,
+                    _config,
+                    revalidate,
+                    { retryCount }
+                ) => {
+                    // Never retry on 404.
+                    if (error.status === 404) {
+                        return error;
+                    }
+                    setTimeout(() => revalidate({ retryCount }), 5000);
+                },
+                onError: error => {
                     if (!isUnauthorized()) {
                         setToastData({
                             show: true,
@@ -85,7 +99,8 @@ const App = ({ location, user, fetchUiBootstrap, feedback }: IAppProps) => {
                         });
                     }
                 },
-        }}>
+            }}
+        >
             <div className={styles.container}>
                 <LayoutPicker location={location}>
                     <Switch>

frontend/src/component/feature/FeatureView2/FeatureView2.tsx

@@ -18,10 +18,12 @@ import FeatureVariants from './FeatureVariants/FeatureVariants';
 import { useStyles } from './FeatureView2.styles';
 import FeatureSettings from './FeatureSettings/FeatureSettings';
 import useLoading from '../../../hooks/useLoading';
+import ConditionallyRender from '../../common/ConditionallyRender';
+import { getCreateTogglePath } from '../../../utils/route-path-helpers';
 
 const FeatureView2 = () => {
     const { projectId, featureId } = useParams<IFeatureViewParams>();
-    const { feature, loading } = useFeature(projectId, featureId);
+    const { feature, loading, error } = useFeature(projectId, featureId);
     const { a11yProps } = useTabs(0);
     const { archiveFeatureToggle } = useFeatureApi();
     const { toast, setToastData } = useToast();
@@ -97,11 +99,30 @@ const FeatureView2 = () => {
         });
     };
 
+    const renderFeatureNotExist = () => {
         return (
+            <div>
+                <p>
+                    The feature <strong>{featureId} </strong>does not exist. Do
+                    you want to &nbsp;
+                    <Link to={getCreateTogglePath(projectId)}>create it</Link>
+                    &nbsp;?
+                </p>
+            </div>
+        );
+    };
+
+    return (
+        <ConditionallyRender
+            condition={error === undefined}
+            show={
                 <div ref={ref}>
                     <div className={styles.header}>
                         <div className={styles.innerContainer}>
-                    <h2 className={styles.featureViewHeader} data-loading>
+                            <h2
+                                className={styles.featureViewHeader}
+                                data-loading
+                            >
                                 {feature.name}
                             </h2>
                             <div className={styles.actions}>
@@ -173,6 +194,9 @@ const FeatureView2 = () => {
                     </Dialogue>
                     {toast}
                 </div>
+            }
+            elseShow={renderFeatureNotExist()}
+        />
     );
 };