New: Server Side UI Filtering, Error Boundaries (#501)

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>

frontend/src/Store/Middleware/createSentryMiddleware.js

@@ -0,0 +1,91 @@
+import _ from 'lodash';
+import * as sentry from '@sentry/browser';
+import parseUrl from 'Utilities/String/parseUrl';
+
+function cleanseUrl(url) {
+  const properties = parseUrl(url);
+
+  return `${properties.pathname}${properties.search}`;
+}
+
+function cleanseData(data) {
+  const result = _.cloneDeep(data);
+
+  result.transaction = cleanseUrl(result.transaction);
+
+  if (result.exception) {
+    result.exception.values.forEach((exception) => {
+      const stacktrace = exception.stacktrace;
+
+      if (stacktrace) {
+        stacktrace.frames.forEach((frame) => {
+          frame.filename = cleanseUrl(frame.filename);
+        });
+      }
+    });
+  }
+
+  result.request.url = cleanseUrl(result.request.url);
+
+  return result;
+}
+
+function identity(stuff) {
+  return stuff;
+}
+
+function createMiddleware() {
+  return (store) => (next) => (action) => {
+    try {
+      // Adds a breadcrumb for reporting later (if necessary).
+      sentry.addBreadcrumb({
+        category: 'redux',
+        message: action.type
+      });
+
+      return next(action);
+    } catch (err) {
+      console.error(`[sentry] Reporting error to Sentry: ${err}`);
+
+      // Send the report including breadcrumbs.
+      sentry.captureException(err, {
+        extra: {
+          action: identity(action),
+          state: identity(store.getState())
+        }
+      });
+    }
+  };
+}
+
+export default function createSentryMiddleware() {
+  const {
+    analytics,
+    branch,
+    version,
+    release,
+    isProduction
+  } = window.Lidarr;
+
+  if (!analytics) {
+    return;
+  }
+
+  const dsn = isProduction ? 'https://c3a5b33e08de4e18b7d0505e942dbc95@sentry.io/216290' :
+    'https://baede6f14da54cf48ff431479e400adf@sentry.io/1249427';
+
+  sentry.init({
+    dsn,
+    environment: isProduction ? 'production' : 'development',
+    release,
+    sendDefaultPii: true,
+    beforeSend: cleanseData
+  });
+
+  sentry.configureScope((scope) => {
+    scope.setTag('branch', branch);
+    scope.setTag('version', version);
+  });
+
+  return createMiddleware();
+}

frontend/src/Store/Middleware/middlewares.js

@@ -1,15 +1,15 @@
 import { applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
 import { routerMiddleware } from 'react-router-redux';
-import sentryMiddleware from './sentryMiddleware';
+import createSentryMiddleware from './createSentryMiddleware';
 import persistState from './persistState';
 
 export default function(history) {
   const middlewares = [];
-  const ravenMiddleware = sentryMiddleware();
+  const sentryMiddleware = createSentryMiddleware();
 
-  if (ravenMiddleware) {
-    middlewares.push(ravenMiddleware);
+  if (sentryMiddleware) {
+    middlewares.push(sentryMiddleware);
   }
 
   middlewares.push(routerMiddleware(history));

frontend/src/Store/Middleware/sentryMiddleware.js

@@ -1,51 +0,0 @@
-import _ from 'lodash';
-import Raven from 'raven-js';
-import createRavenMiddleware from 'raven-for-redux';
-import parseUrl from 'Utilities/String/parseUrl';
-
-function cleanseUrl(url) {
-  const properties = parseUrl(url);
-
-  return `${properties.pathname}${properties.search}`;
-}
-
-function cleanseData(data) {
-  const result = _.cloneDeep(data);
-
-  result.culprit = cleanseUrl(result.culprit);
-  result.request.url = cleanseUrl(result.request.url);
-
-  return result;
-}
-
-export default function sentryMiddleware() {
-  const {
-    analytics,
-    branch,
-    version,
-    release,
-    isProduction
-  } = window.Lidarr;
-
-  if (!analytics) {
-    return;
-  }
-
-  const dsn = isProduction ? 'https://c3a5b33e08de4e18b7d0505e942dbc95@sentry.io/216290' :
-    'https://baede6f14da54cf48ff431479e400adf@sentry.io/1249427';
-
-  Raven.config(
-    dsn,
-    {
-      environment: isProduction ? 'production' : 'development',
-      release,
-      tags: {
-        branch,
-        version
-      },
-      dataCallback: cleanseData
-    }
-  ).install();
-
-  return createRavenMiddleware(Raven);
-}