Adding sentry (#327)

quran · mmahalwy · Jul 10, 2016 · May 22, 2016 · May 22, 2016 · May 24, 2016
commit c233869ab28d61f18698d609ff752c6d0adbb4f8
diff --git a/.env b/.env
@@ -2,3 +2,5 @@ NODE_ENV=development
 PORT=8000
 API_URL=http://quran.com:3000
 SEGMENTS_KEY=
+SENTRY_KEY_CLIENT=
+SENTRY_KEY_SERVER=
diff --git a/Dockerfile b/Dockerfile
@@ -2,6 +2,8 @@ FROM node:5.10.0
 
 ENV NODE_ENV production
 ENV API_URL http://api.quran.com:3000
+ENV SENTRY_KEY_CLIENT https://44c105328ae544ae9928f9eb74b40061@app.getsentry.com/80639
+ENV SENTRY_KEY_SERVER https://44c105328ae544ae9928f9eb74b40061:41ca814d33124e04ab450104c3938cb1@app.getsentry.com/80639
 ENV PORT 8000
 
 RUN apt-get -y update && apt-get -y install supervisor ssh rsync

diff --git a/client.js b/client.js
@@ -15,6 +15,7 @@ import { syncHistoryWithStore } from 'react-router-redux';
 
 import debug from 'debug';
 
+import config from 'config';
 import ApiClient from './src/helpers/ApiClient';
 import createStore from './src/redux/create';
 import routes from './src/routes';
@@ -23,6 +24,8 @@ const client = new ApiClient();
 const store = createStore(browserHistory, client, window.__data);
 const history = syncHistoryWithStore(browserHistory, store);
 
+Raven.config(config.sentryClient).install()
+
 window.quranDebug = debug;
 window.ReactDOM = ReactDOM; // For chrome dev tool support
 

diff --git a/package.json b/package.json
@@ -75,6 +75,7 @@
     "promise": "^7.0.4",
     "proxy-middleware": "^0.14.0",
     "qs": "^6.1.0",
+    "raven": "^0.11.0",
     "raw-loader": "^0.5.1",
     "react": "^0.14.8",
     "react-bootstrap": "^0.28.4",

diff --git a/server.js b/server.js
@@ -7,12 +7,15 @@ import { ReduxAsyncConnect, loadOnServer } from 'redux-connect';
 import createHistory from 'react-router/lib/createMemoryHistory';
 import { Provider } from 'react-redux';
 import cookie from 'react-cookie';
+import raven from 'raven';
+import errorhandler from 'errorhandler';
 
-
+import config from 'config';
 import expressConfig from 'server/config/express';
 
 const pretty = new PrettyError();
 const server = express();
+
 expressConfig(server);
 
 import routes from './src/routes';
@@ -26,6 +29,7 @@ import { setUserAgent } from './src/redux/modules/audioplayer';
 import { setOption } from './src/redux/modules/options';
 
 // Use varnish for the static routes, which will cache too
+server.use(raven.middleware.express.requestHandler(config.sentryServer));
 
 server.use((req, res, next) => {
   cookie.plugToRequest(req, res);
@@ -59,28 +63,40 @@ server.use((req, res, next) => {
       res.status(500).send(error);
     } else if (renderProps) {
       loadOnServer({...renderProps, store, helpers: { client }}).then(() => {
-        const component = ReactDOM.renderToString(
+        const component = (
           <Provider store={store}>
             <ReduxAsyncConnect {...renderProps} />
           </Provider>
         );
 
-        debug('Server', 'Rendering Application component into html');
-        debug('Server', 'Sending markup');
         res.type('html');
         res.setHeader('Cache-Control', 'public, max-age=31557600');
-        res.status(200).send('<!doctype html>\n' + ReactDOM.renderToString(
+        res.status(200);
+        debug('Server', 'Sending markup');
+        res.send('<!doctype html>\n' + ReactDOM.renderToString(
           <Html
             component={component}
             store={store}
             assets={webpack_isomorphic_tools.assets()}
           />
         ));
-      });
+      }).catch(next);
     }
   });
 });
 
+server.use(raven.middleware.express.errorHandler(config.sentryServer));
+
+if (process.env.NODE_ENV === 'development') {
+  // only use in development
+  server.use(errorhandler());
+} else {
+  server.use((req, res) => {
+    res.status(500);
+    res.send('OOPS');
+  });
+}
+
 const port = process.env.PORT || 8000;
 
 export default function serve(cb) {
@@ -90,6 +106,7 @@ export default function serve(cb) {
       ==> ✅  Server is listening at http://localhost:${port}
       ==> 🎯  API at ${process.env.API_URL}
     `);
+    Object.keys(config).forEach(key => config[key].constructor.name !== 'Object' && console.info(`==> ${key}`, config[key]));
 
     cb && cb(this);
   });

diff --git a/server/config/express.js b/server/config/express.js
@@ -4,7 +4,6 @@ import compression from 'compression';
 import bodyParser from 'body-parser';
 import logger from 'morgan';
 import favicon from 'serve-favicon';
-import errorhandler from 'errorhandler';
 import useragent from 'express-useragent';
 import cookieParser from 'cookie-parser';
 import cors from 'cors';
@@ -55,6 +54,4 @@ export default function(server) {
   server.use('/api', (req, res) => {
     proxyApi.web(req, res);
   });
-
-  // server.use(errorhandler()); // Must be last!
 }
diff --git a/src/config.js b/src/config.js
@@ -14,6 +14,8 @@ module.exports = Object.assign({
   host: process.env.HOST || 'localhost',
   port: process.env.PORT,
   api: process.env.API_URL,
+  sentryClient: process.env.SENTRY_KEY_CLIENT,
+  sentryServer: process.env.SENTRY_KEY_SERVER,
   app: {
     head: {
       titleTemplate: `%s - ${title}`,

diff --git a/src/helpers/Html.js b/src/helpers/Html.js
@@ -1,12 +1,13 @@
 import React from 'react';
+import ReactDOM from 'react-dom/server';
 import Helmet from 'react-helmet';
 import serialize from 'serialize-javascript';
 
 class Html extends React.Component {
   render() {
     const { store, component, assets } = this.props;
+    const content = component ? ReactDOM.renderToString(component) : '';
     const head = Helmet.rewind();
-    console.log(assets.styles);
 
     return (
       <html>
@@ -33,7 +34,7 @@ class Html extends React.Component {
           <style id="fonts" />
         </head>
         <body>
-            <div id="app" dangerouslySetInnerHTML={{__html: component}} />
+            <div id="app" dangerouslySetInnerHTML={{__html: content}} />
 
             <script
               dangerouslySetInnerHTML={{
@@ -79,6 +80,7 @@ class Html extends React.Component {
               }`
             }} />
             <script dangerouslySetInnerHTML={{__html: `window.__data=${serialize(store.getState())};`}} charSet="UTF-8"/>
+            <script src="https://cdn.ravenjs.com/3.0.4/raven.min.js" />
             {Object.keys(assets.javascript).map((script, i) =>
               <script src={assets.javascript[script]} key={i}/>
             )}

diff --git a/webpack/dev.config.js b/webpack/dev.config.js
@@ -70,6 +70,8 @@ module.exports = {
       'process.env.BROWSER': true,
       'process.env.API_URL': JSON.stringify(process.env.API_URL),
       'process.env.SEGMENTS_KEY': JSON.stringify(process.env.SEGMENTS_KEY),
+      'process.env.SENTRY_KEY_CLIENT': JSON.stringify(process.env.SENTRY_KEY_CLIENT),
+      'process.env.SENTRY_KEY_SERVER': JSON.stringify(process.env.SENTRY_KEY_SERVER),
       __SERVER__: false,
       __CLIENT__: true,
       __DEVELOPMENT__: true,

diff --git a/webpack/prod.config.js b/webpack/prod.config.js
@@ -79,6 +79,8 @@ module.exports = {
       'process.env.BROWSER': true,
       'process.env.API_URL': JSON.stringify(process.env.API_URL),
       'process.env.SEGMENTS_KEY': JSON.stringify(process.env.SEGMENTS_KEY),
+      'process.env.SENTRY_KEY_CLIENT': JSON.stringify(process.env.SENTRY_KEY_CLIENT),
+      'process.env.SENTRY_KEY_SERVER': JSON.stringify(process.env.SENTRY_KEY_SERVER),
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
       __SERVER__: false,
       __CLIENT__: true,