Add telemetry

.env

@@ -2,5 +2,6 @@ EXTEND_ESLINT=true
 REACT_APP_SIGNALHUB_URLS='localhost:8080'
 REACT_APP_REMOTE_WEBRTC=false
 REACT_APP_VERSION=0.16
+# REACT_APP_LOG_ENDPOINT
 # REACT_APP_STUN_URLS
 # REACT_APP_TURN_URLS

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "start": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` react-scripts start",
     "build": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` react-scripts build",
+    "start-with-log-server": " node server/metric.js & REACT_APP_LOG_ENDPOINT='http://localhost:3010/logs' npm run start",
     "test": "npm run lint && concurrently -k -s first \"signalhubws -p 8080\" \"karma start\"",
     "test:browserstack:prod": "wdio test/E2E/conf/prod.conf.js --suite e2e",
     "test:browserstack:local": "concurrently -k -s first \"npm run start\" \"wdio test/E2E/conf/local-browserstack.conf.js --suite e2e\"",
@@ -101,6 +102,7 @@
     "react-app-polyfill": "^1.0.2",
     "sinon": "^7.3.2",
     "wdio-chromedriver-service": "^5.0.2",
-    "webpack-cli": "^3.2.3"
+    "webpack-cli": "^3.2.3",
+    "cors": "^2.8.5"
   }
 }

server/metric.js

@@ -0,0 +1,42 @@
+const express = require('express')
+const cors = require('cors')
+
+const app = express()
+const port = 3010
+const maxBodySize = 150
+const allowedOrigins = [
+  'http://localhost:3000',
+  'https://masq.qwant.com']
+
+const authorizedEvents = [
+  'click_selectUser',
+  'click_handleOpenSignup'
+]
+
+const authorizedLog = (log) => {
+  if (log.type && authorizedEvents.includes(log.type)) { return true }
+  return false
+}
+
+app.use(cors({
+  origin: function (origin, callback) { // allow requests with no origin
+    // (like mobile apps or curl requests)
+    if (!origin) return callback(null, true); if (allowedOrigins.indexOf(origin) === -1) {
+      const msg = 'The CORS policy for this site does not allow access from the specified Origin.'
+      return callback(new Error(msg), false)
+    } return callback(null, true)
+  }
+}))
+
+app.listen(port, () => console.log(`Masq app listening on port ${port}!`))
+
+app.post('/logs',
+  express.json({ strict: true, limit: maxBodySize }),
+  (req, res) => {
+    console.log(req.body.log)
+    if (authorizedLog(req.body.log)) {
+      res.json(req.body)
+    } else {
+      res.sendStatus(400)
+    }
+  })

src/actions/index.js

@@ -1,4 +1,5 @@
 import { Masq } from '../lib'
+import { postLog } from '../lib/utils'
 
 const masq = new Masq()
 
@@ -160,6 +161,17 @@ export const setNotification = (notification) => ({
   notification
 })
 
+export const addLog = (log) => {
+  return function (dispatch) {
+    return postLog(log)
+      .then((res) =>
+        dispatch({
+          type: 'ADD_LOG',
+          log: res
+        }))
+  }
+}
+
 export const setLoading = (loading) => ({
   type: 'SET_LOADING',
   loading

src/containers/Login/Login.jsx

@@ -5,7 +5,7 @@ import { ChevronLeft } from 'react-feather'
 
 import { withTranslation } from 'react-i18next'
 
-import { signin, signup, fetchUsers, setCurrentAppRequest } from '../../actions'
+import { signin, signup, fetchUsers, setCurrentAppRequest, addLog } from '../../actions'
 import { ReactComponent as Logo } from '../../assets/logo.svg'
 import { ReactComponent as Cubes } from '../../assets/cubes.svg'
 import { ReactComponent as PlusSquare } from '../../assets/plus-square.svg'
@@ -111,6 +111,8 @@ class Login extends Component {
   }
 
   handleOpenSignup () {
+    const { addLog } = this.props
+    addLog({ type: 'click_handleOpenSignup' })
     this.setState({ signup: true, addProfile: false })
   }
 
@@ -131,6 +133,8 @@ class Login extends Component {
   }
 
   selectUser (user) {
+    const { addLog } = this.props
+    addLog({ type: 'click_selectUser' })
     this.setState({ selectedUser: user })
   }
 
@@ -412,6 +416,7 @@ Login.propTypes = {
   history: PropTypes.object,
   currentAppRequest: PropTypes.object,
   setCurrentAppRequest: PropTypes.func,
+  addLog: PropTypes.func,
   t: PropTypes.func
 }
 
@@ -424,6 +429,7 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch => ({
   signin: (user, passphrase) => dispatch(signin(user, passphrase)),
   signup: user => dispatch(signup(user)),
+  addLog: log => dispatch(addLog(log)),
   fetchUsers: user => dispatch(fetchUsers(user)),
   setCurrentAppRequest: app => dispatch(setCurrentAppRequest(app))
 })

src/lib/utils.js

@@ -1,11 +1,36 @@
 
 import Compressor from 'compressorjs'
 import * as common from 'masq-common'
+import fetch from 'node-fetch'
 
 const { encrypt, decrypt } = common.crypto
 
 const MAX_IMAGE_SIZE = 100000 // 100 KB
 
+const postLog = async (log) => {
+  if (process.env.REACT_APP_LOG_ENDPOINT) {
+    try {
+      debug(`Send log ${JSON.stringify(log)} to ${process.env.REACT_APP_LOG_ENDPOINT}`)
+      const response = await fetch(process.env.REACT_APP_LOG_ENDPOINT, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          log
+        })
+      })
+      const data = await response.json()
+      return data.log
+    } catch (error) {
+      console.error('Error to post log ', log)
+    }
+  } else {
+    debug('No endpoint provided, please update REACT_APP_LOG_ENDPOINT in .env')
+    return log
+  }
+}
+
 const isUsernameAlreadyTaken = (username, id) => {
   const ids = Object
     .keys(window.localStorage)
@@ -96,6 +121,7 @@ const promiseTimeout = function (ms, promise) {
 export {
   isUsernameAlreadyTaken,
   promiseTimeout,
+  postLog,
   compressImage,
   MAX_IMAGE_SIZE,
   waitForPeer,

src/reducers/masq.js

@@ -4,6 +4,7 @@ const masq = (state = {
   users: [],
   apps: [],
   devices: [],
+  logs: [],
   currentUser: null,
   currentAppRequest: null
 }, action) => {
@@ -26,6 +27,8 @@ const masq = (state = {
       return { ...state, apps: [...state.apps, action.app] }
     case 'ADD_DEVICE':
       return { ...state, devices: [...state.devices, action.device] }
+    case 'ADD_LOG':
+      return { ...state, logs: [...state.logs, action.log] }
     case 'SET_SYNC_STEP':
       return { ...state, syncStep: action.syncStep }
     case 'SET_SYNC_URL':