Don't double-load raven-js

mxstbr · mxstbr · commit cf4617cf39c3 · 2018-11-20T17:55:12.000+01:00
We were already loading raven via a script tag in the SSR template, but
then still including the `raven-js` package in the frontend.

This fixes it by only using the global raven from the script tag.
diff --git a/api/package.json b/api/package.json
@@ -88,7 +88,6 @@
     "prismjs": "^1.15.0",
     "query-string": "5.1.1",
     "raven": "^2.6.4",
-    "raven-js": "^3.27.0",
     "react": "^15.4.1",
     "react-app-rewire-styled-components": "^3.0.2",
     "react-app-rewired": "^1.6.2",
diff --git a/api/yarn.lock b/api/yarn.lock
@@ -7668,11 +7668,6 @@ range-parser@~1.2.0:
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
   integrity sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=
 
-raven-js@^3.27.0:
-  version "3.27.0"
-  resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.27.0.tgz#9f47c03e17933ce756e189f3669d49c441c1ba6e"
-  integrity sha512-vChdOL+yzecfnGA+B5EhEZkJ3kY3KlMzxEhShKh6Vdtooyl0yZfYNFQfYzgMf2v4pyQa+OTZ5esTxxgOOZDHqw==
-
 raven@^2.6.4:
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/raven/-/raven-2.6.4.tgz#458d4a380c8fbb59e0150c655625aaf60c167ea3"
diff --git a/package.json b/package.json
@@ -145,7 +145,6 @@
     "query-string": "5.1.1",
     "raf": "^3.4.0",
     "raven": "^2.6.4",
-    "raven-js": "^3.27.0",
     "react": "16.4.2",
     "react-apollo": "^2.2.4",
     "react-app-rewire-styled-components": "^3.0.0",
diff --git a/public/index.html b/public/index.html
@@ -32,47 +32,42 @@
         a.defer = 1;
         a.src = g;
         m.parentNode.insertBefore(a, m);
-      })
-      (
-        window,
-        document,
-        'script',
-        'https://www.google-analytics.com/analytics.js',
-        'ga'
-      );
+      })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
 
-    ga('create', 'UA-92673909-1', 'auto');
-    ga('send', 'pageview');
-    ga('set', 'anonymizeIp', true);
-  </script>
-
-  <script type="text/javascript">
-    (function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script")
-    ;r.type="text/javascript";r.async=true
-    ;r.src="https://cdn.amplitude.com/libs/amplitude-4.2.1-min.gz.js"
-    ;r.onload=function(){if(e.amplitude.runQueuedFunctions){
-    e.amplitude.runQueuedFunctions()}else{
-    console.log("[Amplitude] Error: could not load SDK")}}
-    ;var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)
-    ;function s(e,t){e.prototype[t]=function(){
-    this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}}
-    var o=function(){this._q=[];return this}
-    ;var a=["add","append","clearAll","prepend","set","setOnce","unset"]
-    ;for(var u=0;u<a.length;u++){s(o,a[u])}n.Identify=o;var c=function(){this._q=[]
-    ;return this}
-    ;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"]
-    ;for(var p=0;p<l.length;p++){s(c,l[p])}n.Revenue=c
-    ;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","logEventWithTimestamp","logEventWithGroups","setSessionId","resetSessionId"]
-    ;function v(e){function t(t){e[t]=function(){
-    e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}}
-    for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){
-    e=(!e||e.length===0?"$default_instance":e).toLowerCase()
-    ;if(!n._iq.hasOwnProperty(e)){n._iq[e]={_q:[]};v(n._iq[e])}return n._iq[e]}
-    ;e.amplitude=n})(window,document);
-  </script>
+      ga('create', 'UA-92673909-1', 'auto');
+      ga('send', 'pageview');
+      ga('set', 'anonymizeIp', true);
+    </script>
 
+    <script type="text/javascript">
+      (function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script")
+      ;r.type="text/javascript";r.async=true
+      ;r.src="https://cdn.amplitude.com/libs/amplitude-4.2.1-min.gz.js"
+      ;r.onload=function(){if(e.amplitude.runQueuedFunctions){
+      e.amplitude.runQueuedFunctions()}else{
+      console.log("[Amplitude] Error: could not load SDK")}}
+      ;var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)
+      ;function s(e,t){e.prototype[t]=function(){
+      this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}}
+      var o=function(){this._q=[];return this}
+      ;var a=["add","append","clearAll","prepend","set","setOnce","unset"]
+      ;for(var u=0;u<a.length;u++){s(o,a[u])}n.Identify=o;var c=function(){this._q=[]
+      ;return this}
+      ;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"]
+      ;for(var p=0;p<l.length;p++){s(c,l[p])}n.Revenue=c
+      ;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","logEventWithTimestamp","logEventWithGroups","setSessionId","resetSessionId"]
+      ;function v(e){function t(t){e[t]=function(){
+      e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}}
+      for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){
+      e=(!e||e.length===0?"$default_instance":e).toLowerCase()
+      ;if(!n._iq.hasOwnProperty(e)){n._iq[e]={_q:[]};v(n._iq[e])}return n._iq[e]}
+      ;e.amplitude=n})(window,document);
+    </script>
   </head>
   <body>
     <div id="root"></div>
