New sentry (codesandbox#1678)

CompuIves · web-flow · commit 343b7ae7a187 · 2019-04-01T00:27:04.000+02:00
* Update Sentry to latest version

* Remove raven

* Update yarn.lock

* Lazy laod sentry

* Increase available memory for build

* Correctly set dsn

* Give sentry a chunk name

* Mark sentry as initialized
diff --git a/.eslintrc b/.eslintrc
@@ -8,7 +8,6 @@
     "es6": true
   },
   "globals": {
-    "Raven": true,
     "VERSION": true,
     "$PropertyType": true,
     "TimeoutID": true,
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "private": true,
   "scripts": {
     "build": "NODE_OPTIONS=\"--max-old-space-size=4096\" yarn build:deps && yarn build:prod",
-    "build:prod": "lerna run build  --scope homepage --stream && lerna run build --scope app --stream && gulp",
+    "build:prod": "NODE_OPTIONS=\"--max-old-space-size=4096\" lerna run build  --scope homepage --stream && lerna run build --scope app --stream && gulp",
     "build:embed": "lerna run build:embed --scope app --stream && gulp",
     "build:clean": "lerna run build:clean --scope app --scope homepage && rimraf www",
     "build:deps": "lerna run build:dev --scope codesandbox-api && lerna run build:dev --scope @codesandbox/common && lerna run build:dev --scope vscode-textmate --scope codesandbox-browserfs --scope node-services && lerna run build:dev --scope sse-hooks",
diff --git a/packages/app/src/app/components/SubscribeForm/CheckoutForm/index.js b/packages/app/src/app/components/SubscribeForm/CheckoutForm/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { injectStripe, CardElement } from 'react-stripe-elements';
-import reportError from 'app/utils/error';
 import { Button } from '@codesandbox/common/lib/components/Button';
+import { logError } from '@codesandbox/common/lib/utils/analytics';
 
 import { CardContainer, NameInput, ErrorText, Label } from './elements';
 
@@ -52,7 +52,7 @@ class CheckoutForm extends React.PureComponent {
     try {
       await this.props.subscribe(token.id);
     } catch (e) {
-      reportError(e);
+      logError(e);
 
       return this.setState({
         loading: false,
diff --git a/packages/app/src/app/index.html b/packages/app/src/app/index.html
@@ -33,7 +33,6 @@
     <!-- Injected by server: -->
     <!-- {{OEMBED TAG}} -->
     <title>CodeSandbox</title>
-    <script src="https://cdn.ravenjs.com/3.21.0/raven.min.js" crossorigin="anonymous"></script>
     <link href="/static/fonts/dmvendor.css" rel="stylesheet"></link>
     <!-- Google Tag Manager -->
     <script>
diff --git a/packages/app/src/app/index.js b/packages/app/src/app/index.js
@@ -4,15 +4,18 @@ import { ThemeProvider } from 'styled-components';
 import { Router } from 'react-router-dom';
 import { ApolloProvider } from 'react-apollo';
 import { Provider } from 'mobx-react';
+import _debug from '@codesandbox/common/lib/utils/debug';
+import {
+  initializeSentry,
+  logError,
+} from '@codesandbox/common/lib/utils/analytics';
+import '@codesandbox/common/lib/global.css';
 
 import history from 'app/utils/history';
-import _debug from '@codesandbox/common/lib/utils/debug';
 import { client } from 'app/graphql/client';
-import VERSION from '@codesandbox/common/lib/version';
 import registerServiceWorker from '@codesandbox/common/lib/registerServiceWorker';
 import requirePolyfills from '@codesandbox/common/lib/load-dynamic-polyfills';
 import 'normalize.css';
-import '@codesandbox/common/lib/global.css';
 import theme from '@codesandbox/common/lib/theme';
 import { isSafari } from '@codesandbox/common/lib/utils/platform';
 
@@ -22,7 +25,6 @@ import * as child_process from 'node-services/lib/child_process';
 import controller from './controller';
 import App from './pages/index';
 import './split-pane.css';
-import logError from './utils/error';
 import { getTypeFetcher } from './vscode/extensionHostWorker/common/type-downloader';
 
 import vscode from './vscode';
@@ -49,50 +51,9 @@ window.addEventListener('unhandledrejection', e => {
 
 if (process.env.NODE_ENV === 'production') {
   try {
-    Raven.config('https://3943f94c73b44cf5bb2302a72d52e7b8@sentry.io/155188', {
-      release: VERSION,
-      ignoreErrors: [
-        // Random plugins/extensions
-        'top.GLOBALS',
-        // See: http://blog.errorception.com/2012/03/tale-of-unfindable-js-error. html
-        'originalCreateNotification',
-        'canvas.contentDocument',
-        'MyApp_RemoveAllHighlights',
-        'http://tt.epicplay.com',
-        "Can't find variable: ZiteReader",
-        'jigsaw is not defined',
-        'ComboSearch is not defined',
-        'http://loading.retry.widdit.com/',
-        'atomicFindClose',
-        // Facebook borked
-        'fb_xd_fragment',
-        // ISP "optimizing" proxy - `Cache-Control: no-transform` seems to
-        // reduce this. (thanks @acdha)
-        // See http://stackoverflow.com/questions/4113268
-        'bmi_SafeAddOnload',
-        'EBCallBackMessageReceived',
-        // See http://toolbar.conduit.com/Developer/HtmlAndGadget/Methods/JSInjection.aspx
-        'conduitPage',
-      ],
-      ignoreUrls: [
-        // Facebook flakiness
-        /graph\.facebook\.com/i,
-        // Facebook blocked
-        /connect\.facebook\.net\/en_US\/all\.js/i,
-        // Woopra flakiness
-        /eatdifferent\.com\.woopra-ns\.com/i,
-        /static\.woopra\.com\/js\/woopra\.js/i,
-        // Chrome extensions
-        /extensions\//i,
-        /^chrome:\/\//i,
-        // Other plugins
-        /127\.0\.0\.1:4001\/isrunning/i, // Cacaoweb
-        /webappstoolbarba\.texthelp\.com\//i,
-        /metrics\.itunes\.apple\.com\.edgesuite\.net\//i,
-        // Monaco debuggers
-        'https://codesandbox.io/public/14/vs/language/typescript/lib/typescriptServices.js',
-      ],
-    }).install();
+    initializeSentry(
+      'https://3943f94c73b44cf5bb2302a72d52e7b8@sentry.io/155188'
+    );
   } catch (error) {
     console.error(error);
   }
diff --git a/packages/app/src/app/store/providers/Api.js b/packages/app/src/app/store/providers/Api.js
@@ -1,8 +1,8 @@
+import { logError } from '@codesandbox/common/lib/utils/analytics';
 import { values } from 'lodash-es';
 
 import { camelizeKeys, decamelizeKeys } from 'humps';
 import { Provider } from 'cerebral';
-import sendError from 'app/utils/error';
 import { addNotification } from '../factories';
 
 const API_ROOT = '/api/v1';
@@ -21,7 +21,7 @@ const getMessage = (error: Error & { response: ?Object }) => {
   const response = error.response;
 
   if (!response || response.status >= 500) {
-    sendError(error);
+    logError(error);
   }
 
   if (response && response.result) {
diff --git a/packages/app/src/app/utils/analytics.js b/packages/app/src/app/utils/analytics.js
diff --git a/packages/app/src/app/utils/error.js b/packages/app/src/app/utils/error.js
diff --git a/packages/common/package.json b/packages/common/package.json
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@babel/plugin-transform-flow-strip-types": "^7.0.0",
+    "@sentry/browser": "^4.6.6",
     "@tippy.js/react": "^2.1.1",
     "babel-plugin-preval": "^3.0.1",
     "codesandbox-api": "^0.0.22",
diff --git a/packages/common/src/components/Tooltip.tsx b/packages/common/src/components/Tooltip.tsx
@@ -19,10 +19,10 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-const Tooltip = ({ children, style = {}, ...props }) => (
+const Tooltip = ({ children, style = {}, content, ...props }) => (
   <React.Fragment>
     <GlobalStyle />
-    <Tippy delay={[500, 0]} {...props}>
+    <Tippy delay={[500, 0]} content={content} {...props}>
       <span
         style={{
           ...style,
diff --git a/packages/common/src/utils/analytics.ts b/packages/common/src/utils/analytics.ts
@@ -15,7 +15,33 @@ export const DNT =
     global.navigator.msDoNotTrack === '1'
   );
 
-export function identify(key, value) {
+let sentryInitialized = false;
+
+function getSentry() {
+  return import(/* webpackChunkName: 'sentry' */ '@sentry/browser');
+}
+export async function initializeSentry(dsn: string) {
+  const Sentry = await getSentry();
+  if (!DNT) {
+    sentryInitialized = true;
+
+    return Sentry.init({
+      dsn,
+      release: VERSION,
+    });
+  }
+}
+
+export async function logError(err: Error) {
+  if (sentryInitialized) {
+    const Sentry = await getSentry();
+    Sentry.captureException(err);
+  }
+
+  if (window.console && console.error) console.error(err);
+}
+
+export async function identify(key: string, value: string) {
   try {
     if (!DNT) {
       if (typeof global.amplitude !== 'undefined') {
@@ -24,13 +50,21 @@ export function identify(key, value) {
         global.amplitude.identify(identity);
         debug('[Amplitude] Identifying', key, value);
       }
+
+      if (sentryInitialized) {
+        const Sentry = await getSentry();
+
+        Sentry.configureScope(scope => {
+          scope.setExtra(key, value);
+        });
+      }
     }
   } catch (e) {
     /* */
   }
 }
 
-export function setUserId(userId: string) {
+export async function setUserId(userId: string) {
   try {
     if (!DNT) {
       if (typeof global.amplitude !== 'undefined') {
@@ -40,13 +74,20 @@ export function setUserId(userId: string) {
 
         global.amplitude.getInstance().setUserId(hashedId);
       }
+
+      if (sentryInitialized) {
+        const Sentry = await getSentry();
+        Sentry.configureScope(scope => {
+          scope.setUser({ id: userId });
+        });
+      }
     }
   } catch (e) {
     /* */
   }
 }
 
-export function resetUserId() {
+export async function resetUserId() {
   try {
     if (!DNT) {
       if (typeof global.amplitude !== 'undefined') {
@@ -58,6 +99,13 @@ export function resetUserId() {
           global.amplitude.getInstance().regenerateDeviceId();
         }
       }
+
+      if (sentryInitialized) {
+        const Sentry = await getSentry();
+        Sentry.configureScope(scope => {
+          scope.setUser({ id: undefined });
+        });
+      }
     }
   } catch (e) {
     /* */
diff --git a/packages/common/src/utils/debug.ts b/packages/common/src/utils/debug.ts
@@ -28,6 +28,8 @@ const getDebugger: () => (key: string) => (...message: any[]) => void = () => {
     return (key: string) => (message: string) => {
       // Disable it for now, seems to affect performance. That's the last thing we want
       // from this (https://github.com/CompuIves/codesandbox-client/issues/1671)
+
+      // TODO: move this to sentry
       if (false || typeof global.Raven === 'object') {
         try {
           global.Raven.captureBreadcrumb({
diff --git a/yarn.lock b/yarn.lock
@@ -2184,6 +2184,58 @@
     into-stream "^3.1.0"
     lodash "^4.17.4"
 
+"@sentry/browser@^4.6.6":
+  version "4.6.6"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-4.6.6.tgz#58ac3de9956c8a7033f3830c3ee9e011c2bd133a"
+  integrity sha512-+9VsQ+oQYU+PYlLJG2ex7JCMSVQbnUvWPI2uZOofWdI9sWIPUub3boWItMzRQNQ1T4S3FZd4FqAWNFd3azdnBw==
+  dependencies:
+    "@sentry/core" "4.6.6"
+    "@sentry/types" "4.5.3"
+    "@sentry/utils" "4.6.5"
+    tslib "^1.9.3"
+
+"@sentry/core@4.6.6":
+  version "4.6.6"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-4.6.6.tgz#dea96a88533a3bdbdcc86ae18e35272c57e0fd20"
+  integrity sha512-7z9HKLTNr3zVBR3tBRheTxkkkuK2IqISUc5Iyo3crN2OecOLtpptT96f5XjLndBEL2ab39eCBPpA5OFjbpzrIA==
+  dependencies:
+    "@sentry/hub" "4.6.5"
+    "@sentry/minimal" "4.6.5"
+    "@sentry/types" "4.5.3"
+    "@sentry/utils" "4.6.5"
+    tslib "^1.9.3"
+
+"@sentry/hub@4.6.5":
+  version "4.6.5"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-4.6.5.tgz#451def7bc8d90d9cc007f58f364b3ce305c4701a"
+  integrity sha512-v9vee8s8C1fK/DPtNOzv6r+AMbPDOWfnasouNcBUkbQUSN5wUNyCDvt51QbWaw5kMMY5TSqjdVqY6gXQZI0APQ==
+  dependencies:
+    "@sentry/types" "4.5.3"
+    "@sentry/utils" "4.6.5"
+    tslib "^1.9.3"
+
+"@sentry/minimal@4.6.5":
+  version "4.6.5"
+  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-4.6.5.tgz#64433d2c9fda69eedbb61855a7ff8905f7b19218"
+  integrity sha512-tf+J+uUNmSgzC7d9JSN8Ekw1HeBAX87Efa/jyFbzLvaw80oibvTiLSLqDjQ9PgvyIzBUuuPImkS2NpvPQGWFtg==
+  dependencies:
+    "@sentry/hub" "4.6.5"
+    "@sentry/types" "4.5.3"
+    tslib "^1.9.3"
+
+"@sentry/types@4.5.3":
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-4.5.3.tgz#3350dce2b7f9b936a8c327891c12e3aef7bd8852"
+  integrity sha512-7ll1PAFNjrBNX9rzy3P2qAQrpQwHaDO3uKj735qsnGw34OtAS8Xr8WYrjI14f9fMPa/XIeWvMPb4GMic28V/ag==
+
+"@sentry/utils@4.6.5":
+  version "4.6.5"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-4.6.5.tgz#4c960524914311eb76bbd6ca7f80f4d98c04db7f"
+  integrity sha512-rTISJtRRbWsd3UE+TkA3QG1C0VzPKPW8w74tieBwYhtTCGmOHNwz2nDC/MZGbGj4OgDmNKKl4CCyQr88EX08hA==
+  dependencies:
+    "@sentry/types" "4.5.3"
+    tslib "^1.9.3"
+
 "@sindresorhus/is@^0.7.0":
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
@@ -23666,7 +23718,7 @@ tsconfig@^7.0.0:
     strip-bom "^3.0.0"
     strip-json-comments "^2.0.0"
 
-tslib@^1.0.0, tslib@^1.6.0, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.0.0, tslib@^1.6.0, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
 
