add a rudimentary console.error to catch misnamed flags

studio/hooks/ui/useFlag.ts

@@ -3,5 +3,14 @@ import FlagContext from 'components/ui/Flag/FlagContext'
 
 export function useFlag(name: string) {
   const store: any = useContext(FlagContext)
+
+  const isObjectEmpty = (objectName: Object) => {
+    return Object.keys(objectName).length === 0
+  }
+
+  if (!isObjectEmpty(store) && store[name] === undefined) {
+    console.error(`Flag key "${name}" does not exist in flagStore`)
+    return false
+  }
   return store[name]
 }

studio/pages/new/[slug].tsx

@@ -380,34 +380,33 @@ const Wizard: NextPageWithLayout = () => {
                   </Panel.Content>
                 )}
 
-                {showNonProdFields &&
-                  cloudProviderEnabled(
-                    <Panel.Content
-                      className={[
-                        'border-b',
-                        'border-panel-border-interior-light dark:border-panel-border-interior-dark',
-                      ].join(' ')}
+                {cloudProviderEnabled && showNonProdFields && (
+                  <Panel.Content
+                    className={[
+                      'border-b',
+                      'border-panel-border-interior-light dark:border-panel-border-interior-dark',
+                    ].join(' ')}
+                  >
+                    <Listbox
+                      layout="horizontal"
+                      label="Cloud Provider"
+                      type="select"
+                      value={cloudProvider}
+                      onChange={(value) => onCloudProviderChange(value)}
+                      descriptionText="Cloud Provider (only for staging/local)"
                     >
-                      <Listbox
-                        layout="horizontal"
-                        label="Cloud Provider"
-                        type="select"
-                        value={cloudProvider}
-                        onChange={(value) => onCloudProviderChange(value)}
-                        descriptionText="Cloud Provider (only for staging/local)"
-                      >
-                        {Object.values(PROVIDERS).map((providerObj) => {
-                          const label = providerObj['name']
-                          const value = providerObj['id']
-                          return (
-                            <Listbox.Option key={value} label={label} value={value}>
-                              <span className="text-scale-1200">{label}</span>
-                            </Listbox.Option>
-                          )
-                        })}
-                      </Listbox>
-                    </Panel.Content>
-                  )}
+                      {Object.values(PROVIDERS).map((providerObj) => {
+                        const label = providerObj['name']
+                        const value = providerObj['id']
+                        return (
+                          <Listbox.Option key={value} label={label} value={value}>
+                            <span className="text-scale-1200">{label}</span>
+                          </Listbox.Option>
+                        )
+                      })}
+                    </Listbox>
+                  </Panel.Content>
+                )}
 
                 <Panel.Content className="border-b border-panel-border-interior-light dark:border-panel-border-interior-dark">
                   <Input