Inject Sentry tracker

.env.example

@@ -4,3 +4,4 @@ API_URL=http://matters-server-develop.ap-southeast-1.elasticbeanstalk.com/
 WS_URL=ws://matters-server-develop.ap-southeast-1.elasticbeanstalk.com/graphql
 SEGMENT_KEY=3gE20MjzN9qncFqlKV0pDvNO7Cp2gWU3
 FB_APP_ID=823885921293850
+SENTRY_DSN=

components/ErrorBoundary/index.tsx

@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/browser'
 import React from 'react'
 
 import { Error as ErrorComponent } from '~/components/Error'
@@ -24,6 +25,9 @@ class ErrorBoundary extends React.Component<Props, State> {
   }
 
   componentDidCatch(error: Error, info: any): void {
+    // Add info to Sentry
+    Sentry.captureException(error)
+
     const { onError } = this.props
 
     if (typeof onError === 'function') {

components/GQL/error.tsx

@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/browser'
 import { ApolloError } from 'apollo-client'
 import _get from 'lodash/get'
 
@@ -27,6 +28,9 @@ export const getErrorCodes = (error: any) => {
 }
 
 export const checkError = (error: ApolloError) => {
+  // Add info to Sentry
+  Sentry.captureException(error)
+
   if (!process.browser) {
     throw error
   }

components/Viewer/index.tsx

@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/browser'
 import gql from 'graphql-tag'
 import _get from 'lodash/get'
 import React from 'react'
@@ -59,6 +60,16 @@ export const processViewer = (viewer: ViewerUser): Viewer => {
   const isInactive = isAuthed && (isFrozen || isBanned || isArchived)
   const isAdmin = role === 'admin'
 
+  // Add user info for Sentry
+  Sentry.configureScope((scope: any) => {
+    scope.setUser({
+      id: viewer.id,
+      role,
+      language: _get(viewer, 'settings.language')
+    })
+    scope.setTag('source', 'web')
+  })
+
   return {
     ...viewer,
     isAuthed,

next.config.js

@@ -33,7 +33,8 @@ const nextConfig = {
     API_URL: process.env.API_URL,
     WS_URL: process.env.WS_URL,
     SEGMENT_KEY: process.env.SEGMENT_KEY,
-    FB_APP_ID: process.env.FB_APP_ID
+    FB_APP_ID: process.env.FB_APP_ID,
+    SENTRY_DSN: process.env.SENTRY_DSN
   },
 
   /**

package.json

@@ -32,6 +32,7 @@
     "gen:fragmentTypes": "node bin/buildFragmentTypes.js"
   },
   "dependencies": {
+    "@sentry/browser": "^5.1.1",
     "@tippy.js/react": "^2.1.2",
     "apollo-cache-inmemory": "^1.5.1",
     "apollo-cache-persist": "^0.1.1",

pages/_app.tsx

@@ -1,7 +1,9 @@
+import * as Sentry from '@sentry/browser'
 import { InMemoryCache } from 'apollo-cache-inmemory'
 import { ApolloClient } from 'apollo-client'
 import gql from 'graphql-tag'
 import App, { Container } from 'next/app'
+import getConfig from 'next/config'
 import React from 'react'
 import { ApolloProvider, QueryResult } from 'react-apollo'
 
@@ -18,6 +20,13 @@ import withApollo from '~/common/utils/withApollo'
 
 import { RootQuery } from './__generated__/RootQuery'
 
+// start Sentry
+const {
+  publicRuntimeConfig: { SENTRY_DSN }
+} = getConfig()
+
+Sentry.init({ dsn: SENTRY_DSN || '' })
+
 class MattersApp extends App<{ apollo: ApolloClient<InMemoryCache> }> {
   public query = gql`
     query RootQuery {