+    <script defer="defer" src="https://cdn.ravenjs.com/3.14.0/raven.min.js" crossorigin="anonymous"></script>
+    <script defer="defer" src="/install-raven.js"></script>
+    <script defer="defer" type="text/javascript" src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.find,Symbol.iterator"></script>
   </body>
 </html>
diff --git a/shared/clients/analytics/index.js b/shared/clients/analytics/index.js
@@ -4,7 +4,6 @@ import { createTrack } from './track';
 import { createSetUser } from './setUser';
 import { createUnsetUser } from './unsetUser';
 import * as transformations from './transformations';
-require('./raven');
 
 export type AmplitudeClient = 'web' | 'desktop' | 'mobile';
 
diff --git a/shared/clients/analytics/raven.js b/shared/clients/analytics/raven.js
diff --git a/src/actions/authentication.js b/src/actions/authentication.js
@@ -1,6 +1,5 @@
 import { setUser, unsetUser } from 'src/helpers/analytics';
 import { removeItemFromStorage, storeItem } from 'src/helpers/localStorage';
-import Raven from 'raven-js';
 
 export const logout = dispatch => {
   // clear localStorage
@@ -42,8 +41,23 @@ export const saveUserDataToLocalStorage = (user: Object) => async dispatch => {
   const { text } = await response.json();
   setUser(text);
 
-  // logs the user id to sentry errors
-  Raven.setUserContext({ id: user.id });
+  // logs the user id to Sentry
+  // if Raven hasn't loaded yet, try every 5s until it's loaded
+  if (window.Raven) {
+    console.log('Raven setUserContext!');
+    window.Raven.setUserContext({ id: user.id });
+  } else {
+    console.log('No Raven :( Try again in 5s');
+    const interval = setInterval(() => {
+      console.log('Raven?');
+      if (window.Raven) {
+        console.log('Yes! setUserContext');
+        window.Raven.setUserContext({ id: user.id });
+        clearInterval(interval);
+      }
+      console.log('No :( Try again in 5s');
+    }, 5000);
+  }
 
   // save this object to localstorage. This will be used in the future to hydrate
   // the store when users visit the homepage
diff --git a/src/components/error/ErrorBoundary.js b/src/components/error/ErrorBoundary.js
@@ -1,6 +1,5 @@
 // @flow
 import * as React from 'react';
-import Raven from 'raven-js';
 import BlueScreen from '.';
 
 type State = {
@@ -17,7 +16,7 @@ class ErrorBoundary extends React.Component<Props, State> {
 
   componentDidCatch = (error: any, errorInfo: any) => {
     this.setState({ error });
-    Raven.captureException(error, { extra: errorInfo });
+    window.Raven && window.Raven.captureException(error, { extra: errorInfo });
   };
 
   render() {
diff --git a/src/helpers/sentry-redux-middleware.js b/src/helpers/sentry-redux-middleware.js
@@ -1,16 +1,15 @@
-import Raven from 'raven-js';
-
 const crashReporter = store => next => action => {
   // Handle THROW_ERROR actions
   if (action.type === 'THROW_ERROR') {
     console.error('Caught an exception!', action.err);
     if (process.env.NODE_ENV !== 'development') {
-      Raven.captureException(action.err, {
-        extra: {
-          action,
-          state: store.getState(),
-        },
-      });
+      window.Raven &&
+        window.Raven.captureException(action.err, {
+          extra: {
+            action,
+            state: store.getState(),
+          },
+        });
     }
   }
 
@@ -19,12 +18,13 @@ const crashReporter = store => next => action => {
   } catch (err) {
     console.error('Caught an exception!', err);
     if (process.env.NODE_ENV !== 'development') {
-      Raven.captureException(err, {
-        extra: {
-          action,
-          state: store.getState(),
-        },
-      });
+      window.Raven &&
+        window.Raven.captureException(err, {
+          extra: {
+            action,
+            state: store.getState(),
+          },
+        });
     }
     throw err;
   }
diff --git a/yarn.lock b/yarn.lock
@@ -10033,10 +10033,6 @@ range-parser@^1.0.3, range-parser@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
 
-raven-js@^3.27.0:
-  version "3.27.0"
-  resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.27.0.tgz#9f47c03e17933ce756e189f3669d49c441c1ba6e"
-
 raven@^2.6.4:
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/raven/-/raven-2.6.4.tgz#458d4a380c8fbb59e0150c655625aaf60c167ea3"
