Merge pull request #240 from thematters/enhancement/sentry

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=

common/utils/index.ts

@@ -11,3 +11,4 @@ export * from './number'
 export * from './language'
 export * from './text'
 export * from './cache'
+export * from './random'

common/utils/random.ts

@@ -0,0 +1,4 @@
+export const genSentryActionId = () =>
+  Math.random()
+    .toString(36)
+    .substr(2, 9)

common/utils/withApollo.ts

@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/browser'
 import { ApolloClient } from 'apollo-client'
 import { ApolloLink, split } from 'apollo-link'
 import { setContext } from 'apollo-link-context'
@@ -10,6 +11,8 @@ import https from 'https'
 import withApollo from 'next-with-apollo'
 import getConfig from 'next/config'
 
+import { genSentryActionId } from '~/common/utils'
+
 import {
   inMemoryCache
   // setupPersistCache
@@ -87,13 +90,33 @@ const authLink = setContext((_, { headers }) => {
   }
 })
 
+const sentryLink = setContext((_, { headers }) => {
+  // Add action id for Sentry
+  const actionId = genSentryActionId()
+  Sentry.configureScope((scope: any) => {
+    scope.setTag('action-id', actionId)
+  })
+
+  return {
+    headers: {
+      ...headers,
+      'x-sentry-action-id': actionId
+    }
+  }
+})
+
 export default withApollo(({ ctx, headers, initialState }) => {
   inMemoryCache.restore(initialState || {})
 
   // setupPersistCache()
 
   return new ApolloClient({
-    link: ApolloLink.from([errorLink, authLink, dataLink({ headers })]),
+    link: ApolloLink.from([
+      errorLink,
+      authLink,
+      sentryLink,
+      dataLink({ headers })
+    ]),
     cache: inMemoryCache
   })
 })

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 {