♻️ Refactor sentry implementation in skeleton

packages/cra-template-typescript/template.json

@@ -20,8 +20,8 @@
       "@ackee/lucas": "0.4.0",
       "@ackee/petrus": "5.2.x",
       "@ackee/redux-utils": "2.x",
-      "@sentry/browser": "5.x",
-      "@sentry/react": "5.x",
+      "@sentry/react": "6.x",
+      "@sentry/tracing": "6.x",
       "antd": "4.x",
       "connected-react-router": "6.8.x",
       "fela": "11.x",
@@ -42,7 +42,6 @@
       "redux": "4.x",
       "redux-promise-listener": "1.x",
       "redux-saga": "1.x",
-      "redux-sentry-middleware": "0.x",
       "reselect": "4.x"
     },
     "devDependencies": {

packages/cra-template-typescript/template/src/config/config.development.ts

@@ -1,10 +1,14 @@
-const appName = process.env.REACT_APP_NAME;
-
 const config = {
     api: {
-        base: `https://api-${appName}-development.ack.ee/api`,
+        base: `https://api-YOU_APP_NAME-development.ack.ee/api`,
+    },
+    sentry: {
+        // TODO: add PUBLIC 'dsn' of your project here:
+        dsn: '',
     },
     devTools: true,
 };
 
+export type ConfigDevelopment = typeof config;
+
 export default config;

packages/cra-template-typescript/template/src/config/config.production.ts

@@ -1,8 +1,13 @@
 const config = {
     api: {
-        base: 'https://skeleton',
+        base: '',
+    },
+    sentry: {
+        dsn: '',
     },
     devTools: false,
 };
 
+export type ConfigProduction = typeof config;
+
 export default config;

packages/cra-template-typescript/template/src/config/config.stage.ts

@@ -1,8 +1,13 @@
 const config = {
     api: {
-        base: 'https://skeleton',
+        base: '',
+    },
+    sentry: {
+        dsn: '',
     },
     devTools: false,
 };
 
+export type ConfigStage = typeof config;
+
 export default config;

packages/cra-template-typescript/template/src/config/config.ts

@@ -1,13 +1,12 @@
 import { merge } from 'lodash';
+import { isLocalhost } from 'constants/index';
+import type { ConfigDevelopment } from './config.development';
 
 const envConfig = require(`./config.${process.env.REACT_APP_BUILD_ENV}.ts`).default;
 
 const defaults = {
-    // default configuration goes here
-    appName: process.env.REACT_APP_NAME,
     sentry: {
-        // TODO: add PUBLIC 'dsn' of your project here:
-        dsn: '',
+        enable: !isLocalhost,
     },
     api: {
         signIn: '/v1/auth/sign-in',
@@ -25,4 +24,4 @@ const defaults = {
     },
 };
 
-export default merge(defaults, envConfig);
+export default merge(defaults, envConfig) as ConfigDevelopment & typeof defaults;

packages/cra-template-typescript/template/src/config/loglevel/index.ts

@@ -1,4 +1,4 @@
-import * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/react';
 import { omit, isEmpty } from 'lodash';
 
 import * as loglevel from 'loglevel';
@@ -25,4 +25,3 @@ export const error = (err: string | Error, extra: string | { [key: string]: any
         Sentry.captureException(err);
     });
 };
-

packages/cra-template-typescript/template/src/config/sentry/index.ts

@@ -0,0 +1,44 @@
+import { init, createReduxEnhancer, reactRouterV5Instrumentation } from '@sentry/react';
+import type { BrowserOptions } from '@sentry/react';
+import { Integrations } from '@sentry/tracing';
+
+import config from 'config/config';
+import { currentEnv, isEnvProduction, isServerEnv } from 'constants/index';
+import { history } from 'modules/core/modules/router/config';
+
+declare global {
+    interface Window {
+        requestIdleCallback: (cb: IdleRequestCallback, options?: IdleRequestOptions) => number;
+    }
+}
+
+if (config.sentry.enable) {
+    const options: BrowserOptions = {
+        dsn: config.sentry.dsn,
+        debug: false,
+        integrations: [
+            new Integrations.BrowserTracing({
+                routingInstrumentation: reactRouterV5Instrumentation(history),
+            }),
+        ],
+        environment: currentEnv,
+        release: `${process.env.REACT_APP_NAME}@${process.env.REACT_APP_VERSION}`,
+        denyUrls: [
+            // Chrome extensions
+            /extensions\//i,
+            /^chrome:\/\//i,
+        ],
+        normalizeDepth: 5,
+        tracesSampleRate: isEnvProduction ? 0.25 : 1.0,
+    };
+
+    const initSentry = () => init(options);
+
+    if (isServerEnv && 'requestIdleCallback' in window) {
+        window.requestIdleCallback(initSentry);
+    } else {
+        setTimeout(initSentry, 0);
+    }
+}
+
+export const sentryReduxEnhancer = createReduxEnhancer();

packages/cra-template-typescript/template/src/constants/env.ts

@@ -12,4 +12,11 @@ export const isEnvProduction = currentEnv === environments.PRODUCTION;
 
 export const isServerEnv = typeof window === 'undefined';
 
-export default environments;
+export const isLocalhost = Boolean(
+    'location' in globalThis &&
+        (globalThis.location.hostname === 'localhost' ||
+            // [::1] is the IPv6 localhost address.
+            globalThis.location.hostname === '[::1]' ||
+            // 127.0.0.1/8 is considered localhost for IPv4.
+            globalThis.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)),
+);

