Fix server errors (#7931)

* Fix server errors
airbytehq · Nov 12, 2021 · fbf08b6 · fbf08b6
1 parent 2744c82
commit fbf08b6
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 42 deletions.
diff --git a/airbyte-e2e-testing/cypress.json b/airbyte-e2e-testing/cypress.json
@@ -1,6 +1,7 @@
 {
   "baseUrl": "http://localhost:3000",
   "testFiles": [
+    "base.spec.js",
     "onboarding.spec.js",
     "connection.spec.js",
     "destination.spec.js",

diff --git a/airbyte-e2e-testing/cypress/integration/base.spec.js b/airbyte-e2e-testing/cypress/integration/base.spec.js
@@ -0,0 +1,30 @@
+describe("Error handling view", () => {
+  it("Shows Version Mismatch page", () => {
+    cy.intercept("/api/v1/**", {
+      statusCode: 500,
+      body: {
+        error:
+          "Version mismatch between 0.0.1-ci and 0.0.2-ci.\nPlease upgrade or reset your Airbyte Database, see more at https://docs.airbyte.io/operator-guides/upgrading-airbyte",
+      },
+    });
+
+    cy.visit("/");
+
+    cy.get("div")
+      .contains("Version mismatch between 0.0.1-ci and 0.0.2-ci.")
+      .should("exist");
+  });
+
+  it("Shows Server Unavailable page", () => {
+    cy.intercept("/api/v1/**", {
+      statusCode: 502,
+      body: "Failed to fetch",
+    });
+
+    cy.visit("/");
+
+    cy.get("div")
+      .contains("Cannot reach server. The server may still be starting up.")
+      .should("exist");
+  });
+});
diff --git a/airbyte-webapp/src/App.tsx b/airbyte-webapp/src/App.tsx
@@ -80,12 +80,7 @@ const services = {
 
 const AppServices: React.FC = ({ children }) => (
   <ServicesProvider inject={services}>
-    <ConfigServiceProvider
-      defaultConfig={defaultConfig}
-      providers={configProviders}
-    >
-      <ServiceOverrides>{children}</ServiceOverrides>
-    </ConfigServiceProvider>
+    <ServiceOverrides>{children}</ServiceOverrides>
   </ServicesProvider>
 );
 
@@ -101,19 +96,24 @@ const App: React.FC = () => {
         <I18NProvider>
           <StoreProvider>
             <Suspense fallback={<LoadingPage />}>
-              <ApiErrorBoundary>
-                <FeatureService features={Features}>
-                  <NotificationService>
-                    <AppServices>
-                      <AnalyticsInitializer>
-                        <OnboardingServiceProvider>
-                          <Routing />
-                        </OnboardingServiceProvider>
-                      </AnalyticsInitializer>
-                    </AppServices>
-                  </NotificationService>
-                </FeatureService>
-              </ApiErrorBoundary>
+              <ConfigServiceProvider
+                defaultConfig={defaultConfig}
+                providers={configProviders}
+              >
+                <ApiErrorBoundary>
+                  <FeatureService features={Features}>
+                    <NotificationService>
+                      <AppServices>
+                        <AnalyticsInitializer>
+                          <OnboardingServiceProvider>
+                            <Routing />
+                          </OnboardingServiceProvider>
+                        </AnalyticsInitializer>
+                      </AppServices>
+                    </NotificationService>
+                  </FeatureService>
+                </ApiErrorBoundary>
+              </ConfigServiceProvider>
             </Suspense>
           </StoreProvider>
         </I18NProvider>

diff --git a/airbyte-webapp/src/config/ConfigServiceProvider.tsx b/airbyte-webapp/src/config/ConfigServiceProvider.tsx
@@ -15,7 +15,7 @@ const configContext = React.createContext<ConfigContext | null>(null);
 export function useConfig<T extends Config>(): T {
   const configService = useContext(configContext);
 
-  if (!configService) {
+  if (configService === null) {
     throw new Error("useConfig must be used within a ConfigProvider");
   }
 

diff --git a/airbyte-webapp/src/config/defaultConfig.ts b/airbyte-webapp/src/config/defaultConfig.ts
@@ -5,7 +5,7 @@ const defaultConfig: Config = {
   ui: uiConfig,
   segment: { enabled: true, token: "" },
   healthCheckInterval: 10000,
-  version: "",
+  version: "dev",
   apiUrl: `${window.location.protocol}//${window.location.hostname}:8001/api/v1/`,
   integrationUrl: "/docs",
   oauthRedirectUrl: `${window.location.protocol}//${window.location.host}`,

diff --git a/airbyte-webapp/src/packages/cloud/App.tsx b/airbyte-webapp/src/packages/cloud/App.tsx
@@ -18,6 +18,7 @@ import { Feature, FeatureItem, FeatureService } from "hooks/services/Feature";
 import { AuthenticationProvider } from "packages/cloud/services/auth/AuthService";
 import { AppServicesProvider } from "./services/AppServicesProvider";
 import { IntercomProvider } from "./services/IntercomProvider";
+import { ConfigProvider } from "./services/ConfigProvider";
 
 const messages = Object.assign({}, en, cloudLocales);
 
@@ -55,21 +56,23 @@ const App: React.FC = () => {
         <I18NProvider>
           <StoreProvider>
             <Suspense fallback={<LoadingPage />}>
-              <ApiErrorBoundary>
-                <NotificationServiceProvider>
-                  <FeatureService features={Features}>
-                    <AppServicesProvider>
-                      <AuthenticationProvider>
-                        <IntercomProvider>
-                          <AnalyticsInitializer>
-                            <Routing />
-                          </AnalyticsInitializer>
-                        </IntercomProvider>
-                      </AuthenticationProvider>
-                    </AppServicesProvider>
-                  </FeatureService>
-                </NotificationServiceProvider>
-              </ApiErrorBoundary>
+              <ConfigProvider>
+                <ApiErrorBoundary>
+                  <NotificationServiceProvider>
+                    <FeatureService features={Features}>
+                      <AppServicesProvider>
+                        <AuthenticationProvider>
+                          <IntercomProvider>
+                            <AnalyticsInitializer>
+                              <Routing />
+                            </AnalyticsInitializer>
+                          </IntercomProvider>
+                        </AuthenticationProvider>
+                      </AppServicesProvider>
+                    </FeatureService>
+                  </NotificationServiceProvider>
+                </ApiErrorBoundary>
+              </ConfigProvider>
             </Suspense>
           </StoreProvider>
         </I18NProvider>

diff --git a/airbyte-webapp/src/packages/cloud/services/AppServicesProvider.tsx b/airbyte-webapp/src/packages/cloud/services/AppServicesProvider.tsx
@@ -9,7 +9,6 @@ import {
   useInjectServices,
 } from "core/servicesProvider";
 import { useApiServices } from "core/defaultServices";
-import { ConfigProvider } from "./ConfigProvider";
 import { FirebaseSdkProvider } from "./FirebaseSdkProvider";
 
 import { useWorkspaceService } from "./workspaces/WorkspacesService";
@@ -50,11 +49,9 @@ const AppServicesProvider: React.FC = ({ children }) => {
   );
   return (
     <ServicesProvider inject={services}>
-      <ConfigProvider>
-        <FirebaseSdkProvider>
-          <ServiceOverrides>{children}</ServiceOverrides>
-        </FirebaseSdkProvider>
-      </ConfigProvider>
+      <FirebaseSdkProvider>
+        <ServiceOverrides>{children}</ServiceOverrides>
+      </FirebaseSdkProvider>
     </ServicesProvider>
   );
 };