Fix flash errors in performance bar for cached responses

When a request contains an ETag value in its If-None-Match header, the backend
may send a request ID (from Rack) that does not correspond to a value in Peek's
Redis cache (because we aborted the Rails processing in our ETag middleware).

Because a cached response (304) has to replace the headers with those from the
previous 200 - https://tools.ietf.org/html/rfc7234#section-4.3.4 - we add a
custom header that will only be present in cache hits, that can tell the
frontend to ignore these.

1 files changed, 13 insertions, 17 deletions

diff --git a/app/assets/javascripts/performance_bar/services/performance_bar_service.js b/app/assets/javascripts/performance_bar/services/performance_bar_service.js
index 3ebfaa87a4e..bc71911ae35 100644
--- a/app/assets/javascripts/performance_bar/services/performance_bar_service.js
+++ b/app/assets/javascripts/performance_bar/services/performance_bar_service.js
@@ -10,29 +10,25 @@ export default class PerformanceBarService {
   }
 
   static registerInterceptor(peekUrl, callback) {
-    vueResourceInterceptor = (request, next) => {
-      next(response => {
-        const requestId = response.headers['x-request-id'];
-        const requestUrl = response.url;
-
-        if (requestUrl !== peekUrl && requestId) {
-          callback(requestId, requestUrl);
-        }
-      });
-    };
-
-    Vue.http.interceptors.push(vueResourceInterceptor);
-
-    return axios.interceptors.response.use(response => {
+    const interceptor = response => {
       const requestId = response.headers['x-request-id'];
-      const requestUrl = response.config.url;
+      // Get the request URL from response.config for Axios, and response for
+      // Vue Resource.
+      const requestUrl = (response.config || response).url;
+      const cachedResponse = response.headers['x-gitlab-from-cache'] === 'true';
 
-      if (requestUrl !== peekUrl && requestId) {
+      if (requestUrl !== peekUrl && requestId && !cachedResponse) {
         callback(requestId, requestUrl);
       }
 
       return response;
-    });
+    };
+
+    vueResourceInterceptor = (request, next) => next(interceptor);
+
+    Vue.http.interceptors.push(vueResourceInterceptor);
+
+    return axios.interceptors.response.use(interceptor);
   }
 
   static removeInterceptor(interceptor) {