fix: all big enough ui proxy requests fail with error proxying with p…

…artial data (kubeflow#4266)

* fix: all big enough ui proxy requests fail with error proxying with partial data

* Fix naming

frontend/server/app.ts

@@ -34,6 +34,7 @@ import { getIndexHTMLHandler } from './handlers/index-html';
 
 import proxyMiddleware from './proxy-middleware';
 import { Server } from 'http';
+import { HACK_FIX_HPM_PARTIAL_RESPONSE_HEADERS } from './consts';
 
 function getRegisterHandler(app: Application, basePath: string) {
   return (
@@ -163,6 +164,7 @@ function createUIServer(options: UIConfigs) {
       onProxyReq: proxyReq => {
         console.log('Metadata proxied request: ', (proxyReq as any).path);
       },
+      headers: HACK_FIX_HPM_PARTIAL_RESPONSE_HEADERS,
       target: envoyServiceAddress,
     }),
   );
@@ -193,6 +195,7 @@ function createUIServer(options: UIConfigs) {
       onProxyReq: proxyReq => {
         console.log('Proxied request: ', proxyReq.path);
       },
+      headers: HACK_FIX_HPM_PARTIAL_RESPONSE_HEADERS,
       target: apiServerAddress,
     }),
   );
@@ -203,6 +206,7 @@ function createUIServer(options: UIConfigs) {
       onProxyReq: proxyReq => {
         console.log('Proxied request: ', proxyReq.path);
       },
+      headers: HACK_FIX_HPM_PARTIAL_RESPONSE_HEADERS,
       pathRewrite: pathStr =>
         pathStr.startsWith(basePath) ? pathStr.substr(basePath.length, pathStr.length) : pathStr,
       target: apiServerAddress,

frontend/server/consts.ts

@@ -0,0 +1,7 @@
+// The hack solution I found for solving:
+// Responses fail randomly half way in a partial state, with the last sentence
+// being: "Error occurred while trying to proxy request ..."
+// Reference: https://github.com/chimurai/http-proxy-middleware/issues/171#issuecomment-439020716
+export const HACK_FIX_HPM_PARTIAL_RESPONSE_HEADERS = {
+  Connection: 'keep-alive',
+};

frontend/server/handlers/artifacts.ts

@@ -19,6 +19,7 @@ import { createMinioClient, getObjectStream } from '../minio-helper';
 import { Handler, Request, Response } from 'express';
 import { Storage } from '@google-cloud/storage';
 import proxy from 'http-proxy-middleware';
+import { HACK_FIX_HPM_PARTIAL_RESPONSE_HEADERS } from '../consts';
 
 /**
  * ArtifactsQueryStrings describes the expected query strings key value pairs
@@ -299,6 +300,7 @@ export function getArtifactsProxyHandler({
         return namespacedServiceGetter(namespace);
       },
       target: '/artifacts/get',
+      headers: HACK_FIX_HPM_PARTIAL_RESPONSE_HEADERS,
     },
   );
 }

frontend/server/proxy-middleware.ts

@@ -15,6 +15,7 @@
 import express from 'express';
 import proxy from 'http-proxy-middleware';
 import { URL, URLSearchParams } from 'url';
+import { HACK_FIX_HPM_PARTIAL_RESPONSE_HEADERS } from './consts';
 
 export function _extractUrlFromReferer(proxyPrefix: string, referer = ''): string {
   const index = referer.indexOf(proxyPrefix);
@@ -72,14 +73,13 @@ export default (app: express.Application, apisPrefix: string) => {
       changeOrigin: true,
       logLevel: process.env.NODE_ENV === 'test' ? 'warn' : 'debug',
       target: 'http://127.0.0.1',
-
       router: (req: any) => {
         return _routePathWithReferer(proxyPrefix, req.path, req.headers.referer as string);
       },
-
       pathRewrite: (_: any, req: any) => {
         return _rewritePath(proxyPrefix, req.path, req.query);
       },
+      headers: HACK_FIX_HPM_PARTIAL_RESPONSE_HEADERS,
     }),
   );
 };