packages/cra-template-typescript/template/src/constants/index.ts

@@ -1,2 +1 @@
-export { default as env } from './env';
 export * from './env';

packages/cra-template-typescript/template/src/modules/core/components/Core.tsx

@@ -1,13 +1,12 @@
-import React from "react";
+import React from 'react';
 import type { ReactNode } from 'react';
-import * as serviceWorker from "serviceWorker";
+import * as serviceWorker from 'serviceWorker';
 
 import * as config from '../config';
 
 import { Fela } from '../modules/fela';
 import { Redux } from '../modules/redux';
 import { Router } from '../modules/router';
-import { initializeSentry } from '../modules/sentry';
 
 import Enhancers from '../containers/Enhancers';
 
@@ -16,10 +15,6 @@ import Enhancers from '../containers/Enhancers';
 // Learn more about service workers: http://bit.ly/CRA-PWA
 config.plugins.serviceWorker ? serviceWorker.register() : serviceWorker.unregister();
 
-if (config.plugins.sentry) {
-    initializeSentry();
-}
-
 interface CoreProps {
     children: ReactNode;
 }

packages/cra-template-typescript/template/src/modules/core/config/index.ts

@@ -1,9 +1,6 @@
-import * as Consts from "constants/index";
+import * as Consts from 'constants/index';
 
 export const plugins = {
     // Learn more about service workers: http://bit.ly/CRA-PWA
     serviceWorker: !Consts.isServerEnv && false,
-
-    // Enable Sentry only in prouduction environment
-    sentry: Consts.isEnvProduction,
 };

packages/cra-template-typescript/template/src/modules/core/modules/redux/config/enhancer.ts

@@ -2,10 +2,10 @@ import { applyMiddleware, compose } from 'redux';
 import createSagaMiddleware from 'redux-saga';
 
 import { routerMiddlewareWithHistory } from 'modules/core/modules/router';
-import { sentryMiddleware } from 'modules/core/modules/sentry';
 
 import config from 'config';
 import * as Log from 'config/loglevel';
+import { sentryReduxEnhancer } from 'config/sentry';
 import * as Consts from 'constants/index';
 import type { StoreEnhancer } from 'redux';
 
@@ -33,9 +33,8 @@ export default function configureEnhancer() {
         // @use-form-module-begin
         promiseListener.middleware,
         // @use-form-module-end
-        sentryMiddleware,
     ];
-    const enhancerArgs = [applyMiddleware(...middlewares)];
+    const enhancerArgs = [applyMiddleware(...middlewares), sentryReduxEnhancer];
 
     if (config.devTools && !Consts.isServerEnv) {
         // eslint-disable-next-line

packages/cra-template-typescript/template/src/modules/core/modules/redux/services/reducer.ts

@@ -1,14 +1,12 @@
-import { combineReducers } from "redux";
+import { combineReducers } from 'redux';
 
-import { reducer as translateReducer } from "modules/core/modules/localization";
-import { connectRouterWithHistory } from "modules/core/modules/router";
-import { reducer as sentryReducer } from "modules/core/modules/sentry";
+import { reducer as translateReducer } from 'modules/core/modules/localization';
+import { connectRouterWithHistory } from 'modules/core/modules/router';
 
-import reducers from "services/reducers";
+import reducers from 'services/reducers';
 
 export default combineReducers({
     ...reducers,
     translate: translateReducer,
     router: connectRouterWithHistory,
-    sentry: sentryReducer,
 });

packages/cra-template-typescript/template/src/modules/core/modules/redux/services/saga.ts

@@ -1,12 +1,11 @@
-import * as sagaEffects from "redux-saga/effects";
+import * as sagaEffects from 'redux-saga/effects';
 
-import { saga as sentrySaga } from "modules/core/modules/sentry";
-import { saga as localizationSaga } from "modules/core/modules/localization";
+import { saga as localizationSaga } from 'modules/core/modules/localization';
 
-import saga from "services/sagas";
+import saga from 'services/sagas';
 
 const { all } = sagaEffects;
 
 export default function* rootSaga() {
-    yield all([sentrySaga(), localizationSaga(), saga()]);
+    yield all([localizationSaga(), saga()]);
 }