diff --git a/services/api/src/resources/deployment/resolvers.js b/services/api/src/resources/deployment/resolvers.js
index 612d91e2da..93caef5a03 100644
--- a/services/api/src/resources/deployment/resolvers.js
+++ b/services/api/src/resources/deployment/resolvers.js
@@ -3,10 +3,16 @@
 const R = require('ramda');
 const getFieldNames = require('graphql-list-fields');
 const { sendToLagoonLogs } = require('@lagoon/commons/src/logs');
-const { createDeployTask, createPromoteTask } = require('@lagoon/commons/src/tasks');
+const {
+  createDeployTask,
+  createPromoteTask,
+} = require('@lagoon/commons/src/tasks');
 const esClient = require('../../clients/esClient');
 const sqlClient = require('../../clients/sqlClient');
-const { pubSub, createEnvironmentFilteredSubscriber } = require('../../clients/pubSub');
+const {
+  pubSub,
+  createEnvironmentFilteredSubscriber,
+} = require('../../clients/pubSub');
 const {
   knex,
   ifNotAdmin,
@@ -46,32 +52,39 @@ const injectBuildLog = async deployment => {
     };
   }
 
-  const result = await esClient.search({
-    index: 'lagoon-logs-*',
-    sort: '@timestamp:desc',
-    body: {
-      query: {
-        bool: {
-          must: [
-            { match_phrase: { 'meta.remoteId': deployment.remoteId } },
-            { match_phrase: { 'meta.buildPhase': deployment.status } },
-          ],
+  try {
+    const result = await esClient.search({
+      index: 'lagoon-logs-*',
+      sort: '@timestamp:desc',
+      body: {
+        query: {
+          bool: {
+            must: [
+              { match_phrase: { 'meta.remoteId': deployment.remoteId } },
+              { match_phrase: { 'meta.buildPhase': deployment.status } },
+            ],
+          },
         },
       },
-    },
-  });
+    });
+
+    if (!result.hits.total) {
+      return {
+        ...deployment,
+        buildLog: null,
+      };
+    }
 
-  if (!result.hits.total) {
     return {
       ...deployment,
-      buildLog: null,
+      buildLog: R.path(['hits', 'hits', 0, '_source', 'message'], result),
+    };
+  } catch (e) {
+    return {
+      ...deployment,
+      buildLog: `There was an error loading the logs: ${e.message}`,
     };
   }
-
-  return {
-    ...deployment,
-    buildLog: R.path(['hits', 'hits', 0, '_source', 'message'], result),
-  };
 };
 
 const getDeploymentsByEnvironmentId = async (
@@ -105,22 +118,24 @@ const getDeploymentsByEnvironmentId = async (
 
   const requestedFields = getFieldNames(info);
 
-  return newestFirst.filter(row => {
-    if (R.isNil(name) || R.isEmpty(name)) {
-      return true;
-    }
-
-    return row.name === name;
-  }).map(row => {
-    if (R.contains('buildLog', requestedFields)) {
-      return injectBuildLog(row);
-    }
-
-    return {
-      ...row,
-      buildLog: null,
-    };
-  });
+  return newestFirst
+    .filter(row => {
+      if (R.isNil(name) || R.isEmpty(name)) {
+        return true;
+      }
+
+      return row.name === name;
+    })
+    .map(row => {
+      if (R.contains('buildLog', requestedFields)) {
+        return injectBuildLog(row);
+      }
+
+      return {
+        ...row,
+        buildLog: null,
+      };
+    });
 };
 
 const getDeploymentByRemoteId = async (
@@ -331,11 +346,7 @@ const updateDeployment = async (
 
 const deployEnvironmentLatest = async (
   root,
-  {
-    input: {
-      environment: environmentInput,
-    },
-  },
+  { input: { environment: environmentInput } },
   {
     credentials: {
       role,
@@ -343,8 +354,13 @@ const deployEnvironmentLatest = async (
     },
   },
 ) => {
-  const environments = await environmentHelpers.getEnvironmentsByEnvironmentInput(environmentInput);
-  const activeEnvironments = R.filter(R.propEq('deleted', '0000-00-00 00:00:00'), environments);
+  const environments = await environmentHelpers.getEnvironmentsByEnvironmentInput(
+    environmentInput,
+  );
+  const activeEnvironments = R.filter(
+    R.propEq('deleted', '0000-00-00 00:00:00'),
+    environments,
+  );
 
   if (activeEnvironments.length < 1 || activeEnvironments.length > 1) {
     throw new Error('Unauthorized');
@@ -367,13 +383,22 @@ const deployEnvironmentLatest = async (
     }
   }
 
-  if (environment.deployType === 'branch' || environment.deployType === 'promote') {
+  if (
+    environment.deployType === 'branch' ||
+    environment.deployType === 'promote'
+  ) {
     if (!environment.deployBaseRef) {
       throw new Error('Cannot deploy: deployBaseRef is empty');
     }
   } else if (environment.deployType === 'pullrequest') {
-    if (!environment.deployBaseRef && !environment.deployHeadRef && !environment.deployTitle) {
-      throw new Error('Cannot deploy: deployBaseRef, deployHeadRef or deployTitle is empty');
+    if (
+      !environment.deployBaseRef &&
+      !environment.deployHeadRef &&
+      !environment.deployTitle
+    ) {
+      throw new Error(
+        'Cannot deploy: deployBaseRef, deployHeadRef or deployTitle is empty',
+      );
     }
   }
 
@@ -437,22 +462,43 @@ const deployEnvironmentLatest = async (
   try {
     await taskFunction(deployData);
 
-    sendToLagoonLogs('info', deployData.projectName, '', 'api:deployEnvironmentLatest', meta,
-      `*[${deployData.projectName}]* Deployment triggered \`${environment.name}\``,
+    sendToLagoonLogs(
+      'info',
+      deployData.projectName,
+      '',
+      'api:deployEnvironmentLatest',
+      meta,
+      `*[${deployData.projectName}]* Deployment triggered \`${
+        environment.name
+      }\``,
     );
 
     return 'success';
   } catch (error) {
     switch (error.name) {
       case 'NoNeedToDeployBranch':
-        sendToLagoonLogs('info', deployData.projectName, '', 'api:deployEnvironmentLatest', meta,
-          `*[${deployData.projectName}]* Deployment skipped \`${environment.name}\`: ${error.message}`,
+        sendToLagoonLogs(
+          'info',
+          deployData.projectName,
+          '',
+          'api:deployEnvironmentLatest',
+          meta,
+          `*[${deployData.projectName}]* Deployment skipped \`${
+            environment.name
+          }\`: ${error.message}`,
         );
         return `Skipped: ${error.message}`;
 
       default:
-        sendToLagoonLogs('error', deployData.projectName, '', 'api:deployEnvironmentLatest:error', meta,
-          `*[${deployData.projectName}]* Error deploying \`${environment.name}\`: ${error.message}`,
+        sendToLagoonLogs(
+          'error',
+          deployData.projectName,
+          '',
+          'api:deployEnvironmentLatest:error',
+          meta,
+          `*[${deployData.projectName}]* Error deploying \`${
+            environment.name
+          }\`: ${error.message}`,
         );
         return `Error: ${error.message}`;
     }
@@ -461,13 +507,7 @@ const deployEnvironmentLatest = async (
 
 const deployEnvironmentBranch = async (
   root,
-  {
-    input: {
-      project: projectInput,
-      branchName,
-      branchRef,
-    },
-  },
+  { input: { project: projectInput, branchName, branchRef } },
   {
     credentials: {
       role,
@@ -506,22 +546,43 @@ const deployEnvironmentBranch = async (
   try {
     await createDeployTask(deployData);
 
-    sendToLagoonLogs('info', deployData.projectName, '', 'api:deployEnvironmentBranch', meta,
-      `*[${deployData.projectName}]* Deployment triggered \`${deployData.branchName}\``,
+    sendToLagoonLogs(
+      'info',
+      deployData.projectName,
+      '',
+      'api:deployEnvironmentBranch',
+      meta,
+      `*[${deployData.projectName}]* Deployment triggered \`${
+        deployData.branchName
+      }\``,
     );
 
     return 'success';
   } catch (error) {
     switch (error.name) {
       case 'NoNeedToDeployBranch':
-        sendToLagoonLogs('info', deployData.projectName, '', 'api:deployEnvironmentBranch', meta,
-          `*[${deployData.projectName}]* Deployment skipped \`${deployData.branchName}\`: ${error.message}`,
+        sendToLagoonLogs(
+          'info',
+          deployData.projectName,
+          '',
+          'api:deployEnvironmentBranch',
+          meta,
+          `*[${deployData.projectName}]* Deployment skipped \`${
+            deployData.branchName
+          }\`: ${error.message}`,
         );
         return `Skipped: ${error.message}`;
 
       default:
-        sendToLagoonLogs('error', deployData.projectName, '', 'api:deployEnvironmentBranch:error', meta,
-          `*[${deployData.projectName}]* Error deploying \`${deployData.branchName}\`: ${error.message}`,
+        sendToLagoonLogs(
+          'error',
+          deployData.projectName,
+          '',
+          'api:deployEnvironmentBranch:error',
+          meta,
+          `*[${deployData.projectName}]* Error deploying \`${
+            deployData.branchName
+          }\`: ${error.message}`,
         );
         return `Error: ${error.message}`;
     }
@@ -584,22 +645,43 @@ const deployEnvironmentPullrequest = async (
   try {
     await createDeployTask(deployData);
 
-    sendToLagoonLogs('info', deployData.projectName, '', 'api:deployEnvironmentPullrequest', meta,
-      `*[${deployData.projectName}]* Deployment triggered \`${deployData.branchName}\``,
+    sendToLagoonLogs(
+      'info',
+      deployData.projectName,
+      '',
+      'api:deployEnvironmentPullrequest',
+      meta,
+      `*[${deployData.projectName}]* Deployment triggered \`${
+        deployData.branchName
+      }\``,
     );
 
     return 'success';
   } catch (error) {
     switch (error.name) {
       case 'NoNeedToDeployBranch':
-        sendToLagoonLogs('info', deployData.projectName, '', 'api:deployEnvironmentPullrequest', meta,
-          `*[${deployData.projectName}]* Deployment skipped \`${deployData.branchName}\`: ${error.message}`,
+        sendToLagoonLogs(
+          'info',
+          deployData.projectName,
+          '',
+          'api:deployEnvironmentPullrequest',
+          meta,
+          `*[${deployData.projectName}]* Deployment skipped \`${
+            deployData.branchName
+          }\`: ${error.message}`,
         );
         return `Skipped: ${error.message}`;
 
       default:
-        sendToLagoonLogs('error', deployData.projectName, '', 'api:deployEnvironmentPullrequest:error', meta,
-          `*[${deployData.projectName}]* Error deploying \`${deployData.branchName}\`: ${error.message}`,
+        sendToLagoonLogs(
+          'error',
+          deployData.projectName,
+          '',
+          'api:deployEnvironmentPullrequest:error',
+          meta,
+          `*[${deployData.projectName}]* Error deploying \`${
+            deployData.branchName
+          }\`: ${error.message}`,
         );
         return `Error: ${error.message}`;
     }
@@ -622,7 +704,9 @@ const deployEnvironmentPromote = async (
     },
   },
 ) => {
-  const destProject = await projectHelpers.getProjectByProjectInput(projectInput);
+  const destProject = await projectHelpers.getProjectByProjectInput(
+    projectInput,
+  );
 
   if (role !== 'admin') {
     const rows = await query(
@@ -638,8 +722,13 @@ const deployEnvironmentPromote = async (
     }
   }
 
-  const sourceEnvironments = await environmentHelpers.getEnvironmentsByEnvironmentInput(sourceEnvironmentInput);
-  const activeEnvironments = R.filter(R.propEq('deleted', '0000-00-00 00:00:00'), sourceEnvironments);
+  const sourceEnvironments = await environmentHelpers.getEnvironmentsByEnvironmentInput(
+    sourceEnvironmentInput,
+  );
+  const activeEnvironments = R.filter(
+    R.propEq('deleted', '0000-00-00 00:00:00'),
+    sourceEnvironments,
+  );
 
   if (activeEnvironments.length < 1 || activeEnvironments.length > 1) {
     throw new Error('Unauthorized');
@@ -671,40 +760,59 @@ const deployEnvironmentPromote = async (
   const meta = {
     projectName: deployData.projectName,
     branchName: deployData.branchName,
-    promoteSourceEnvironment: deployData.promoteSourceEnvironment
+    promoteSourceEnvironment: deployData.promoteSourceEnvironment,
   };
 
   try {
     await createPromoteTask(deployData);
 
-    sendToLagoonLogs('info', deployData.projectName, '', 'api:deployEnvironmentPromote', meta,
-      `*[${deployData.projectName}]* Deployment triggered \`${deployData.branchName}\``,
+    sendToLagoonLogs(
+      'info',
+      deployData.projectName,
+      '',
+      'api:deployEnvironmentPromote',
+      meta,
+      `*[${deployData.projectName}]* Deployment triggered \`${
+        deployData.branchName
+      }\``,
     );
 
     return 'success';
   } catch (error) {
     switch (error.name) {
       case 'NoNeedToDeployBranch':
-        sendToLagoonLogs('info', deployData.projectName, '', 'api:deployEnvironmentPromote', meta,
-          `*[${deployData.projectName}]* Deployment skipped \`${deployData.branchName}\`: ${error.message}`,
+        sendToLagoonLogs(
+          'info',
+          deployData.projectName,
+          '',
+          'api:deployEnvironmentPromote',
+          meta,
+          `*[${deployData.projectName}]* Deployment skipped \`${
+            deployData.branchName
+          }\`: ${error.message}`,
         );
         return `Skipped: ${error.message}`;
 
       default:
-        sendToLagoonLogs('error', deployData.projectName, '', 'api:deployEnvironmentPromote:error', meta,
-          `*[${deployData.projectName}]* Error deploying \`${deployData.branchName}\`: ${error.message}`,
+        sendToLagoonLogs(
+          'error',
+          deployData.projectName,
+          '',
+          'api:deployEnvironmentPromote:error',
+          meta,
+          `*[${deployData.projectName}]* Error deploying \`${
+            deployData.branchName
+          }\`: ${error.message}`,
         );
         return `Error: ${error.message}`;
     }
   }
 };
 
-const deploymentSubscriber = createEnvironmentFilteredSubscriber(
-  [
-    EVENTS.DEPLOYMENT.ADDED,
-    EVENTS.DEPLOYMENT.UPDATED,
-  ]
-);
+const deploymentSubscriber = createEnvironmentFilteredSubscriber([
+  EVENTS.DEPLOYMENT.ADDED,
+  EVENTS.DEPLOYMENT.UPDATED,
+]);
 
 const Resolvers /* : ResolversObj */ = {
   getDeploymentsByEnvironmentId,
diff --git a/services/api/src/resources/task/helpers.js b/services/api/src/resources/task/helpers.js
index a4c7a5ef9c..ff1d39c0a3 100644
--- a/services/api/src/resources/task/helpers.js
+++ b/services/api/src/resources/task/helpers.js
@@ -20,48 +20,57 @@ const injectLogs = async (task /* : Object */) => {
     };
   }
 
-  const result = await esClient.search({
-    index: 'lagoon-logs-*',
-    sort: '@timestamp:desc',
-    body: {
-      query: {
-        bool: {
-          must: [
-            { match_phrase: { 'meta.remoteId': task.remoteId } },
-            { match_phrase: { 'meta.jobStatus': task.status } },
-          ],
+  try {
+    const result = await esClient.search({
+      index: 'lagoon-logs-*',
+      sort: '@timestamp:desc',
+      body: {
+        query: {
+          bool: {
+            must: [
+              { match_phrase: { 'meta.remoteId': task.remoteId } },
+              { match_phrase: { 'meta.jobStatus': task.status } },
+            ],
+          },
         },
       },
-    },
-  });
+    });
+
+    if (!result.hits.total) {
+      return {
+        ...task,
+        logs: null,
+      };
+    }
 
-  if (!result.hits.total) {
     return {
       ...task,
-      logs: null,
+      logs: R.path(['hits', 'hits', 0, '_source', 'message'], result),
+    };
+  } catch (e) {
+    return {
+      ...task,
+      logs: `There was an error loading the logs: ${e.message}`,
     };
   }
-
-  return {
-    ...task,
-    logs: R.path(['hits', 'hits', 0, '_source', 'message'], result),
-  };
 };
 
 const Helpers = {
-  addTask: async ({
-    id,
-    name,
-    status,
-    created,
-    started,
-    completed,
-    environment,
-    service,
-    command,
-    remoteId,
-    execute,
-  } /* : { id?: number, name: string, status?: string, created?: string, started?: string, completed?: string, environment: number, service: string, command: string, remoteId?: string, execute: boolean } */) => {
+  addTask: async (
+    {
+      id,
+      name,
+      status,
+      created,
+      started,
+      completed,
+      environment,
+      service,
+      command,
+      remoteId,
+      execute,
+    } /* : { id?: number, name: string, status?: string, created?: string, started?: string, completed?: string, environment: number, service: string, command: string, remoteId?: string, execute: boolean } */,
+  ) => {
     const {
       info: { insertId },
     } = await query(
@@ -90,14 +99,24 @@ const Helpers = {
       return taskData;
     }
 
-    rows = await query(sqlClient, environmentSql.selectEnvironmentById(taskData.environment));
+    rows = await query(
+      sqlClient,
+      environmentSql.selectEnvironmentById(taskData.environment),
+    );
     const environmentData = R.prop(0, rows);
 
-    rows = await query(sqlClient, projectSql.selectProject(environmentData.project));
+    rows = await query(
+      sqlClient,
+      projectSql.selectProject(environmentData.project),
+    );
     const projectData = R.prop(0, rows);
 
     try {
-      await createTaskTask({ task: taskData, project: projectData, environment: environmentData });
+      await createTaskTask({
+        task: taskData,
+        project: projectData,
+        environment: environmentData,
+      });
     } catch (error) {
       sendToLagoonLogs(
         'error',
diff --git a/services/ui/src/components/errors/DeploymentNotFound.js b/services/ui/src/components/errors/DeploymentNotFound.js
new file mode 100644
index 0000000000..6b80e9ce32
--- /dev/null
+++ b/services/ui/src/components/errors/DeploymentNotFound.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ErrorPage from 'pages/_error';
+
+export default ({ variables }) => (
+  <ErrorPage
+    statusCode={404}
+    errorMessage={`Deployment "${variables.deploymentName}" not found`}
+  />
+);
diff --git a/services/ui/src/components/errors/EnvironmentNotFound.js b/services/ui/src/components/errors/EnvironmentNotFound.js
new file mode 100644
index 0000000000..93ebfaa46a
--- /dev/null
+++ b/services/ui/src/components/errors/EnvironmentNotFound.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ErrorPage from 'pages/_error';
+
+export default ({ variables }) => (
+  <ErrorPage
+    statusCode={404}
+    errorMessage={`Environment "${variables.openshiftProjectName}" not found`}
+  />
+);
diff --git a/services/ui/src/components/errors/ProjectNotFound.js b/services/ui/src/components/errors/ProjectNotFound.js
new file mode 100644
index 0000000000..e88fad40c1
--- /dev/null
+++ b/services/ui/src/components/errors/ProjectNotFound.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ErrorPage from 'pages/_error';
+
+export default ({ variables }) => (
+  <ErrorPage
+    statusCode={404}
+    errorMessage={`Project "${variables.name}" not found`}
+  />
+);
diff --git a/services/ui/src/components/errors/QueryError.js b/services/ui/src/components/errors/QueryError.js
new file mode 100644
index 0000000000..287cf814c4
--- /dev/null
+++ b/services/ui/src/components/errors/QueryError.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import ErrorPage from 'pages/_error';
+
+export default ({ error }) => (
+  <ErrorPage statusCode={500} errorMessage={error.toString()} />
+);
diff --git a/services/ui/src/components/errors/TaskNotFound.js b/services/ui/src/components/errors/TaskNotFound.js
new file mode 100644
index 0000000000..b722bd4a09
--- /dev/null
+++ b/services/ui/src/components/errors/TaskNotFound.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ErrorPage from 'pages/_error';
+
+export default ({ variables }) => (
+  <ErrorPage
+    statusCode={404}
+    errorMessage={`Task "${variables.taskId}" not found`}
+  />
+);
diff --git a/services/ui/src/lib/query/EnvironmentByOpenshiftProjectName.js b/services/ui/src/lib/query/EnvironmentByOpenshiftProjectName.js
index d2c240dafb..784029a621 100644
--- a/services/ui/src/lib/query/EnvironmentByOpenshiftProjectName.js
+++ b/services/ui/src/lib/query/EnvironmentByOpenshiftProjectName.js
@@ -2,7 +2,7 @@ import gql from 'graphql-tag';
 
 export default gql`
   query getEnvironment($openshiftProjectName: String!) {
-    environmentByOpenshiftProjectName(
+    environment: environmentByOpenshiftProjectName(
       openshiftProjectName: $openshiftProjectName
     ) {
       id
diff --git a/services/ui/src/lib/query/EnvironmentWithBackups.js b/services/ui/src/lib/query/EnvironmentWithBackups.js
index fb106ffe7e..4aea9a7f22 100644
--- a/services/ui/src/lib/query/EnvironmentWithBackups.js
+++ b/services/ui/src/lib/query/EnvironmentWithBackups.js
@@ -3,7 +3,7 @@ import BackupsFragment from 'lib/fragment/Backup';
 
 export default gql`
   query getEnvironment($openshiftProjectName: String!) {
-    environmentByOpenshiftProjectName(
+    environment: environmentByOpenshiftProjectName(
       openshiftProjectName: $openshiftProjectName
     ) {
       id
diff --git a/services/ui/src/lib/query/EnvironmentWithDeployment.js b/services/ui/src/lib/query/EnvironmentWithDeployment.js
index c93e9bfd52..0327eb008d 100644
--- a/services/ui/src/lib/query/EnvironmentWithDeployment.js
+++ b/services/ui/src/lib/query/EnvironmentWithDeployment.js
@@ -3,7 +3,7 @@ import DeploymentFragment from 'lib/fragment/Deployment';
 
 export default gql`
   query getEnvironment($openshiftProjectName: String!, $deploymentName: String!) {
-    environmentByOpenshiftProjectName(
+    environment: environmentByOpenshiftProjectName(
       openshiftProjectName: $openshiftProjectName
     ) {
       id
diff --git a/services/ui/src/lib/query/EnvironmentWithDeployments.js b/services/ui/src/lib/query/EnvironmentWithDeployments.js
index cba30b5e2e..e67221269d 100644
--- a/services/ui/src/lib/query/EnvironmentWithDeployments.js
+++ b/services/ui/src/lib/query/EnvironmentWithDeployments.js
@@ -3,7 +3,7 @@ import DeploymentFragment from 'lib/fragment/Deployment';
 
 export default gql`
   query getEnvironment($openshiftProjectName: String!) {
-    environmentByOpenshiftProjectName(
+    environment: environmentByOpenshiftProjectName(
       openshiftProjectName: $openshiftProjectName
     ) {
       id
diff --git a/services/ui/src/lib/query/EnvironmentWithTask.js b/services/ui/src/lib/query/EnvironmentWithTask.js
index 65d76f7ed9..744c45bc5b 100644
--- a/services/ui/src/lib/query/EnvironmentWithTask.js
+++ b/services/ui/src/lib/query/EnvironmentWithTask.js
@@ -3,7 +3,7 @@ import TaskFragment from 'lib/fragment/Task';
 
 export default gql`
   query getEnvironment($openshiftProjectName: String!, $taskId: Int!) {
-    environmentByOpenshiftProjectName(
+    environment: environmentByOpenshiftProjectName(
       openshiftProjectName: $openshiftProjectName
     ) {
       id
diff --git a/services/ui/src/lib/query/EnvironmentWithTasks.js b/services/ui/src/lib/query/EnvironmentWithTasks.js
index ae2a121559..3bb9dd5576 100644
--- a/services/ui/src/lib/query/EnvironmentWithTasks.js
+++ b/services/ui/src/lib/query/EnvironmentWithTasks.js
@@ -3,7 +3,7 @@ import TaskFragment from 'lib/fragment/Task';
 
 export default gql`
   query getEnvironment($openshiftProjectName: String!) {
-    environmentByOpenshiftProjectName(
+    environment: environmentByOpenshiftProjectName(
       openshiftProjectName: $openshiftProjectName
     ) {
       id
diff --git a/services/ui/src/lib/query/ProjectByName.js b/services/ui/src/lib/query/ProjectByName.js
index 528cad58f4..7eccf62ee1 100644
--- a/services/ui/src/lib/query/ProjectByName.js
+++ b/services/ui/src/lib/query/ProjectByName.js
@@ -2,7 +2,7 @@ import gql from 'graphql-tag';
 
 export default gql`
   query getProject($name: String!){
-    projectByName (name: $name){
+    project: projectByName (name: $name){
       id
       name
       branches
diff --git a/services/ui/src/lib/renderWhile.js b/services/ui/src/lib/renderWhile.js
new file mode 100644
index 0000000000..b76ee2e5a6
--- /dev/null
+++ b/services/ui/src/lib/renderWhile.js
@@ -0,0 +1,6 @@
+import * as R from 'ramda';
+import branch from 'recompose/branch';
+import renderComponent from 'recompose/renderComponent';
+
+export default (predicate, component) =>
+  branch(props => predicate(props), renderComponent(component));
diff --git a/services/ui/src/lib/withDataRequired.js b/services/ui/src/lib/withDataRequired.js
new file mode 100644
index 0000000000..1544cf00ef
--- /dev/null
+++ b/services/ui/src/lib/withDataRequired.js
@@ -0,0 +1,30 @@
+import * as R from 'ramda';
+import EnvironmentNotFound from 'components/errors/EnvironmentNotFound';
+import TaskNotFound from 'components/errors/TaskNotFound';
+import DeploymentNotFound from 'components/errors/DeploymentNotFound';
+import ProjectNotFound from 'components/errors/ProjectNotFound';
+import renderWhile from 'lib/renderWhile';
+
+const noProp = R.complement(R.prop);
+const noEnvironmentData = noProp('environment');
+const noProjectData = noProp('project');
+
+export const withEnvironmentRequired = renderWhile(
+  ({ data }) => noEnvironmentData(data),
+  EnvironmentNotFound
+);
+
+export const withTaskRequired = renderWhile(
+  ({ data: { environment } }) => !environment.tasks.length,
+  TaskNotFound
+);
+
+export const withDeploymentRequired = renderWhile(
+  ({ data: { environment } }) => !environment.deployments.length,
+  DeploymentNotFound
+);
+
+export const withProjectRequired = renderWhile(
+  ({ data }) => noProjectData(data),
+  ProjectNotFound
+);
diff --git a/services/ui/src/lib/withQueryError.js b/services/ui/src/lib/withQueryError.js
new file mode 100644
index 0000000000..e6dd7e0b50
--- /dev/null
+++ b/services/ui/src/lib/withQueryError.js
@@ -0,0 +1,7 @@
+import QueryError from 'components/errors/QueryError';
+import renderWhile from 'lib/renderWhile';
+
+export default renderWhile(
+  ({ error }) => error,
+  QueryError
+);
diff --git a/services/ui/src/lib/withQueryLoading.js b/services/ui/src/lib/withQueryLoading.js
new file mode 100644
index 0000000000..418874d17d
--- /dev/null
+++ b/services/ui/src/lib/withQueryLoading.js
@@ -0,0 +1,7 @@
+import LoadingPage from 'pages/_loading';
+import renderWhile from 'lib/renderWhile';
+
+export default renderWhile(
+  ({ loading }) => loading,
+  LoadingPage
+);
diff --git a/services/ui/src/pages/backups.js b/services/ui/src/pages/backups.js
index 2c34979a9a..3a3596467b 100644
--- a/services/ui/src/pages/backups.js
+++ b/services/ui/src/pages/backups.js
@@ -6,13 +6,14 @@ import { Query } from 'react-apollo';
 import MainLayout from 'layouts/main';
 import EnvironmentWithBackupsQuery from 'lib/query/EnvironmentWithBackups';
 import BackupsSubscription from 'lib/subscription/Backups';
-import LoadingPage from 'pages/_loading';
-import ErrorPage from 'pages/_error';
 import Breadcrumbs from 'components/Breadcrumbs';
 import ProjectBreadcrumb from 'components/Breadcrumbs/Project';
 import EnvironmentBreadcrumb from 'components/Breadcrumbs/Environment';
 import NavTabs from 'components/NavTabs';
 import Backups from 'components/Backups';
+import withQueryLoading from 'lib/withQueryLoading';
+import withQueryError from 'lib/withQueryError';
+import { withEnvironmentRequired } from 'lib/withDataRequired';
 import { bp, color } from 'lib/variables';
 
 const PageBackups = ({ router }) => (
@@ -24,31 +25,11 @@ const PageBackups = ({ router }) => (
       query={EnvironmentWithBackupsQuery}
       variables={{ openshiftProjectName: router.query.openshiftProjectName }}
     >
-      {({
-        loading,
-        error,
-        data: { environmentByOpenshiftProjectName: environment },
-        subscribeToMore
-      }) => {
-        if (loading) {
-          return <LoadingPage />;
-        }
-
-        if (error) {
-          return <ErrorPage statusCode={500} errorMessage={error.toString()} />;
-        }
-
-        if (!environment) {
-          return (
-            <ErrorPage
-              statusCode={404}
-              errorMessage={`Environment "${
-                router.query.openshiftProjectName
-              }" not found`}
-            />
-          );
-        }
-
+      {R.compose(
+        withQueryLoading,
+        withQueryError,
+        withEnvironmentRequired
+      )(({ data: { environment }, subscribeToMore }) => {
         subscribeToMore({
           document: BackupsSubscription,
           variables: { environment: environment.id },
@@ -138,7 +119,7 @@ const PageBackups = ({ router }) => (
             `}</style>
           </MainLayout>
         );
-      }}
+      })}
     </Query>
   </>
 );
diff --git a/services/ui/src/pages/deployment.js b/services/ui/src/pages/deployment.js
index ce2f0edc41..5ab7096ebd 100644
--- a/services/ui/src/pages/deployment.js
+++ b/services/ui/src/pages/deployment.js
@@ -1,16 +1,21 @@
 import React from 'react';
+import * as R from 'ramda';
 import { withRouter } from 'next/router';
 import Head from 'next/head';
 import { Query } from 'react-apollo';
 import MainLayout from 'layouts/main';
 import EnvironmentWithDeploymentQuery from 'lib/query/EnvironmentWithDeployment';
-import LoadingPage from 'pages/_loading';
-import ErrorPage from 'pages/_error';
 import Breadcrumbs from 'components/Breadcrumbs';
 import ProjectBreadcrumb from 'components/Breadcrumbs/Project';
 import EnvironmentBreadcrumb from 'components/Breadcrumbs/Environment';
 import NavTabs from 'components/NavTabs';
 import Deployment from 'components/Deployment';
+import withQueryLoading from 'lib/withQueryLoading';
+import withQueryError from 'lib/withQueryError';
+import {
+  withEnvironmentRequired,
+  withDeploymentRequired
+} from 'lib/withDataRequired';
 import { bp } from 'lib/variables';
 
 const PageDeployment = ({ router }) => {
@@ -26,73 +31,40 @@ const PageDeployment = ({ router }) => {
           deploymentName: router.query.deploymentName
         }}
       >
-        {({
-          loading,
-          error,
-          data: { environmentByOpenshiftProjectName: environment }
-        }) => {
-          if (loading) {
-            return <LoadingPage />;
-          }
-
-          if (error) {
-            return (
-              <ErrorPage statusCode={500} errorMessage={error.toString()} />
-            );
-          }
-
-          if (!environment) {
-            return (
-              <ErrorPage
-                statusCode={404}
-                errorMessage={`Environment "${
-                  router.query.openshiftProjectName
-                }" not found`}
-              />
-            );
-          }
-
-          if (!environment.deployments.length) {
-            return (
-              <ErrorPage
-                statusCode={404}
-                errorMessage={`Deployment "${
-                  router.query.deploymentName
-                }" not found`}
+        {R.compose(
+          withQueryLoading,
+          withQueryError,
+          withEnvironmentRequired,
+          withDeploymentRequired
+        )(({ data: { environment } }) => (
+          <MainLayout>
+            <Breadcrumbs>
+              <ProjectBreadcrumb projectSlug={environment.project.name} />
+              <EnvironmentBreadcrumb
+                environmentSlug={environment.openshiftProjectName}
+                projectSlug={environment.project.name}
               />
-            );
-          }
-
-          return (
-            <MainLayout>
-              <Breadcrumbs>
-                <ProjectBreadcrumb projectSlug={environment.project.name} />
-                <EnvironmentBreadcrumb
-                  environmentSlug={environment.openshiftProjectName}
-                  projectSlug={environment.project.name}
-                />
-              </Breadcrumbs>
-              <div className="content-wrapper">
-                <NavTabs activeTab="deployments" environment={environment} />
-                <div className="content">
-                  <Deployment deployment={environment.deployments[0]} />
-                </div>
+            </Breadcrumbs>
+            <div className="content-wrapper">
+              <NavTabs activeTab="deployments" environment={environment} />
+              <div className="content">
+                <Deployment deployment={environment.deployments[0]} />
               </div>
-              <style jsx>{`
-                .content-wrapper {
-                  @media ${bp.tabletUp} {
-                    display: flex;
-                    padding: 0;
-                  }
+            </div>
+            <style jsx>{`
+              .content-wrapper {
+                @media ${bp.tabletUp} {
+                  display: flex;
+                  padding: 0;
                 }
+              }
 
-                .content {
-                  width: 100%;
-                }
-              `}</style>
-            </MainLayout>
-          );
-        }}
+              .content {
+                width: 100%;
+              }
+            `}</style>
+          </MainLayout>
+        ))}
       </Query>
     </>
   );
diff --git a/services/ui/src/pages/deployments.js b/services/ui/src/pages/deployments.js
index 1ab5ffe765..4f56812e9a 100644
--- a/services/ui/src/pages/deployments.js
+++ b/services/ui/src/pages/deployments.js
@@ -1,18 +1,20 @@
 import React from 'react';
+import * as R from 'ramda';
 import { withRouter } from 'next/router';
 import Head from 'next/head';
 import { Query } from 'react-apollo';
 import MainLayout from 'layouts/main';
 import EnvironmentWithDeploymentsQuery from 'lib/query/EnvironmentWithDeployments';
 import DeploymentsSubscription from 'lib/subscription/Deployments';
-import LoadingPage from 'pages/_loading';
-import ErrorPage from 'pages/_error';
 import Breadcrumbs from 'components/Breadcrumbs';
 import ProjectBreadcrumb from 'components/Breadcrumbs/Project';
 import EnvironmentBreadcrumb from 'components/Breadcrumbs/Environment';
 import NavTabs from 'components/NavTabs';
 import DeployLatest from 'components/DeployLatest';
 import Deployments from 'components/Deployments';
+import withQueryLoading from 'lib/withQueryLoading';
+import withQueryError from 'lib/withQueryError';
+import { withEnvironmentRequired } from 'lib/withDataRequired';
 import { bp } from 'lib/variables';
 
 const PageDeployments = ({ router }) => {
@@ -25,33 +27,11 @@ const PageDeployments = ({ router }) => {
         query={EnvironmentWithDeploymentsQuery}
         variables={{ openshiftProjectName: router.query.openshiftProjectName }}
       >
-        {({
-          loading,
-          error,
-          data: { environmentByOpenshiftProjectName: environment },
-          subscribeToMore
-        }) => {
-          if (loading) {
-            return <LoadingPage />;
-          }
-
-          if (error) {
-            return (
-              <ErrorPage statusCode={500} errorMessage={error.toString()} />
-            );
-          }
-
-          if (!environment) {
-            return (
-              <ErrorPage
-                statusCode={404}
-                errorMessage={`Environment "${
-                  router.query.openshiftProjectName
-                }" not found`}
-              />
-            );
-          }
-
+        {R.compose(
+          withQueryLoading,
+          withQueryError,
+          withEnvironmentRequired
+        )(({ data: { environment }, subscribeToMore }) => {
           subscribeToMore({
             document: DeploymentsSubscription,
             variables: { environment: environment.id },
@@ -123,7 +103,7 @@ const PageDeployments = ({ router }) => {
               `}</style>
             </MainLayout>
           );
-        }}
+        })}
       </Query>
     </>
   );
diff --git a/services/ui/src/pages/environment.js b/services/ui/src/pages/environment.js
index 225fbe1ad1..53b82e750e 100644
--- a/services/ui/src/pages/environment.js
+++ b/services/ui/src/pages/environment.js
@@ -1,16 +1,18 @@
 import React from 'react';
+import * as R from 'ramda';
 import { withRouter } from 'next/router';
 import Head from 'next/head';
 import { Query } from 'react-apollo';
 import MainLayout from 'layouts/main';
 import EnvironmentByOpenshiftProjectNameQuery from 'lib/query/EnvironmentByOpenshiftProjectName';
-import LoadingPage from 'pages/_loading';
-import ErrorPage from 'pages/_error';
 import Breadcrumbs from 'components/Breadcrumbs';
 import ProjectBreadcrumb from 'components/Breadcrumbs/Project';
 import EnvironmentBreadcrumb from 'components/Breadcrumbs/Environment';
 import NavTabs from 'components/NavTabs';
 import Environment from 'components/Environment';
+import withQueryLoading from 'lib/withQueryLoading';
+import withQueryError from 'lib/withQueryError';
+import { withEnvironmentRequired } from 'lib/withDataRequired';
 import { bp } from 'lib/variables';
 
 const PageEnvironment = ({ router }) => (
@@ -24,56 +26,35 @@ const PageEnvironment = ({ router }) => (
         openshiftProjectName: router.query.openshiftProjectName
       }}
     >
-      {({
-        loading,
-        error,
-        data: { environmentByOpenshiftProjectName: environment }
-      }) => {
-        if (loading) {
-          return <LoadingPage />;
-        }
-
-        if (error) {
-          return <ErrorPage statusCode={500} errorMessage={error.toString()} />;
-        }
-
-        if (!environment) {
-          return (
-            <ErrorPage
-              statusCode={404}
-              errorMessage={`Environment "${
-                router.query.openshiftProjectName
-              }" not found`}
+      {R.compose(
+        withQueryLoading,
+        withQueryError,
+        withEnvironmentRequired
+      )(({ data: { environment } }) => (
+        <MainLayout>
+          <Breadcrumbs>
+            <ProjectBreadcrumb projectSlug={environment.project.name} />
+            <EnvironmentBreadcrumb
+              environmentSlug={environment.openshiftProjectName}
+              projectSlug={environment.project.name}
             />
-          );
-        }
-
-        return (
-          <MainLayout>
-            <Breadcrumbs>
-              <ProjectBreadcrumb projectSlug={environment.project.name} />
-              <EnvironmentBreadcrumb
-                environmentSlug={environment.openshiftProjectName}
-                projectSlug={environment.project.name}
-              />
-            </Breadcrumbs>
-            <div className="content-wrapper">
-              <NavTabs activeTab="overview" environment={environment} />
-              <div className="content">
-                <Environment environment={environment} />
-              </div>
+          </Breadcrumbs>
+          <div className="content-wrapper">
+            <NavTabs activeTab="overview" environment={environment} />
+            <div className="content">
+              <Environment environment={environment} />
             </div>
-            <style jsx>{`
-              .content-wrapper {
-                @media ${bp.tabletUp} {
-                  display: flex;
-                  padding: 0;
-                }
+          </div>
+          <style jsx>{`
+            .content-wrapper {
+              @media ${bp.tabletUp} {
+                display: flex;
+                padding: 0;
               }
-            `}</style>
-          </MainLayout>
-        );
-      }}
+            }
+          `}</style>
+        </MainLayout>
+      ))}
     </Query>
   </>
 );
diff --git a/services/ui/src/pages/project.js b/services/ui/src/pages/project.js
index e353894c9c..af67cceed3 100644
--- a/services/ui/src/pages/project.js
+++ b/services/ui/src/pages/project.js
@@ -5,12 +5,13 @@ import Head from 'next/head';
 import { Query } from 'react-apollo';
 import MainLayout from 'layouts/main';
 import ProjectByNameQuery from 'lib/query/ProjectByName';
-import LoadingPage from 'pages/_loading';
-import ErrorPage from 'pages/_error';
 import Breadcrumbs from 'components/Breadcrumbs';
 import ProjectBreadcrumb from 'components/Breadcrumbs/Project';
 import ProjectDetailsSidebar from 'components/ProjectDetailsSidebar';
 import Environments from 'components/Environments';
+import withQueryLoading from 'lib/withQueryLoading';
+import withQueryError from 'lib/withQueryError';
+import { withProjectRequired } from 'lib/withDataRequired';
 import { bp, color } from 'lib/variables';
 
 const PageProject = ({ router }) => (
@@ -22,24 +23,11 @@ const PageProject = ({ router }) => (
       query={ProjectByNameQuery}
       variables={{ name: router.query.projectName }}
     >
-      {({ loading, error, data: { projectByName: project } }) => {
-        if (loading) {
-          return <LoadingPage />;
-        }
-
-        if (error) {
-          return <ErrorPage statusCode={500} errorMessage={error.toString()} />;
-        }
-
-        if (!project) {
-          return (
-            <ErrorPage
-              statusCode={404}
-              errorMessage={`Project "${router.query.projectName}" not found`}
-            />
-          );
-        }
-
+      {R.compose(
+        withQueryLoading,
+        withQueryError,
+        withProjectRequired
+      )(({ data: { project } }) => {
         // Sort alphabetically by environmentType and then deployType
         const environments = R.sortWith(
           [
@@ -106,7 +94,7 @@ const PageProject = ({ router }) => (
             `}</style>
           </MainLayout>
         );
-      }}
+      })}
     </Query>
   </>
 );
diff --git a/services/ui/src/pages/projects.js b/services/ui/src/pages/projects.js
index 1ba5097f91..091f80e6e4 100644
--- a/services/ui/src/pages/projects.js
+++ b/services/ui/src/pages/projects.js
@@ -1,11 +1,12 @@
 import React from 'react';
+import * as R from 'ramda';
 import Head from 'next/head';
 import { Query } from 'react-apollo';
 import MainLayout from 'layouts/main';
 import AllProjectsQuery from 'lib/query/AllProjects';
-import LoadingPage from 'pages/_loading';
-import ErrorPage from 'pages/_error';
 import Projects from 'components/Projects';
+import withQueryLoading from 'lib/withQueryLoading';
+import withQueryError from 'lib/withQueryError';
 import { bp, color, fontSize } from 'lib/variables';
 
 const ProjectsPage = () => (
@@ -14,48 +15,41 @@ const ProjectsPage = () => (
       <title>Projects</title>
     </Head>
     <Query query={AllProjectsQuery} displayName="AllProjectsQuery">
-      {({ loading, error, data }) => {
-        if (loading) {
-          return <LoadingPage />;
-        }
-
-        if (error) {
-          return <ErrorPage statusCode={500} errorMessage={error.toString()} />;
-        }
-
-        return (
-          <MainLayout>
-            <div className="content-wrapper">
-              <h2>Projects</h2>
-              <div className="content">
-                <Projects projects={data.allProjects} />
-              </div>
+      {R.compose(
+        withQueryLoading,
+        withQueryError
+      )(({ data }) => (
+        <MainLayout>
+          <div className="content-wrapper">
+            <h2>Projects</h2>
+            <div className="content">
+              <Projects projects={data.allProjects || []} />
             </div>
-            <style jsx>{`
-              .content-wrapper {
-                h2 {
-                  margin: 38px calc((100vw / 16) * 1) 0;
-                  @media ${bp.wideUp} {
-                    margin: 62px calc((100vw / 16) * 2) 0;
-                  }
-                  @media ${bp.extraWideUp} {
-                    margin: 62px calc((100vw / 16) * 3) 0;
-                  }
+          </div>
+          <style jsx>{`
+            .content-wrapper {
+              h2 {
+                margin: 38px calc((100vw / 16) * 1) 0;
+                @media ${bp.wideUp} {
+                  margin: 62px calc((100vw / 16) * 2) 0;
+                }
+                @media ${bp.extraWideUp} {
+                  margin: 62px calc((100vw / 16) * 3) 0;
+                }
+              }
+              .content {
+                margin: 38px calc((100vw / 16) * 1);
+                @media ${bp.wideUp} {
+                  margin: 38px calc((100vw / 16) * 2);
                 }
-                .content {
-                  margin: 38px calc((100vw / 16) * 1);
-                  @media ${bp.wideUp} {
-                    margin: 38px calc((100vw / 16) * 2);
-                  }
-                  @media ${bp.extraWideUp} {
-                    margin: 38px calc((100vw / 16) * 3);
-                  }
+                @media ${bp.extraWideUp} {
+                  margin: 38px calc((100vw / 16) * 3);
                 }
               }
-            `}</style>
-          </MainLayout>
-        );
-      }}
+            }
+          `}</style>
+        </MainLayout>
+      ))}
     </Query>
   </>
 );
diff --git a/services/ui/src/pages/task.js b/services/ui/src/pages/task.js
index 2574dd694b..6cd691390f 100644
--- a/services/ui/src/pages/task.js
+++ b/services/ui/src/pages/task.js
@@ -1,16 +1,21 @@
 import React from 'react';
+import * as R from 'ramda';
 import { withRouter } from 'next/router';
 import Head from 'next/head';
 import { Query } from 'react-apollo';
 import MainLayout from 'layouts/main';
 import EnvironmentWithTaskQuery from 'lib/query/EnvironmentWithTask';
-import LoadingPage from 'pages/_loading';
-import ErrorPage from 'pages/_error';
 import Breadcrumbs from 'components/Breadcrumbs';
 import ProjectBreadcrumb from 'components/Breadcrumbs/Project';
 import EnvironmentBreadcrumb from 'components/Breadcrumbs/Environment';
 import NavTabs from 'components/NavTabs';
 import Task from 'components/Task';
+import withQueryLoading from 'lib/withQueryLoading';
+import withQueryError from 'lib/withQueryError';
+import {
+  withEnvironmentRequired,
+  withTaskRequired
+} from 'lib/withDataRequired';
 import { bp } from 'lib/variables';
 
 const PageTask = ({ router }) => (
@@ -25,69 +30,40 @@ const PageTask = ({ router }) => (
         taskId: router.query.taskId
       }}
     >
-      {({
-        loading,
-        error,
-        data: { environmentByOpenshiftProjectName: environment }
-      }) => {
-        if (loading) {
-          return <LoadingPage />;
-        }
-
-        if (error) {
-          return <ErrorPage statusCode={500} errorMessage={error.toString()} />;
-        }
-
-        if (!environment) {
-          return (
-            <ErrorPage
-              statusCode={404}
-              errorMessage={`Environment "${
-                router.query.openshiftProjectName
-              }" not found`}
-            />
-          );
-        }
-
-        if (!environment.tasks.length) {
-          return (
-            <ErrorPage
-              statusCode={404}
-              errorMessage={`Task "${router.query.taskId}" not found`}
+      {R.compose(
+        withQueryLoading,
+        withQueryError,
+        withEnvironmentRequired,
+        withTaskRequired
+      )(({ data: { environment } }) => (
+        <MainLayout>
+          <Breadcrumbs>
+            <ProjectBreadcrumb projectSlug={environment.project.name} />
+            <EnvironmentBreadcrumb
+              environmentSlug={environment.openshiftProjectName}
+              projectSlug={environment.project.name}
             />
-          );
-        }
-
-        return (
-          <MainLayout>
-            <Breadcrumbs>
-              <ProjectBreadcrumb projectSlug={environment.project.name} />
-              <EnvironmentBreadcrumb
-                environmentSlug={environment.openshiftProjectName}
-                projectSlug={environment.project.name}
-              />
-            </Breadcrumbs>
-            <div className="content-wrapper">
-              <NavTabs activeTab="tasks" environment={environment} />
-              <div className="content">
-                <Task task={environment.tasks[0]} />
-              </div>
+          </Breadcrumbs>
+          <div className="content-wrapper">
+            <NavTabs activeTab="tasks" environment={environment} />
+            <div className="content">
+              <Task task={environment.tasks[0]} />
             </div>
-            <style jsx>{`
-              .content-wrapper {
-                @media ${bp.tabletUp} {
-                  display: flex;
-                  padding: 0;
-                }
+          </div>
+          <style jsx>{`
+            .content-wrapper {
+              @media ${bp.tabletUp} {
+                display: flex;
+                padding: 0;
               }
+            }
 
-              .content {
-                width: 100%;
-              }
-            `}</style>
-          </MainLayout>
-        );
-      }}
+            .content {
+              width: 100%;
+            }
+          `}</style>
+        </MainLayout>
+      ))}
     </Query>
   </>
 );
diff --git a/services/ui/src/pages/tasks.js b/services/ui/src/pages/tasks.js
index 63ec1185dc..aa4af84ac3 100644
--- a/services/ui/src/pages/tasks.js
+++ b/services/ui/src/pages/tasks.js
@@ -1,18 +1,20 @@
 import React from 'react';
+import * as R from 'ramda';
 import { withRouter } from 'next/router';
 import Head from 'next/head';
 import { Query } from 'react-apollo';
 import MainLayout from 'layouts/main';
 import EnvironmentWithTasksQuery from 'lib/query/EnvironmentWithTasks';
 import TasksSubscription from 'lib/subscription/Tasks';
-import LoadingPage from 'pages/_loading';
-import ErrorPage from 'pages/_error';
 import Breadcrumbs from 'components/Breadcrumbs';
 import ProjectBreadcrumb from 'components/Breadcrumbs/Project';
 import EnvironmentBreadcrumb from 'components/Breadcrumbs/Environment';
 import NavTabs from 'components/NavTabs';
 import AddTask from 'components/AddTask';
 import Tasks from 'components/Tasks';
+import withQueryLoading from 'lib/withQueryLoading';
+import withQueryError from 'lib/withQueryError';
+import { withEnvironmentRequired } from 'lib/withDataRequired';
 import { bp } from 'lib/variables';
 
 const PageTasks = ({ router }) => (
@@ -26,31 +28,11 @@ const PageTasks = ({ router }) => (
         openshiftProjectName: router.query.openshiftProjectName
       }}
     >
-      {({
-        loading,
-        error,
-        data: { environmentByOpenshiftProjectName: environment },
-        subscribeToMore
-      }) => {
-        if (loading) {
-          return <LoadingPage />;
-        }
-
-        if (error) {
-          return <ErrorPage statusCode={500} errorMessage={error.toString()} />;
-        }
-
-        if (!environment) {
-          return (
-            <ErrorPage
-              statusCode={404}
-              errorMessage={`Environment "${
-                router.query.openshiftProjectName
-              }" not found`}
-            />
-          );
-        }
-
+      {R.compose(
+        withQueryLoading,
+        withQueryError,
+        withEnvironmentRequired
+      )(({ data: { environment }, subscribeToMore }) => {
         subscribeToMore({
           document: TasksSubscription,
           variables: { environment: environment.id },
@@ -117,7 +99,7 @@ const PageTasks = ({ router }) => (
             `}</style>
           </MainLayout>
         );
-      }}
+      })}
     </Query>
   </>
 );