SBERDOMA-104 add sentry to client/server

apps/condo/domains/common/utils/sentry.ts

@@ -0,0 +1,37 @@
+import * as Sentry from '@sentry/node'
+import { RewriteFrames } from '@sentry/integrations'
+import getConfig from 'next/config'
+
+// refs. to: https://github.com/vercel/next.js/blob/canary/examples/with-sentry/utils/sentry.js
+export const initSentry = () => {
+    const { publicRuntimeConfig } = getConfig()
+    const { sentryDsn, isProduction } = publicRuntimeConfig
+
+    if (sentryDsn) {
+        const integrations = []
+        if (typeof window === 'undefined') {
+            // For Node.js, rewrite Error.stack to use relative paths, so that source
+            // maps starting with ~/_next map to files in Error.stack with path
+            // app:///_next
+            integrations.push(
+                new RewriteFrames({
+                    iteratee: (frame) => {
+                        frame.filename = frame.filename.replace(
+                            process.env.NEXT_PUBLIC_SENTRY_SERVER_ROOT_DIR,
+                            'app:///'
+                        )
+                        frame.filename = frame.filename.replace('.next', '_next')
+                        return frame
+                    },
+                })
+            )
+        }
+
+        console.log(isProduction)
+        Sentry.init({
+            integrations,
+            dsn: sentryDsn,
+            enabled: isProduction,
+        })
+    }
+}

apps/condo/index.js

@@ -1,13 +1,15 @@
+const Sentry = require('@sentry/node')
+const conf = require('@core/config')
+
 const { Keystone } = require('@keystonejs/keystone')
 const { PasswordAuthStrategy } = require('@keystonejs/auth-password')
 const { GraphQLApp } = require('@keystonejs/app-graphql')
 const { AdminUIApp } = require('@keystonejs/app-admin-ui')
 const { StaticApp } = require('@keystonejs/app-static')
 const { NextApp } = require('@keystonejs/app-next')
 const { createItems } = require('@keystonejs/server-side-graphql-client')
-
-const conf = require('@core/config')
 const access = require('@core/keystone/access')
+const { ApolloError } = require('@apollo/client')
 const { EmptyApp } = require('@core/keystone/test.utils')
 const { prepareDefaultKeystoneConfig } = require('@core/keystone/setup.utils')
 const { registerSchemas } = require('@core/keystone/schema')
@@ -78,10 +80,61 @@ const authStrategy = keystone.createAuthStrategy({
     config: { protectIdentities: false },
 })
 
