From ac1ffe53df90df9ecf4aca972a5625568f0b2a3a Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 20 Nov 2018 11:21:16 -0800 Subject: Send in rollbar environment --- packages/instant/webpack.config.js | 28 ++++++++++++++++++++-------- 1 file changed, 20 insertions(+), 8 deletions(-) (limited to 'packages') diff --git a/packages/instant/webpack.config.js b/packages/instant/webpack.config.js index 41276809c..161e7d1b0 100644 --- a/packages/instant/webpack.config.js +++ b/packages/instant/webpack.config.js @@ -11,21 +11,31 @@ const GIT_SHA = childProcess .toString() .trim(); -const HEAP_PRODUCTION_ENV_VAR_NAME = 'INSTANT_HEAP_ANALYTICS_ID_PRODUCTION'; -const HEAP_DEVELOPMENT_ENV_VAR_NAME = 'INSTANT_HEAP_ANALYTICS_ID_DEVELOPMENT'; -const getHeapAnalyticsId = modeName => { - if (modeName === 'production') { - return process.env[HEAP_PRODUCTION_ENV_VAR_NAME]; +const getEnvironmentName = (env, argv) => { + if (env && env.dogfood) { + return 'dogfood'; + } else if (env && env.staging) { + return 'staging'; } - if (modeName === 'development') { - return process.env[HEAP_DEVELOPMENT_ENV_VAR_NAME]; + // argv.mode should be 'development' or 'production' + return argv.mode; +}; + +const getHeapAnalyticsId = environmentName => { + if (environmentName === 'production') { + return process.env['INSTANT_HEAP_ANALYTICS_ID_PRODUCTION']; + } + + if (environmentName === 'development' || environmentName === 'dogfood' || environmentName === 'staging') { + return process.env['INSTANT_HEAP_ANALYTICS_ID_DEVELOPMENT']; } return undefined; }; module.exports = (env, argv) => { + const environmentName = getEnvironmentName(env, argv); const outputPath = process.env.WEBPACK_OUTPUT_PATH || 'umd'; const config = { entry: { @@ -41,8 +51,10 @@ module.exports = (env, argv) => { new webpack.DefinePlugin({ 'process.env': { GIT_SHA: JSON.stringify(GIT_SHA), - HEAP_ANALYTICS_ID: getHeapAnalyticsId(argv.mode), NPM_PACKAGE_VERSION: JSON.stringify(process.env.npm_package_version), + HEAP_ANALYTICS_ID: getHeapAnalyticsId(environmentName), + ROLLBAR_ENVIRONMENT: JSON.stringify(environmentName), + ROLLBAR_CLIENT_TOKEN: JSON.stringify(process.env.INSTANT_ROLLBAR_CLIENT_TOKEN), }, }), ], -- cgit v1.2.3 From d2dd5f93d21404ee5424792a4e29e843140a7fa1 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 20 Nov 2018 11:39:31 -0800 Subject: Introduce rollbar plugin --- packages/instant/.dogfood.discharge.json | 4 +- packages/instant/.staging.discharge.json | 4 +- packages/instant/package.json | 3 ++ packages/instant/webpack.config.js | 63 ++++++++++++++++++++++++++------ 4 files changed, 59 insertions(+), 15 deletions(-) (limited to 'packages') diff --git a/packages/instant/.dogfood.discharge.json b/packages/instant/.dogfood.discharge.json index ca36b3861..cea579c27 100644 --- a/packages/instant/.dogfood.discharge.json +++ b/packages/instant/.dogfood.discharge.json @@ -1,12 +1,12 @@ { "domain": "0x-instant-dogfood", - "build_command": "WEBPACK_OUTPUT_PATH=public yarn build:umd:prod", + "build_command": "WEBPACK_OUTPUT_PATH=public yarn build:umd:prod --env.dogfood", "upload_directory": "public", "index_key": "index.html", "error_key": "index.html", "trailing_slashes": true, "cache": 3600, - "aws_profile": "default", + "aws_profile": "0xproject", "aws_region": "us-east-1", "cdn": false, "dns_configured": true diff --git a/packages/instant/.staging.discharge.json b/packages/instant/.staging.discharge.json index c917a650b..9e63cb110 100644 --- a/packages/instant/.staging.discharge.json +++ b/packages/instant/.staging.discharge.json @@ -1,12 +1,12 @@ { "domain": "0x-instant-staging", - "build_command": "WEBPACK_OUTPUT_PATH=public yarn build:umd:prod", + "build_command": "WEBPACK_OUTPUT_PATH=public yarn build:umd:prod --env.staging", "upload_directory": "public", "index_key": "index.html", "error_key": "index.html", "trailing_slashes": true, "cache": 3600, - "aws_profile": "default", + "aws_profile": "0xproject", "aws_region": "us-east-1", "cdn": false, "dns_configured": true diff --git a/packages/instant/package.json b/packages/instant/package.json index 1813d61e5..e613e028c 100644 --- a/packages/instant/package.json +++ b/packages/instant/package.json @@ -64,6 +64,7 @@ "react-redux": "^5.0.7", "redux": "^4.0.0", "redux-devtools-extension": "^2.13.5", + "rollbar": "^2.5.0", "styled-components": "^4.0.2", "ts-optchain": "^0.1.1" }, @@ -88,7 +89,9 @@ "make-promises-safe": "^1.1.0", "npm-run-all": "^4.1.2", "nyc": "^11.0.1", + "rollbar-sourcemap-webpack-plugin": "^2.4.0", "shx": "^0.2.2", + "source-map-loader": "^0.2.4", "svg-react-loader": "^0.4.6", "ts-jest": "^23.10.3", "tslint": "5.11.0", diff --git a/packages/instant/webpack.config.js b/packages/instant/webpack.config.js index 161e7d1b0..2375bbd31 100644 --- a/packages/instant/webpack.config.js +++ b/packages/instant/webpack.config.js @@ -1,6 +1,7 @@ const childProcess = require('child_process'); const ip = require('ip'); const path = require('path'); +const RollbarSourceMapPlugin = require('rollbar-sourcemap-webpack-plugin'); const webpack = require('webpack'); // The common js bundle (not this one) is built using tsc. @@ -34,9 +35,59 @@ const getHeapAnalyticsId = environmentName => { return undefined; }; +const getRollbarPlugin = environmentName => { + if (!environmentName) { + return undefined; + } + + const publishToken = process.env.INSTANT_ROLLBAR_PUBLISH_TOKEN; + if (!publishToken) { + return undefined; + } + + let rollbarPublicPath; + if (environmentName === 'dogfood') { + rollbarPublicPath = 'http://0x-instant-dogfood.s3-website-us-east-1.amazonaws.com'; + } else if (environmentName === 'staging') { + rollbarPublicPath = 'http://0x-instant-staging.s3-website-us-east-1.amazonaws.com'; + } + + if (!rollbarPublicPath) { + console.log('No rollbar public path'); + return undefined; + } + + const rollbarPluginOptions = { + accessToken: publishToken, + version: GIT_SHA, + publicPath: rollbarPublicPath, + }; + return new RollbarSourceMapPlugin(rollbarPluginOptions); +}; + module.exports = (env, argv) => { const environmentName = getEnvironmentName(env, argv); const outputPath = process.env.WEBPACK_OUTPUT_PATH || 'umd'; + + let plugins = [ + new webpack.DefinePlugin({ + 'process.env': { + GIT_SHA: JSON.stringify(GIT_SHA), + NPM_PACKAGE_VERSION: JSON.stringify(process.env.npm_package_version), + HEAP_ANALYTICS_ID: getHeapAnalyticsId(environmentName), + ROLLBAR_ENVIRONMENT: JSON.stringify(environmentName), + ROLLBAR_CLIENT_TOKEN: JSON.stringify(process.env.INSTANT_ROLLBAR_CLIENT_TOKEN), + }, + }), + ]; + const rollbarPlugin = getRollbarPlugin(environmentName); + if (rollbarPlugin) { + console.log('Using rollbar plugin'); + plugins = plugins.concat(rollbarPlugin); + } else { + console.log('Not using rollbar plugin'); + } + const config = { entry: { instant: './src/index.umd.ts', @@ -47,17 +98,7 @@ module.exports = (env, argv) => { library: 'zeroExInstant', libraryTarget: 'umd', }, - plugins: [ - new webpack.DefinePlugin({ - 'process.env': { - GIT_SHA: JSON.stringify(GIT_SHA), - NPM_PACKAGE_VERSION: JSON.stringify(process.env.npm_package_version), - HEAP_ANALYTICS_ID: getHeapAnalyticsId(environmentName), - ROLLBAR_ENVIRONMENT: JSON.stringify(environmentName), - ROLLBAR_CLIENT_TOKEN: JSON.stringify(process.env.INSTANT_ROLLBAR_CLIENT_TOKEN), - }, - }), - ], + plugins, devtool: 'source-map', resolve: { extensions: ['.js', '.json', '.ts', '.tsx'], -- cgit v1.2.3 From 05d45e7146ce862ebf7318db636b1a1652348243 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 20 Nov 2018 12:05:48 -0800 Subject: Use sourcemap loader --- packages/instant/webpack.config.js | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'packages') diff --git a/packages/instant/webpack.config.js b/packages/instant/webpack.config.js index 2375bbd31..e472824f5 100644 --- a/packages/instant/webpack.config.js +++ b/packages/instant/webpack.config.js @@ -77,6 +77,7 @@ module.exports = (env, argv) => { HEAP_ANALYTICS_ID: getHeapAnalyticsId(environmentName), ROLLBAR_ENVIRONMENT: JSON.stringify(environmentName), ROLLBAR_CLIENT_TOKEN: JSON.stringify(process.env.INSTANT_ROLLBAR_CLIENT_TOKEN), + ROLLBAR_FORCE_DEVELOPMENT_REPORT: JSON.stringify(process.env.INSTANT_ROLLBAR_FORCE_DEVELOPMENT_REPORT), }, }), ]; @@ -113,6 +114,15 @@ module.exports = (env, argv) => { test: /\.svg$/, loader: 'svg-react-loader', }, + { + test: /\.js$/, + loader: 'source-map-loader', + exclude: [ + // instead of /\/node_modules\// + path.join(process.cwd(), 'node_modules'), + path.join(process.cwd(), '../..', 'node_modules'), + ], + }, ], }, devServer: { -- cgit v1.2.3 From 728617fed2fee99b2accdcf6d2ddc9036c9ad266 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 20 Nov 2018 12:06:10 -0800 Subject: feat(instant): Report errors to rollbar --- .../src/components/zero_ex_instant_container.tsx | 3 + packages/instant/src/constants.ts | 7 +++ packages/instant/src/util/error_reporter.ts | 68 ++++++++++++++++++++++ 3 files changed, 78 insertions(+) create mode 100644 packages/instant/src/util/error_reporter.ts (limited to 'packages') diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index 47c938472..6d7cef7fd 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/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; } diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts index be6077ca9..23660360d 100644 --- a/packages/instant/src/constants.ts +++ b/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/'; diff --git a/packages/instant/src/util/error_reporter.ts b/packages/instant/src/util/error_reporter.ts new file mode 100644 index 000000000..81a90e7f5 --- /dev/null +++ b/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}`); + } + }); + }, +}; -- cgit v1.2.3 From 748e3c0c5358b99f15baf4bf95da027c9b83eb89 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 20 Nov 2018 13:14:20 -0800 Subject: Force source maps on staging and dogfood --- packages/instant/webpack.config.js | 28 ++++++++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) (limited to 'packages') diff --git a/packages/instant/webpack.config.js b/packages/instant/webpack.config.js index e472824f5..e3ba59eb3 100644 --- a/packages/instant/webpack.config.js +++ b/packages/instant/webpack.config.js @@ -35,12 +35,14 @@ const getHeapAnalyticsId = environmentName => { return undefined; }; +const ROLLBAR_PUBLISH_TOKEN_ENV_NAME = 'INSTANT_ROLLBAR_PUBLISH_TOKEN'; +const ROLLBAR_CLIENT_TOKEN_ENV_NAME = 'INSTANT_ROLLBAR_CLIENT_TOKEN'; const getRollbarPlugin = environmentName => { if (!environmentName) { return undefined; } - const publishToken = process.env.INSTANT_ROLLBAR_PUBLISH_TOKEN; + const publishToken = process.env[ROLLBAR_PUBLISH_TOKEN_ENV_NAME]; if (!publishToken) { return undefined; } @@ -65,6 +67,26 @@ const getRollbarPlugin = environmentName => { return new RollbarSourceMapPlugin(rollbarPluginOptions); }; +const validateRollbar = (environmentName, rollbarPlugin) => { + const requiresRollbar = environmentName === 'dogfood' || environmentName === 'staging'; + + if (!requiresRollbar) { + return; + } + + if (!process.env[ROLLBAR_CLIENT_TOKEN_ENV_NAME]) { + throw new Error(`${ROLLBAR_CLIENT_TOKEN_ENV_NAME} must be set for ${environmentName}`); + } + + if (!rollbarPlugin) { + if (environmentName === 'dogfood' || environmentName === 'staging') { + throw new Error( + `Please set rollbar env var ${ROLLBAR_PUBLISH_TOKEN_ENV_NAME} to a Rollbar project access token with post_server_item permissions to deploy source maps to ${environmentName}`, + ); + } + } +}; + module.exports = (env, argv) => { const environmentName = getEnvironmentName(env, argv); const outputPath = process.env.WEBPACK_OUTPUT_PATH || 'umd'; @@ -76,11 +98,12 @@ module.exports = (env, argv) => { NPM_PACKAGE_VERSION: JSON.stringify(process.env.npm_package_version), HEAP_ANALYTICS_ID: getHeapAnalyticsId(environmentName), ROLLBAR_ENVIRONMENT: JSON.stringify(environmentName), - ROLLBAR_CLIENT_TOKEN: JSON.stringify(process.env.INSTANT_ROLLBAR_CLIENT_TOKEN), + ROLLBAR_CLIENT_TOKEN: JSON.stringify(process.env[ROLLBAR_CLIENT_TOKEN_ENV_NAME]), ROLLBAR_FORCE_DEVELOPMENT_REPORT: JSON.stringify(process.env.INSTANT_ROLLBAR_FORCE_DEVELOPMENT_REPORT), }, }), ]; + const rollbarPlugin = getRollbarPlugin(environmentName); if (rollbarPlugin) { console.log('Using rollbar plugin'); @@ -88,6 +111,7 @@ module.exports = (env, argv) => { } else { console.log('Not using rollbar plugin'); } + validateRollbar(environmentName, rollbarPlugin); const config = { entry: { -- cgit v1.2.3 From 934570d12fae9c67ae18fc914577f02a51af3bca Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 20 Nov 2018 13:18:47 -0800 Subject: Explicit error reporting --- packages/instant/src/redux/async_data.ts | 3 +++ packages/instant/src/util/buy_quote_updater.ts | 4 +++- packages/instant/src/util/gas_price_estimator.ts | 5 ++++- packages/instant/src/util/heap.ts | 3 ++- 4 files changed, 12 insertions(+), 3 deletions(-) (limited to 'packages') diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts index 5d30388b8..29d441c75 100644 --- a/packages/instant/src/redux/async_data.ts +++ b/packages/instant/src/redux/async_data.ts @@ -9,6 +9,7 @@ import { assetUtils } from '../util/asset'; import { buyQuoteUpdater } from '../util/buy_quote_updater'; import { coinbaseApi } from '../util/coinbase_api'; import { errorFlasher } from '../util/error_flasher'; +import { errorReporter } from '../util/error_reporter'; import { actions } from './actions'; import { State } from './reducer'; @@ -22,6 +23,7 @@ export const asyncData = { const errorMessage = 'Error fetching ETH/USD price'; errorFlasher.flashNewErrorMessage(dispatch, errorMessage); dispatch(actions.updateEthUsdPrice(BIG_NUMBER_ZERO)); + errorReporter.report(e); } }, fetchAvailableAssetDatasAndDispatchToStore: async (state: State, dispatch: Dispatch) => { @@ -36,6 +38,7 @@ export const asyncData = { errorFlasher.flashNewErrorMessage(dispatch, errorMessage); // On error, just specify that none are available dispatch(actions.setAvailableAssets([])); + errorReporter.report(e); } }, fetchAccountInfoAndDispatchToStore: async ( diff --git a/packages/instant/src/util/buy_quote_updater.ts b/packages/instant/src/util/buy_quote_updater.ts index 2fd16d781..6cb5e41b6 100644 --- a/packages/instant/src/util/buy_quote_updater.ts +++ b/packages/instant/src/util/buy_quote_updater.ts @@ -9,6 +9,7 @@ import { Action, actions } from '../redux/actions'; import { AffiliateInfo, ERC20Asset } from '../types'; import { assetUtils } from '../util/asset'; import { errorFlasher } from '../util/error_flasher'; +import { errorReporter } from '../util/error_reporter'; export const buyQuoteUpdater = { updateBuyQuoteAsync: async ( @@ -49,8 +50,9 @@ export const buyQuoteUpdater = { } else { throw error; } + } else { + errorReporter.report(error); } - // TODO: report to error reporter on else return; } diff --git a/packages/instant/src/util/gas_price_estimator.ts b/packages/instant/src/util/gas_price_estimator.ts index 6b15809a3..332c8d00a 100644 --- a/packages/instant/src/util/gas_price_estimator.ts +++ b/packages/instant/src/util/gas_price_estimator.ts @@ -7,6 +7,8 @@ import { GWEI_IN_WEI, } from '../constants'; +import { errorReporter } from './error_reporter'; + interface EthGasStationResult { average: number; fastestWait: number; @@ -42,8 +44,9 @@ export class GasPriceEstimator { let fetchedAmount: GasInfo | undefined; try { fetchedAmount = await fetchFastAmountInWeiAsync(); - } catch { + } catch (e) { fetchedAmount = undefined; + errorReporter.report(e); } if (fetchedAmount) { diff --git a/packages/instant/src/util/heap.ts b/packages/instant/src/util/heap.ts index 78ec3b3cc..10670b278 100644 --- a/packages/instant/src/util/heap.ts +++ b/packages/instant/src/util/heap.ts @@ -5,6 +5,7 @@ import * as _ from 'lodash'; import { HEAP_ANALYTICS_ID } from '../constants'; import { AnalyticsEventOptions, AnalyticsUserOptions } from './analytics'; +import { errorReporter } from './error_reporter'; export interface HeapAnalytics { loaded: boolean; @@ -105,8 +106,8 @@ export const heapUtil = { heapFunctionCall(curHeap); } catch (e) { // We never want analytics to crash our React component - // TODO(sk): error reporter here logUtils.log('Analytics error', e); + errorReporter.report(e); } } }, -- cgit v1.2.3 From d79c754a5bbc911856909b5d20079423e5e9c13f Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 20 Nov 2018 13:18:53 -0800 Subject: TODO note --- packages/instant/webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/instant/webpack.config.js b/packages/instant/webpack.config.js index e3ba59eb3..466385db9 100644 --- a/packages/instant/webpack.config.js +++ b/packages/instant/webpack.config.js @@ -52,7 +52,7 @@ const getRollbarPlugin = environmentName => { rollbarPublicPath = 'http://0x-instant-dogfood.s3-website-us-east-1.amazonaws.com'; } else if (environmentName === 'staging') { rollbarPublicPath = 'http://0x-instant-staging.s3-website-us-east-1.amazonaws.com'; - } + } // TODO(sk): When we decide on JS cdn, add public path here if (!rollbarPublicPath) { console.log('No rollbar public path'); -- cgit v1.2.3 From f5db4be52140e55045d6dc193065d83edeb85816 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 20 Nov 2018 13:19:16 -0800 Subject: Ensure we publish Instant with rollbar settings --- packages/monorepo-scripts/src/prepublish_checks.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/monorepo-scripts/src/prepublish_checks.ts b/packages/monorepo-scripts/src/prepublish_checks.ts index fc550cf3a..c1e2b702f 100644 --- a/packages/monorepo-scripts/src/prepublish_checks.ts +++ b/packages/monorepo-scripts/src/prepublish_checks.ts @@ -186,7 +186,11 @@ async function checkPublishRequiredSetupAsync(): Promise { const checkRequiredEnvVariables = () => { utils.log('Checking required environment variables...'); - const requiredEnvVars = ['INSTANT_HEAP_ANALYTICS_ID_PRODUCTION']; + const requiredEnvVars = [ + 'INSTANT_HEAP_ANALYTICS_ID_PRODUCTION', + 'INSTANT_ROLLBAR_CLIENT_TOKEN', + 'INSTANT_ROLLBAR_PUBLISH_TOKEN', + ]; requiredEnvVars.forEach(requiredEnvVarName => { if (_.isUndefined(process.env[requiredEnvVarName])) { throw new Error(`Must have ${requiredEnvVarName} set`); -- cgit v1.2.3 From 094aabfcee8828eb5c5ba452edda306ef04757ce Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 20 Nov 2018 13:28:28 -0800 Subject: Linting --- packages/instant/src/util/error_reporter.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/instant/src/util/error_reporter.ts b/packages/instant/src/util/error_reporter.ts index 81a90e7f5..a03b5e65e 100644 --- a/packages/instant/src/util/error_reporter.ts +++ b/packages/instant/src/util/error_reporter.ts @@ -49,7 +49,7 @@ if (ROLLBAR_CLIENT_TOKEN && ROLLBAR_ENVIRONMENT && shouldAllowRollbar()) { } export const setupRollbar = (): any => { - return rollbar as any; + return rollbar; }; export const errorReporter = { -- cgit v1.2.3 From 35b505114842b8c8eac838fff8588adf17f54b45 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 21 Nov 2018 09:23:19 -0800 Subject: Always report unexpected errors. Move error message generation into helper function, and add tests --- packages/instant/src/util/asset.ts | 17 +++++++++++++ packages/instant/src/util/buy_quote_updater.ts | 29 +++++++--------------- packages/instant/test/util/asset.test.ts | 33 ++++++++++++++++++++++++-- 3 files changed, 56 insertions(+), 23 deletions(-) (limited to 'packages') diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts index 40560d3eb..08f3642e3 100644 --- a/packages/instant/src/util/asset.ts +++ b/packages/instant/src/util/asset.ts @@ -1,3 +1,4 @@ +import { AssetBuyerError } from '@0x/asset-buyer'; import { AssetProxyId, ObjectMap } from '@0x/types'; import * as _ from 'lodash'; @@ -106,4 +107,20 @@ export const assetUtils = { ); return _.compact(erc20sOrUndefined); }, + assetBuyerErrorMessage: (asset: ERC20Asset, error: Error): string | undefined => { + if (error.message === AssetBuyerError.InsufficientAssetLiquidity) { + const assetName = assetUtils.bestNameForAsset(asset, 'of this asset'); + return `Not enough ${assetName} available`; + } else if (error.message === AssetBuyerError.InsufficientZrxLiquidity) { + return 'Not enough ZRX available'; + } else if ( + error.message === AssetBuyerError.StandardRelayerApiError || + error.message.startsWith(AssetBuyerError.AssetUnavailable) + ) { + const assetName = assetUtils.bestNameForAsset(asset, 'This asset'); + return `${assetName} is currently unavailable`; + } + + return undefined; + }, }; diff --git a/packages/instant/src/util/buy_quote_updater.ts b/packages/instant/src/util/buy_quote_updater.ts index 6cb5e41b6..4f97622e1 100644 --- a/packages/instant/src/util/buy_quote_updater.ts +++ b/packages/instant/src/util/buy_quote_updater.ts @@ -30,30 +30,17 @@ export const buyQuoteUpdater = { try { newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue, { feePercentage }); } catch (error) { - if (options.dispatchErrors) { - dispatch(actions.setQuoteRequestStateFailure()); - let errorMessage; - if (error.message === AssetBuyerError.InsufficientAssetLiquidity) { - const assetName = assetUtils.bestNameForAsset(asset, 'of this asset'); - errorMessage = `Not enough ${assetName} available`; - } else if (error.message === AssetBuyerError.InsufficientZrxLiquidity) { - errorMessage = 'Not enough ZRX available'; - } else if ( - error.message === AssetBuyerError.StandardRelayerApiError || - error.message.startsWith(AssetBuyerError.AssetUnavailable) - ) { - const assetName = assetUtils.bestNameForAsset(asset, 'This asset'); - errorMessage = `${assetName} is currently unavailable`; - } - if (!_.isUndefined(errorMessage)) { - errorFlasher.flashNewErrorMessage(dispatch, errorMessage); - } else { - throw error; - } - } else { + const errorMessage = assetUtils.assetBuyerErrorMessage(asset, error); + + if (_.isUndefined(errorMessage)) { + // This is an unknown error, report it to rollbar errorReporter.report(error); } + if (options.dispatchErrors) { + dispatch(actions.setQuoteRequestStateFailure()); + errorFlasher.flashNewErrorMessage(dispatch, errorMessage || 'Error fetching price, please try again'); + } return; } // We have a successful new buy quote diff --git a/packages/instant/test/util/asset.test.ts b/packages/instant/test/util/asset.test.ts index 4229b24ed..fc4e4e2e4 100644 --- a/packages/instant/test/util/asset.test.ts +++ b/packages/instant/test/util/asset.test.ts @@ -1,6 +1,7 @@ +import { AssetBuyerError } from '@0x/asset-buyer'; import { AssetProxyId, ObjectMap } from '@0x/types'; -import { Asset, AssetMetaData, ERC20AssetMetaData, Network, ZeroExInstantError } from '../../src/types'; +import { Asset, AssetMetaData, ERC20Asset, ERC20AssetMetaData, Network, ZeroExInstantError } from '../../src/types'; import { assetUtils } from '../../src/util/asset'; const ZRX_ASSET_DATA = '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498'; @@ -11,7 +12,7 @@ const ZRX_META_DATA: ERC20AssetMetaData = { decimals: 18, name: '0x', }; -const ZRX_ASSET: Asset = { +const ZRX_ASSET: ERC20Asset = { assetData: ZRX_ASSET_DATA, metaData: ZRX_META_DATA, }; @@ -45,4 +46,32 @@ describe('assetDataUtil', () => { ).toThrowError(ZeroExInstantError.AssetMetaDataNotAvailable); }); }); + describe('assetBuyerErrorMessage', () => { + it('should return message for InsufficientAssetLiquidity', () => { + const insufficientAssetError = new Error(AssetBuyerError.InsufficientAssetLiquidity); + expect(assetUtils.assetBuyerErrorMessage(ZRX_ASSET, insufficientAssetError)).toEqual( + 'Not enough ZRX available', + ); + }); + it('should return message for InsufficientAssetLiquidity', () => { + const insufficientZrxError = new Error(AssetBuyerError.InsufficientZrxLiquidity); + expect(assetUtils.assetBuyerErrorMessage(ZRX_ASSET, insufficientZrxError)).toEqual( + 'Not enough ZRX available', + ); + }); + it('should message for StandardRelayerApiError', () => { + const standardRelayerError = new Error(AssetBuyerError.StandardRelayerApiError); + expect(assetUtils.assetBuyerErrorMessage(ZRX_ASSET, standardRelayerError)).toEqual( + 'ZRX is currently unavailable', + ); + }); + it('should return error for AssetUnavailable error', () => { + const assetUnavailableError = new Error( + `${AssetBuyerError.AssetUnavailable}: For assetData ${ZRX_ASSET_DATA}`, + ); + expect(assetUtils.assetBuyerErrorMessage(ZRX_ASSET, assetUnavailableError)).toEqual( + 'ZRX is currently unavailable', + ); + }); + }); }); -- cgit v1.2.3 From 22a31246622e7139185d080cae9bef275087e245 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 21 Nov 2018 09:35:24 -0800 Subject: Move rollbar setup into function, move setting up into provider --- .../src/components/zero_ex_instant_container.tsx | 3 - .../src/components/zero_ex_instant_provider.tsx | 2 + packages/instant/src/util/error_reporter.ts | 66 +++++++++++----------- 3 files changed, 35 insertions(+), 36 deletions(-) (limited to 'packages') diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index 6d7cef7fd..47c938472 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -12,15 +12,12 @@ 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; } diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx index 9435d8c7c..00d3e95b2 100644 --- a/packages/instant/src/components/zero_ex_instant_provider.tsx +++ b/packages/instant/src/components/zero_ex_instant_provider.tsx @@ -15,11 +15,13 @@ import { AccountState, AffiliateInfo, AssetMetaData, Network, OrderSource } from import { analytics, disableAnalytics } from '../util/analytics'; import { assetUtils } from '../util/asset'; import { errorFlasher } from '../util/error_flasher'; +import { setupRollbar } from '../util/error_reporter'; import { gasPriceEstimator } from '../util/gas_price_estimator'; import { Heartbeater } from '../util/heartbeater'; import { generateAccountHeartbeater, generateBuyQuoteHeartbeater } from '../util/heartbeater_factory'; import { providerStateFactory } from '../util/provider_state_factory'; +setupRollbar(); fonts.include(); export type ZeroExInstantProviderProps = ZeroExInstantProviderRequiredProps & diff --git a/packages/instant/src/util/error_reporter.ts b/packages/instant/src/util/error_reporter.ts index a03b5e65e..c5766b469 100644 --- a/packages/instant/src/util/error_reporter.ts +++ b/packages/instant/src/util/error_reporter.ts @@ -1,4 +1,5 @@ import { logUtils } from '@0x/utils'; +import * as _ from 'lodash'; import { ROLLBAR_CLIENT_TOKEN, ROLLBAR_ENVIRONMENT } from '../constants'; @@ -15,41 +16,40 @@ const shouldAllowRollbar = () => { }; 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, +// Configures rollbar and sets up error catching +export const setupRollbar = (): any => { + if (_.isUndefined(rollbar) && 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; + 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 errorReporter = { -- cgit v1.2.3 From ffa2f4554b959b9af67d385d85fe9a4c822ad482 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 21 Nov 2018 09:41:44 -0800 Subject: Takeout redundant check, and make function name more clear --- packages/instant/webpack.config.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) (limited to 'packages') diff --git a/packages/instant/webpack.config.js b/packages/instant/webpack.config.js index 466385db9..b08fabedf 100644 --- a/packages/instant/webpack.config.js +++ b/packages/instant/webpack.config.js @@ -67,7 +67,7 @@ const getRollbarPlugin = environmentName => { return new RollbarSourceMapPlugin(rollbarPluginOptions); }; -const validateRollbar = (environmentName, rollbarPlugin) => { +const validateRollbarPresence = (environmentName, rollbarPlugin) => { const requiresRollbar = environmentName === 'dogfood' || environmentName === 'staging'; if (!requiresRollbar) { @@ -79,11 +79,9 @@ const validateRollbar = (environmentName, rollbarPlugin) => { } if (!rollbarPlugin) { - if (environmentName === 'dogfood' || environmentName === 'staging') { - throw new Error( - `Please set rollbar env var ${ROLLBAR_PUBLISH_TOKEN_ENV_NAME} to a Rollbar project access token with post_server_item permissions to deploy source maps to ${environmentName}`, - ); - } + throw new Error( + `Please set rollbar env var ${ROLLBAR_PUBLISH_TOKEN_ENV_NAME} to a Rollbar project access token with post_server_item permissions to deploy source maps to ${environmentName}`, + ); } }; @@ -111,7 +109,7 @@ module.exports = (env, argv) => { } else { console.log('Not using rollbar plugin'); } - validateRollbar(environmentName, rollbarPlugin); + validateRollbarPresence(environmentName, rollbarPlugin); const config = { entry: { -- cgit v1.2.3 From 70c99082496bbaed5b5ccc37bb259c0a9f02fab5 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 21 Nov 2018 09:43:01 -0800 Subject: Report when cant update balance --- packages/instant/src/redux/async_data.ts | 1 + 1 file changed, 1 insertion(+) (limited to 'packages') diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts index 29d441c75..5382494f2 100644 --- a/packages/instant/src/redux/async_data.ts +++ b/packages/instant/src/redux/async_data.ts @@ -78,6 +78,7 @@ export const asyncData = { const ethBalanceInWei = await web3Wrapper.getBalanceInWeiAsync(address); dispatch(actions.updateAccountEthBalance({ address, ethBalanceInWei })); } catch (e) { + errorReporter.report(e); // leave balance as is return; } -- cgit v1.2.3 From e2a16f3f336c6787501c6a2366e7793a135009f8 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 21 Nov 2018 10:25:10 -0800 Subject: Use ROLLBAR_ENABLED constant, and change ROLLBAR_ENVIRONMENT to INSTANT_ENVIRONMENT --- packages/instant/src/constants.ts | 3 ++- packages/instant/src/util/error_reporter.ts | 13 +++---------- packages/instant/webpack.config.js | 28 +++++++++++++++++----------- 3 files changed, 22 insertions(+), 22 deletions(-) (limited to 'packages') diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts index 23660360d..dfa7520f8 100644 --- a/packages/instant/src/constants.ts +++ b/packages/instant/src/constants.ts @@ -21,12 +21,13 @@ 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 +export const INSTANT_ENVIRONMENT = process.env.INSTANT_ENVIRONMENT as | 'dogfood' | 'staging' | 'development' | 'production' | undefined; +export const ROLLBAR_ENABLED = process.env.ROLLBAR_ENABLED; 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/'; diff --git a/packages/instant/src/util/error_reporter.ts b/packages/instant/src/util/error_reporter.ts index c5766b469..89c5b6bd3 100644 --- a/packages/instant/src/util/error_reporter.ts +++ b/packages/instant/src/util/error_reporter.ts @@ -1,24 +1,17 @@ import { logUtils } from '@0x/utils'; import * as _ from 'lodash'; -import { ROLLBAR_CLIENT_TOKEN, ROLLBAR_ENVIRONMENT } from '../constants'; +import { INSTANT_ENVIRONMENT, ROLLBAR_CLIENT_TOKEN, ROLLBAR_ENABLED } 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; // Configures rollbar and sets up error catching export const setupRollbar = (): any => { - if (_.isUndefined(rollbar) && ROLLBAR_CLIENT_TOKEN && ROLLBAR_ENVIRONMENT && shouldAllowRollbar()) { + if (_.isUndefined(rollbar) && ROLLBAR_CLIENT_TOKEN && INSTANT_ENVIRONMENT && ROLLBAR_ENABLED) { rollbar = new Rollbar({ accessToken: ROLLBAR_CLIENT_TOKEN, captureUncaught: true, @@ -27,7 +20,7 @@ export const setupRollbar = (): any => { itemsPerMinute: 10, maxItems: 500, payload: { - environment: ROLLBAR_ENVIRONMENT, + environment: INSTANT_ENVIRONMENT, client: { javascript: { source_map_enabled: true, diff --git a/packages/instant/webpack.config.js b/packages/instant/webpack.config.js index b08fabedf..defdde250 100644 --- a/packages/instant/webpack.config.js +++ b/packages/instant/webpack.config.js @@ -89,25 +89,31 @@ module.exports = (env, argv) => { const environmentName = getEnvironmentName(env, argv); const outputPath = process.env.WEBPACK_OUTPUT_PATH || 'umd'; + const envVars = { + GIT_SHA: JSON.stringify(GIT_SHA), + NPM_PACKAGE_VERSION: JSON.stringify(process.env.npm_package_version), + HEAP_ANALYTICS_ID: getHeapAnalyticsId(environmentName), + INSTANT_ENVIRONMENT: JSON.stringify(environmentName), + ROLLBAR_CLIENT_TOKEN: JSON.stringify(process.env[ROLLBAR_CLIENT_TOKEN_ENV_NAME]), + }; + + const canRollbarBeEnabled = + environmentName === 'development' ? process.env.INSTANT_ROLLBAR_FORCE_DEVELOPMENT_REPORT : true; + if (envVars.INSTANT_ENVIRONMENT && envVars.ROLLBAR_CLIENT_TOKEN && canRollbarBeEnabled) { + envVars['ROLLBAR_ENABLED'] = JSON.stringify(true); + } + let plugins = [ new webpack.DefinePlugin({ - 'process.env': { - GIT_SHA: JSON.stringify(GIT_SHA), - NPM_PACKAGE_VERSION: JSON.stringify(process.env.npm_package_version), - HEAP_ANALYTICS_ID: getHeapAnalyticsId(environmentName), - ROLLBAR_ENVIRONMENT: JSON.stringify(environmentName), - ROLLBAR_CLIENT_TOKEN: JSON.stringify(process.env[ROLLBAR_CLIENT_TOKEN_ENV_NAME]), - ROLLBAR_FORCE_DEVELOPMENT_REPORT: JSON.stringify(process.env.INSTANT_ROLLBAR_FORCE_DEVELOPMENT_REPORT), - }, + 'process.env': envVars, }), ]; - const rollbarPlugin = getRollbarPlugin(environmentName); if (rollbarPlugin) { - console.log('Using rollbar plugin'); + console.log('Using rollbar source map plugin'); plugins = plugins.concat(rollbarPlugin); } else { - console.log('Not using rollbar plugin'); + console.log('Not using rollbar source map plugin'); } validateRollbarPresence(environmentName, rollbarPlugin); -- cgit v1.2.3 From 95a80a0e757647f84515e7bc7208f18b875d4111 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 21 Nov 2018 10:35:53 -0800 Subject: Shorter validateRollbarPresence logic --- packages/instant/webpack.config.js | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) (limited to 'packages') diff --git a/packages/instant/webpack.config.js b/packages/instant/webpack.config.js index defdde250..adc1cb000 100644 --- a/packages/instant/webpack.config.js +++ b/packages/instant/webpack.config.js @@ -66,21 +66,14 @@ const getRollbarPlugin = environmentName => { }; return new RollbarSourceMapPlugin(rollbarPluginOptions); }; - -const validateRollbarPresence = (environmentName, rollbarPlugin) => { +const validateRollbarPresence = (environmentName, rollbarEnabled, rollbarSourceMapPlugin) => { const requiresRollbar = environmentName === 'dogfood' || environmentName === 'staging'; - if (!requiresRollbar) { return; } - - if (!process.env[ROLLBAR_CLIENT_TOKEN_ENV_NAME]) { - throw new Error(`${ROLLBAR_CLIENT_TOKEN_ENV_NAME} must be set for ${environmentName}`); - } - - if (!rollbarPlugin) { + if (!rollbarEnabled || !rollbarSourceMapPlugin) { throw new Error( - `Please set rollbar env var ${ROLLBAR_PUBLISH_TOKEN_ENV_NAME} to a Rollbar project access token with post_server_item permissions to deploy source maps to ${environmentName}`, + `Rollbar env vars must be set to build for ${environmentName}. Please set ${ROLLBAR_CLIENT_TOKEN_ENV_NAME} to a rollbar access token with post_client_item permissions, and ${ROLLBAR_PUBLISH_TOKEN_ENV_NAME} to a rollbar access token with post_server_item permissions.`, ); } }; @@ -115,7 +108,7 @@ module.exports = (env, argv) => { } else { console.log('Not using rollbar source map plugin'); } - validateRollbarPresence(environmentName, rollbarPlugin); + validateRollbarPresence(environmentName, envVars['ROLLBAR_ENABLED'], rollbarPlugin); const config = { entry: { -- cgit v1.2.3 From b2e1be5cfe373f7cdafd5bd9a0c3ec1ea1e5f1d5 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 21 Nov 2018 10:44:50 -0800 Subject: Better env var names for source map plugin --- packages/instant/webpack.config.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'packages') diff --git a/packages/instant/webpack.config.js b/packages/instant/webpack.config.js index adc1cb000..7149793c4 100644 --- a/packages/instant/webpack.config.js +++ b/packages/instant/webpack.config.js @@ -37,7 +37,7 @@ const getHeapAnalyticsId = environmentName => { const ROLLBAR_PUBLISH_TOKEN_ENV_NAME = 'INSTANT_ROLLBAR_PUBLISH_TOKEN'; const ROLLBAR_CLIENT_TOKEN_ENV_NAME = 'INSTANT_ROLLBAR_CLIENT_TOKEN'; -const getRollbarPlugin = environmentName => { +const getRollbarSourceMapPlugin = environmentName => { if (!environmentName) { return undefined; } @@ -101,14 +101,14 @@ module.exports = (env, argv) => { 'process.env': envVars, }), ]; - const rollbarPlugin = getRollbarPlugin(environmentName); - if (rollbarPlugin) { + const rollbarSourceMapPlugin = getRollbarSourceMapPlugin(environmentName); + if (rollbarSourceMapPlugin) { console.log('Using rollbar source map plugin'); - plugins = plugins.concat(rollbarPlugin); + plugins = plugins.concat(rollbarSourceMapPlugin); } else { console.log('Not using rollbar source map plugin'); } - validateRollbarPresence(environmentName, envVars['ROLLBAR_ENABLED'], rollbarPlugin); + validateRollbarPresence(environmentName, envVars['ROLLBAR_ENABLED'], rollbarSourceMapPlugin); const config = { entry: { -- cgit v1.2.3 From 93672c01afd19f07daa89934fc8d29caefbec2f6 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 21 Nov 2018 10:54:10 -0800 Subject: Linting --- packages/instant/src/util/buy_quote_updater.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/instant/src/util/buy_quote_updater.ts b/packages/instant/src/util/buy_quote_updater.ts index 4f97622e1..172b50d2a 100644 --- a/packages/instant/src/util/buy_quote_updater.ts +++ b/packages/instant/src/util/buy_quote_updater.ts @@ -1,4 +1,4 @@ -import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer'; +import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; import { BigNumber } from '@0x/utils'; import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; -- cgit v1.2.3 From c6ae7b8d3f720f637db2d5ec9abee14cc00fb7a7 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Wed, 21 Nov 2018 13:19:26 -0800 Subject: Host whitelist so we don't get errors from embedded site --- packages/instant/src/constants.ts | 9 +++++++++ packages/instant/src/util/error_reporter.ts | 3 ++- 2 files changed, 11 insertions(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts index dfa7520f8..eb785bc2b 100644 --- a/packages/instant/src/constants.ts +++ b/packages/instant/src/constants.ts @@ -20,6 +20,15 @@ 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 EMBEDDED_DOMAINS = [ + '0x-instant-staging.s3-website-us-east-1.amazonaws.com', + '0x-instant-dogfood.s3-website-us-east-1.amazonaws.com', + 'localhost', + '127.0.0.1', + '0.0.0.0', + 'unpkg.com', + 'jsdelivr.com', +]; export const ROLLBAR_CLIENT_TOKEN = process.env.ROLLBAR_CLIENT_TOKEN; export const INSTANT_ENVIRONMENT = process.env.INSTANT_ENVIRONMENT as | 'dogfood' diff --git a/packages/instant/src/util/error_reporter.ts b/packages/instant/src/util/error_reporter.ts index 89c5b6bd3..c0ef3e30e 100644 --- a/packages/instant/src/util/error_reporter.ts +++ b/packages/instant/src/util/error_reporter.ts @@ -1,7 +1,7 @@ import { logUtils } from '@0x/utils'; import * as _ from 'lodash'; -import { INSTANT_ENVIRONMENT, ROLLBAR_CLIENT_TOKEN, ROLLBAR_ENABLED } from '../constants'; +import { EMBEDDED_DOMAINS, INSTANT_ENVIRONMENT, ROLLBAR_CLIENT_TOKEN, ROLLBAR_ENABLED } from '../constants'; // Import version of Rollbar designed for embedded components // See https://docs.rollbar.com/docs/using-rollbarjs-inside-an-embedded-component @@ -29,6 +29,7 @@ export const setupRollbar = (): any => { }, }, }, + hostWhiteList: EMBEDDED_DOMAINS, uncaughtErrorLevel: 'error', ignoredMessages: [ // Errors from the third-party scripts -- cgit v1.2.3 From 717a3bce8cd0d4cb782918b3ad806f6c1bdb825e Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 26 Nov 2018 09:12:51 -0800 Subject: EMBEDDED_DOMAINS -> HOST_DOMAINS --- packages/instant/src/constants.ts | 2 +- packages/instant/src/util/error_reporter.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'packages') diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts index eb785bc2b..677510a8b 100644 --- a/packages/instant/src/constants.ts +++ b/packages/instant/src/constants.ts @@ -20,7 +20,7 @@ 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 EMBEDDED_DOMAINS = [ +export const HOST_DOMAINS = [ '0x-instant-staging.s3-website-us-east-1.amazonaws.com', '0x-instant-dogfood.s3-website-us-east-1.amazonaws.com', 'localhost', diff --git a/packages/instant/src/util/error_reporter.ts b/packages/instant/src/util/error_reporter.ts index c0ef3e30e..8e21c8881 100644 --- a/packages/instant/src/util/error_reporter.ts +++ b/packages/instant/src/util/error_reporter.ts @@ -1,7 +1,7 @@ import { logUtils } from '@0x/utils'; import * as _ from 'lodash'; -import { EMBEDDED_DOMAINS, INSTANT_ENVIRONMENT, ROLLBAR_CLIENT_TOKEN, ROLLBAR_ENABLED } from '../constants'; +import { HOST_DOMAINS, INSTANT_ENVIRONMENT, ROLLBAR_CLIENT_TOKEN, ROLLBAR_ENABLED } from '../constants'; // Import version of Rollbar designed for embedded components // See https://docs.rollbar.com/docs/using-rollbarjs-inside-an-embedded-component @@ -29,7 +29,7 @@ export const setupRollbar = (): any => { }, }, }, - hostWhiteList: EMBEDDED_DOMAINS, + hostWhiteList: HOST_DOMAINS, uncaughtErrorLevel: 'error', ignoredMessages: [ // Errors from the third-party scripts -- cgit v1.2.3 From 7a726e2740b8cbc885229ed377ef5fc89502301d Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Mon, 26 Nov 2018 23:39:34 -0800 Subject: feat(website): scaffolding for instant page --- packages/website/ts/containers/instant.ts | 27 +++++++++++++++++++++++++++ packages/website/ts/index.tsx | 2 ++ packages/website/ts/pages/instant/instant.tsx | 12 ++++++++++++ packages/website/ts/types.ts | 1 + 4 files changed, 42 insertions(+) create mode 100644 packages/website/ts/containers/instant.ts create mode 100644 packages/website/ts/pages/instant/instant.tsx (limited to 'packages') diff --git a/packages/website/ts/containers/instant.ts b/packages/website/ts/containers/instant.ts new file mode 100644 index 000000000..9bcfb903b --- /dev/null +++ b/packages/website/ts/containers/instant.ts @@ -0,0 +1,27 @@ +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; +import { Instant as InstantComponent, InstantProps } from 'ts/pages/instant/instant'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { State } from 'ts/redux/reducer'; +import { Translate } from 'ts/utils/translate'; + +interface ConnectedState { + translate: Translate; +} + +interface ConnectedDispatch { + dispatcher: Dispatcher; +} + +const mapStateToProps = (state: State, _ownProps: InstantProps): ConnectedState => ({ + translate: state.translate, +}); + +const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), +}); + +export const Instant: React.ComponentClass = connect(mapStateToProps, mapDispatchToProps)( + InstantComponent, +); diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index faf7d8c87..050c201a3 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -7,6 +7,7 @@ import { MetaTags } from 'ts/components/meta_tags'; import { About } from 'ts/containers/about'; import { DocsHome } from 'ts/containers/docs_home'; import { FAQ } from 'ts/containers/faq'; +import { Instant } from 'ts/containers/instant'; import { Jobs } from 'ts/containers/jobs'; import { Landing } from 'ts/containers/landing'; import { LaunchKit } from 'ts/containers/launch_kit'; @@ -92,6 +93,7 @@ render( + diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx new file mode 100644 index 000000000..0ecf39254 --- /dev/null +++ b/packages/website/ts/pages/instant/instant.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; + +import { Dispatcher } from 'ts/redux/dispatcher'; +import { Translate } from 'ts/utils/translate'; + +export interface InstantProps { + location: Location; + translate: Translate; + dispatcher: Dispatcher; +} + +export const Instant: React.StatelessComponent = () =>
; diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 89c477085..9c4b8a018 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -353,6 +353,7 @@ export enum WebsitePaths { FAQ = '/faq', About = '/about', LaunchKit = '/launch-kit', + Instant = '/instant', Whitepaper = '/pdfs/0x_white_paper.pdf', SmartContracts = '/docs/contracts', Connect = '/docs/connect', -- cgit v1.2.3 From f83c4c51c7bf4319da2833f4068e5804476be2a2 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Mon, 26 Nov 2018 23:55:01 -0800 Subject: feat(website): add header and footer to instant page --- packages/website/ts/pages/instant/instant.tsx | 47 ++++++++++++++++++++++++++- 1 file changed, 46 insertions(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx index 0ecf39254..ae91d7094 100644 --- a/packages/website/ts/pages/instant/instant.tsx +++ b/packages/website/ts/pages/instant/instant.tsx @@ -1,12 +1,57 @@ +import * as _ from 'lodash'; import * as React from 'react'; +import * as DocumentTitle from 'react-document-title'; +import { Footer } from 'ts/components/footer'; +import { MetaTags } from 'ts/components/meta_tags'; +import { TopBar } from 'ts/components/top_bar/top_bar'; +import { Container } from 'ts/components/ui/container'; import { Dispatcher } from 'ts/redux/dispatcher'; +import { ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; +import { utils } from 'ts/utils/utils'; export interface InstantProps { location: Location; translate: Translate; dispatcher: Dispatcher; + screenWidth: ScreenWidths; } -export const Instant: React.StatelessComponent = () =>
; +export interface InstantState {} + +const THROTTLE_TIMEOUT = 100; +const DOCUMENT_TITLE = 'Instant'; +const DOCUMENT_DESCRIPTION = 'Instant'; + +export class Instant extends React.Component { + // TODO: consolidate this small screen scaffolding into one place (its being used in portal and docs as well) + private readonly _throttledScreenWidthUpdate: () => void; + public constructor(props: InstantProps) { + super(props); + this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); + } + public componentDidMount(): void { + window.addEventListener('resize', this._throttledScreenWidthUpdate); + window.scrollTo(0, 0); + } + public render(): React.ReactNode { + return ( + + + + +