fix: allow access to dashboard for FoF when sdk init error 🔴 blocked by SDK

frontend/common/stores/base/_store.js

@@ -32,9 +32,9 @@ module.exports = Object.assign({}, EventEmitter.prototype, {
 
   isSaving: false,
 
-  loaded() {
+  loaded(persistError = false) {
     this.hasLoaded = true
-    this.error = null
+    this.error = persistError ? this.error : null
     this.isLoading = false
     this.trigger(DEFAULT_LOADED_EVENT)
     this.trigger(DEFAULT_CHANGE_EVENT)

frontend/common/stores/config-store.js

@@ -21,7 +21,14 @@ const controller = {
     store.model = flagsmith.getAllFlags()
   },
   onError() {
-    store.error = true
+    if (Project.isFlagsmithOnFlagsmith) {
+      store.model = {}
+      // TODO: Migrate to TS and use enum
+      store.error = 'fof_init_error'
+      store.loaded(true)
+      return
+    }
+    store.error = 'unknown'
     store.goneABitWest()
   },
 }

frontend/common/utils/utils.tsx

@@ -206,7 +206,8 @@ const Utils = Object.assign({}, require('./base/_utils'), {
    *  only add behaviour to Flagsmith-on-Flagsmith flags that have been explicitly created by customers.
    */
   flagsmithFeatureExists(flag: string) {
-    return Object.prototype.hasOwnProperty.call(flagsmith.getAllFlags(), flag)
+    const allFlags = flagsmith?.getAllFlags()
+    return allFlags && Object.prototype.hasOwnProperty.call(allFlags, flag)
   },
   getContentType(contentTypes: ContentType[], model: string, type: string) {
     return contentTypes.find((c: ContentType) => c[model] === type) || null

frontend/global.d.ts

@@ -38,6 +38,7 @@ declare global {
     theme?: string,
     expiry?: number,
     action?: { buttonText: string; onClick: () => void },
+    position?: 'top' | 'bottom',
   ) => void
   const Flex: typeof Component
   const isMobile: boolean

frontend/web/components/App.js

@@ -16,14 +16,17 @@ import { Provider } from 'react-redux'
 import { getStore } from 'common/store'
 import { resolveAuthFlow } from '@datadog/ui-extensions-sdk'
 import ConfigProvider from 'common/providers/ConfigProvider'
-import Button from './base/forms/Button'
 import Icon from './Icon'
 import AccountStore from 'common/stores/account-store'
 import OrganisationLimit from './OrganisationLimit'
 import GithubStar from './GithubStar'
-import Tooltip from './Tooltip'
 import classNames from 'classnames'
 import { apps, gitBranch, gitCompare, statsChart } from 'ionicons/icons'
+import {
+  getStartupErrorText,
+  isFlagsmithOnFlagsmithError,
+  isMaintenanceError,
+} from './base/errors/init.error'
 import NavSubLink from './navigation/NavSubLink'
 import SettingsIcon from './svg/SettingsIcon'
 import UsersIcon from './svg/UsersIcon'
@@ -304,9 +307,24 @@ const App = class extends Component {
     ) {
       return <Blocked />
     }
-    if (Project.maintenance || this.props.error || !window.projectOverrides) {
+    const maintenanceMode =
+      Utils.getFlagsmithHasFeature('maintenance_mode') || Project.maintenance
+    const isUnknownError =
+      this.props.error && !isFlagsmithOnFlagsmithError(this.props.error)
+    if (maintenanceMode || !window.projectOverrides || isUnknownError) {
       return <Maintenance />
     }
+
+    if (this.props.error && isFlagsmithOnFlagsmithError(this.props.error)) {
+      toast(
+        getStartupErrorText(this.props.error),
+        'danger',
+        2 * 60 * 1000,
+        undefined,
+        'top',
+      )
+    }
+
     const activeProject = OrganisationStore.getProject(projectId)
     const projectNotLoaded =
       !activeProject && document.location.href.includes('project/')
@@ -326,20 +344,20 @@ const App = class extends Component {
         </AccountProvider>
       )
     }
+
     if (AccountStore.forced2Factor()) {
       return <AccountSettingsPage isLoginPage={true} />
     }
+
     if (document.location.pathname.includes('widget')) {
       return <div>{this.props.children}</div>
     }
     const isOrganisationSelect = document.location.pathname === '/organisations'
     const integrations = Object.keys(Utils.getIntegrationData())
-    const environmentMetricsEnabled = Utils.getFlagsmithHasFeature(
-      'environment_metrics',
-    )
     const projectMetricsTooltipEnabled = Utils.getFlagsmithHasFeature(
       'project_metrics_tooltip',
     )
+
     return (
       <Provider store={getStore()}>
         <AccountProvider

frontend/web/components/Maintenance.js → frontend/web/components/Maintenance.tsx

@@ -1,34 +1,21 @@
 import React from 'react'
 import ConfigProvider from 'common/providers/ConfigProvider'
 
-const HomePage = class extends React.Component {
-  static displayName = 'HomePage'
-
-  constructor(props, context) {
-    super(props, context)
-    this.state = {}
-  }
-
-  render = () => (
+const MaintenancePage: React.FC = () => {
+  return (
     <div className='fullscreen-container maintenance justify-content-center'>
       <div className='col-md-6 mt-5' id='sign-up'>
         <h1>Maintenance</h1>
         We are currently undergoing some scheduled maintenance of the admin
         site, this will not affect your application's feature flags.
-        {
-          <>
-            {' '}
-            Check{' '}
-            <a
-              target='_blank'
-              href='https://x.com/getflagsmith'
-              rel='noreferrer'
-            >
-              @getflagsmith
-            </a>{' '}
-            for updates.
-          </>
-        }
+        <>
+          {' '}
+          Check{' '}
+          <a target='_blank' href='https://x.com/getflagsmith' rel='noreferrer'>
+            @getflagsmith
+          </a>{' '}
+          for updates.
+        </>
         <br />
         <p className='small'>
           Sorry for the inconvenience, we will be back up and running shortly.
@@ -38,4 +25,6 @@ const HomePage = class extends React.Component {
   )
 }
 
-module.exports = ConfigProvider(HomePage)
+MaintenancePage.displayName = 'MaintenancePage'
+
+export default ConfigProvider(MaintenancePage)

frontend/web/components/base/errors/init.error.ts

@@ -0,0 +1,25 @@
+export enum FlagsmithStartupErrors {
+  FOF_INIT_ERROR = 'fof_init_error',
+  UNKNOWN_ERROR = 'unknown_error',
+  MAINTENANCE_MODE = 'maintenance_mode',
+}
+
+const errorLabels: Record<FlagsmithStartupErrors, string> = {
+  [FlagsmithStartupErrors.FOF_INIT_ERROR]:
+    'Flagsmith on Flagsmith initialisation error. Please check your configuration',
+  [FlagsmithStartupErrors.MAINTENANCE_MODE]: 'Maintenance mode',
+  [FlagsmithStartupErrors.UNKNOWN_ERROR]:
+    'Unexpected error. If it persists, please contact support',
+}
+
+export const getStartupErrorText = (error: FlagsmithStartupErrors) => {
+  return errorLabels[error] || errorLabels[FlagsmithStartupErrors.UNKNOWN_ERROR]
+}
+
+export const isMaintenanceError = (error: FlagsmithStartupErrors) => {
+  return error === FlagsmithStartupErrors.MAINTENANCE_MODE
+}
+
+export const isFlagsmithOnFlagsmithError = (error: FlagsmithStartupErrors) => {
+  return error === FlagsmithStartupErrors.FOF_INIT_ERROR
+}