feat(instant): Report errors to rollbar

packages/instant/src/components/zero_ex_instant_container.tsx

@@ -12,12 +12,15 @@ import { SelectedAssetInstantHeading } from '../containers/selected_asset_instan
 import { ColorOption } from '../style/theme';
 import { zIndex } from '../style/z_index';
 import { OrderProcessState, SlideAnimationState } from '../types';
+import { setupRollbar } from '../util/error_reporter';
 
 import { CSSReset } from './css_reset';
 import { SlidingPanel } from './sliding_panel';
 import { Container } from './ui/container';
 import { Flex } from './ui/flex';
 
+setupRollbar();
+
 export interface ZeroExInstantContainerProps {
     orderProcessState: OrderProcessState;
 }

packages/instant/src/constants.ts

@@ -20,6 +20,13 @@ export const HEAP_ANALYTICS_ID = process.env.HEAP_ANALYTICS_ID;
 export const COINBASE_API_BASE_URL = 'https://api.coinbase.com/v2';
 export const PROGRESS_STALL_AT_WIDTH = '95%';
 export const PROGRESS_FINISH_ANIMATION_TIME_MS = 200;
+export const ROLLBAR_CLIENT_TOKEN = process.env.ROLLBAR_CLIENT_TOKEN;
+export const ROLLBAR_ENVIRONMENT = process.env.ROLLBAR_ENVIRONMENT as
+    | 'dogfood'
+    | 'staging'
+    | 'development'
+    | 'production'
+    | undefined;
 export const COINBASE_WALLET_IOS_APP_STORE_URL = 'https://itunes.apple.com/us/app/coinbase-wallet/id1278383455?mt=8';
 export const COINBASE_WALLET_ANDROID_APP_STORE_URL = 'https://play.google.com/store/apps/details?id=org.toshi&hl=en';
 export const COINBASE_WALLET_SITE_URL = 'https://wallet.coinbase.com/';

packages/instant/src/util/error_reporter.ts

@@ -0,0 +1,68 @@
+import { logUtils } from '@0x/utils';
+
+import { ROLLBAR_CLIENT_TOKEN, ROLLBAR_ENVIRONMENT } from '../constants';
+
+// Import version of Rollbar designed for embedded components
+// See https://docs.rollbar.com/docs/using-rollbarjs-inside-an-embedded-component
+// tslint:disable-next-line:no-var-requires
+const Rollbar = require('rollbar/dist/rollbar.noconflict.umd');
+
+const shouldAllowRollbar = () => {
+    if (ROLLBAR_ENVIRONMENT === 'development') {
+        return process.env.ROLLBAR_FORCE_DEVELOPMENT_REPORT ? true : false;
+    }
+    return true;
+};
+
+let rollbar: any;
+if (ROLLBAR_CLIENT_TOKEN && ROLLBAR_ENVIRONMENT && shouldAllowRollbar()) {
+    rollbar = new Rollbar({
+        accessToken: ROLLBAR_CLIENT_TOKEN,
+        captureUncaught: true,
+        captureUnhandledRejections: true,
+        enabled: true,
+        itemsPerMinute: 10,
+        maxItems: 500,
+        payload: {
+            environment: ROLLBAR_ENVIRONMENT,
+            client: {
+                javascript: {
+                    source_map_enabled: true,
+                    code_version: process.env.GIT_SHA,
+                    guess_uncaught_frames: true,
+                },
+            },
+        },
+        uncaughtErrorLevel: 'error',
+        ignoredMessages: [
+            // Errors from the third-party scripts
+            'Script error',
+            // Network errors or ad-blockers
+            'TypeError: Failed to fetch',
+            'Exchange has not been deployed to detected network (network/artifact mismatch)',
+            // Source: https://groups.google.com/a/chromium.org/forum/#!topic/chromium-discuss/7VU0_VvC7mE
+            "undefined is not an object (evaluating '__gCrWeb.autofill.extractForms')",
+            // Source: http://stackoverflow.com/questions/43399818/securityerror-from-facebook-and-cross-domain-messaging
+            'SecurityError (DOM Exception 18)',
+        ],
+    });
+}
+
+export const setupRollbar = (): any => {
+    return rollbar as any;
+};
+
+export const errorReporter = {
+    report(err: Error): void {
+        if (!rollbar) {
+            logUtils.log('Not reporting to rollbar because not configured', err);
+            return;
+        }
+
+        rollbar.error(err, (rollbarErr: Error) => {
+            if (rollbarErr) {
+                logUtils.log(`Error reporting to rollbar, ignoring: ${rollbarErr}`);
+            }
+        });
+    },
+};