Add Sentry integration to the browser application

package.json

@@ -36,7 +36,8 @@
     "sharetribe-scripts": "0.9.2",
     "sharetribe-sdk": "git+ssh://git@github.com/sharetribe/sharetribe-sdk-js#e2fe4c3be061bfbefdb2db1fa5ed2a8a5d4d4ffe",
     "source-map-support": "^0.4.15",
-    "url": "^0.11.0"
+    "url": "^0.11.0",
+    "raven-js": "^3.6.0"
   },
   "devDependencies": {
     "enzyme": "^2.8.0",

src/config.js

@@ -11,6 +11,8 @@ const sdkBaseUrl = process.env.REACT_APP_SHARETRIBE_SDK_BASE_URL || 'http://loca
 
 const currency = process.env.REACT_APP_SHARETRIBE_MARKETPLACE_CURRENCY || 'USD';
 
+const sentryDsn = process.env.REACT_APP_PUBLIC_SENTRY_DSN;
+
 // Currency formatting options.
 // See: https://github.com/yahoo/react-intl/wiki/API#formatnumber
 //
@@ -209,6 +211,7 @@ const config = {
   siteTitle,
   siteTwitterHandle,
   facebookAppId,
+  sentryDsn,
 };
 
 export default config;

src/index.js

@@ -23,6 +23,7 @@ import config from './config';
 import { authInfo } from './ducks/Auth.duck';
 import { fetchCurrentUser } from './ducks/user.duck';
 import routeConfiguration from './routesConfiguration';
+import * as log from './util/log';
 
 import './marketplaceIndex.css';
 
@@ -73,6 +74,7 @@ if (typeof window !== 'undefined') {
 
   setupStripe();
   render(store);
+  log.setup(config.sentryDsn);
 
   if (config.dev) {
     // Expose stuff for the browser REPL

src/util/log.js

@@ -0,0 +1,58 @@
+/**
+ * Error logging
+ *
+ * Can be used to log errors to console or and eternal
+ * error logging system, like Sentry for example.
+ *
+ */
+
+import Raven from 'raven-js';
+
+/**
+ * Set up error handling. If a Sentry DSN is
+ * provided a Sentry client will be installed.
+ *
+ * @param {String} sentryDsn A public Sentry DSN
+ */
+export const setup = sentryDsn => {
+  if (sentryDsn !== undefined) {
+    Raven.config(sentryDsn).install();
+  }
+};
+
+/**
+ * Set user ID for the logger so that it
+ * can be attached to Sentry issues.
+ *
+ * @param {String} userId ID of current user
+ */
+export const setUserId = userId => {
+  if (Raven.isSetup()) {
+    Raven.setUserContext({ id: userId });
+  }
+};
+
+/**
+ * Clears the user ID.
+ */
+export const clearUserId = () => {
+  if (Raven.isSetup()) {
+    Raven.setUserContext();
+  }
+};
+
+/**
+ * Logs an execption. If Sentry is configured
+ * sends the error information there. Otherwise
+ * prints the error to the console.
+ *
+ * @param {Error} e Error that occurred
+ * @param {Object} data Additional data to be sent to Sentry
+ */
+export const error = (e, data) => {
+  if (Raven.isSetup()) {
+    Raven.captureException(e, { extra: data });
+  } else {
+    console.error(e); // eslint-disable-line
+  }
+};

yarn.lock

@@ -5469,6 +5469,10 @@ 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.6.0:
+  version "3.17.0"
+  resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.17.0.tgz#779457ac7910512c3c2cc9bb6d0a9eeb59a969ec"
+
 rc@^1.0.1, rc@~1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.6.tgz#43651b76b6ae53b5c802f1151fa3fc3b059969c9"