+//refs. to https://codesandbox.io/s/graphql-errors-sentry-apollo-5s8yu?file=/index.ts
+const SentryApolloPlugin = {
+    requestDidStart (_) {
+        return {
+            didEncounterErrors (ctx) {
+                if (!ctx.operation) {
+                    return
+                }
+
+                for (const err of ctx.errors) {
+                    if (err instanceof ApolloError) {
+                        continue
+                    }
+
+                    Sentry.withScope(scope => {
+                        scope.setTag('kind', ctx.operation.operation)
+                        scope.setExtra('query', ctx.request.query)
+                        scope.setExtra('variables', ctx.request.variables)
+
+                        if (err.path) {
+                            scope.addBreadcrumb({
+                                category: 'query-path',
+                                message: err.path.join(' > '),
+                                level: Sentry.Severity.Debug,
+                            })
+                        }
+
+                        const transactionId = ctx.request.http.headers.get(
+                            'x-transaction-id'
+                        )
+                        if (transactionId) {
+                            scope.setTransaction(transactionId)
+                        }
+
+                        Sentry.captureException(err)
+                    })
+                }
+            },
+        }
+    },
+}
+
 module.exports = {
     keystone,
     apps: [
-        new GraphQLApp({ apollo: { debug: conf.NODE_ENV === 'development' || conf.NODE_ENV === 'test' } }),
+        new GraphQLApp(
+            {
+                apollo: {
+                    debug: conf.NODE_ENV === 'development' || conf.NODE_ENV === 'test',
+                    plugins: [
+                        conf.SENTRY_DSN && conf.NODE_ENV === 'production' && SentryApolloPlugin,
+                    ].filter(Boolean),
+                },
+            }
+        ),
         new StaticApp({ path: conf.MEDIA_URL, src: conf.MEDIA_ROOT }),
         new AdminUIApp({
             adminPath: '/admin',
@@ -91,3 +144,10 @@ module.exports = {
         conf.NODE_ENV === 'test' ? new EmptyApp() : new NextApp({ dir: '.' }),
     ],
 }
+
+if (conf.SENTRY_DSN) {
+    Sentry.init({
+        dsn: conf.SENTRY_DSN,
+        enabled: conf.NODE_ENV === 'production',
+    })
+}

apps/condo/next.config.js

@@ -2,6 +2,9 @@ const conf = require('@core/config')
 const withLess = require('@zeit/next-less')
 const withCSS = require('@zeit/next-css')
 const { antGlobalVariables } = require('@condo/domains/common/constants/style')
+const SentryWebpackPlugin = require('@sentry/webpack-plugin')
+const withSourceMaps = require('@zeit/next-source-maps')
+
 // Tell webpack to compile the "@core/next" package, necessary
 // https://www.npmjs.com/package/next-transpile-modules
 // NOTE: FormTable require rc-table module
@@ -11,19 +14,41 @@ const serverUrl = process.env.SERVER_URL || 'http://localhost:3000'
 const apolloGraphQLUrl = `${serverUrl}/admin/api`
 const firebaseConfig = conf['FIREBASE_CONFIG'] && JSON.parse(conf['FIREBASE_CONFIG'])
 const addressSuggestionsConfig = conf['ADDRESS_SUGGESTIONS_CONFIG'] && JSON.parse(conf['ADDRESS_SUGGESTIONS_CONFIG'])
+const sentryDsn = conf['SENTRY_DSN']
+const isProduction = conf['NODE_ENV'] === 'production'
 const mapApiKey = conf['MAP_API_KEY']
 
-module.exports = withTM(withLess(withCSS({
+module.exports = withSourceMaps(withTM(withLess(withCSS({
     publicRuntimeConfig: {
         // Will be available on both server and client
+        sentryDsn,
         serverUrl,
-        apolloGraphQLUrl,
+        isProduction,
         firebaseConfig,
+        apolloGraphQLUrl,
         addressSuggestionsConfig,
         mapApiKey,
     },
     lessLoaderOptions: {
         javascriptEnabled: true,
         modifyVars: antGlobalVariables,
     },
-})))
+    webpack: (config, options) => {
+        if (!options.isServer) {
+            config.resolve.alias['@sentry/node'] = '@sentry/browser'
+        }
+
+        if (sentryDsn && isProduction) {
+            config.plugins.push(
+                new SentryWebpackPlugin({
+                    include: '.next',
+                    ignore: ['node_modules'],
+                    urlPrefix: '~/_next',
+                })
+            )
+        }
+
+        return config
+    },
+    productionBrowserSourceMaps: true,
+}))))

apps/condo/package.json

@@ -38,10 +38,16 @@
     "@keystonejs/list-plugins": "^8.1.0",
     "@keystonejs/server-side-graphql-client": "^2.1.0",
     "@keystonejs/utils": "^6.1.0",
+    "@sentry/integrations": "^6.2.5",
+    "@sentry/node": "^6.2.5",
+    "@sentry/react": "^6.2.5",
+    "@sentry/webpack-plugin": "^1.15.0",
     "@types/lodash": "^4.14.168",
     "@welldone-software/why-did-you-render": "^5.0.0-alpha.1",
     "@zeit/next-css": "^1.0.1",
     "@zeit/next-less": "^1.0.1",
+    "@zeit/next-source-maps": "^0.0.3",
+    "@zeit/next-typescript": "^1.1.1",
     "antd": "^4.8.2",
     "antd-mask-input": "^0.1.14",
     "bull": "^3.22.0",

apps/condo/pages/_app.tsx

@@ -1,10 +1,13 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
+import { initSentry } from '@condo/domains/common/utils/sentry'
+initSentry()
 import React from 'react'
 import Head from 'next/head'
 import { CacheProvider } from '@emotion/core'
 import { cache } from 'emotion'
 import { ThunderboltFilled, HomeFilled, HeartFilled, PieChartFilled } from '@ant-design/icons'
+import * as Sentry from '@sentry/react'
 
 import whyDidYouRender from '@welldone-software/why-did-you-render'
 
@@ -16,7 +19,6 @@ import { useOrganization, withOrganization } from '@core/next/organization'
 import GlobalStyle from '@condo/domains/common/components/containers/GlobalStyle'
 import GoogleAnalytics from '@condo/domains/common/components/containers/GoogleAnalytics'
 import BaseLayout from '@condo/domains/common/components/containers/BaseLayout'
-import GlobalErrorBoundary from '@condo/domains/common/components/containers/GlobalErrorBoundery'
 
 import { GET_ORGANIZATION_EMPLOYEE_BY_ID_QUERY } from '@condo/domains/organization/gql'
 
@@ -57,7 +59,7 @@ const MyApp = ({ Component, pageProps }) => {
     const HeaderAction = Component.headerAction
 
     return (
-        <GlobalErrorBoundary>
+        <Sentry.ErrorBoundary fallback={<h1>Something went wrong.</h1>}>
             <CacheProvider value={cache}>
                 <Head>
                     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
@@ -72,7 +74,7 @@ const MyApp = ({ Component, pageProps }) => {
                 </LayoutComponent>
                 <GoogleAnalytics/>
             </CacheProvider>
-        </GlobalErrorBoundary>
+        </Sentry.ErrorBoundary>
     )
 }