feat(client): add sentry (#144)

* feat(client): add sentry

* refactor(client): index.tsx setup imports

packages/client/.env.example

@@ -13,3 +13,9 @@ PORT=8080
 
 # API
 REACT_APP_API_URL=http://localhost:3030
+
+# Sentry
+REACT_APP_SENTRY_DSN=dns_url
+REACT_APP_SENTRY_DEBUG=false
+REACT_APP_SENTRY_ENABLED=false
+REACT_APP_SENTRY_ENVIRONMENT=development

packages/client/package.json

@@ -20,6 +20,8 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@sentry/react": "^6.2.3",
+    "@sentry/tracing": "^6.2.3",
     "animejs": "^3.2.1",
     "axios": "^0.21.1",
     "i18next": "^19.9.0",

packages/client/src/elements/inputs/TextField/TextField.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { fireEvent, render, screen } from '../../../utils/testing-library-instance';
+import { fireEvent, render, screen } from '../../../utils/testingLibraryInstance';
 import TextField from '.';
 
 describe('TextField', () => {

packages/client/src/index.tsx

@@ -1,17 +1,12 @@
+import './loadSentry';
+import './loadPolyfills';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 
 import Providers from './providers';
 import Routes from './routes';
 import * as serviceWorkerRegistration from './serviceWorker/serviceWorkerRegistration';
-import reportWebVitals from './utils/reportWebVitals';
-
-// Load Polyfills
-(async () => {
-  if (typeof window.IntersectionObserver === 'undefined') {
-    await import('intersection-observer');
-  }
-})();
 
 ReactDOM.render(
   <React.StrictMode>
@@ -24,4 +19,4 @@ ReactDOM.render(
 
 serviceWorkerRegistration.register();
 
-reportWebVitals();
+// reportWebVitals(); TODO: setup analytics: https://github.com/Jozwiaczek/smart-gate/issues/145

packages/client/src/loadPolyfills.ts

@@ -0,0 +1,7 @@
+(async () => {
+  if (typeof window.IntersectionObserver === 'undefined') {
+    await import('intersection-observer');
+  }
+})();
+
+export {};

packages/client/src/loadSentry.ts

@@ -0,0 +1,21 @@
+import * as Sentry from '@sentry/react';
+import { Integrations } from '@sentry/tracing';
+
+import { onlyOnDevEnv } from './utils';
+
+const {
+  REACT_APP_SENTRY_DEBUG,
+  REACT_APP_SENTRY_ENABLED,
+  REACT_APP_SENTRY_ENVIRONMENT,
+  REACT_APP_SENTRY_DSN,
+} = process.env;
+
+onlyOnDevEnv(() => console.log('Initializing sentry'));
+
+Sentry.init({
+  dsn: REACT_APP_SENTRY_DSN,
+  integrations: [new Integrations.BrowserTracing()],
+  debug: Boolean(REACT_APP_SENTRY_DEBUG),
+  environment: REACT_APP_SENTRY_ENVIRONMENT || 'production',
+  enabled: Boolean(REACT_APP_SENTRY_ENABLED),
+});