Merge pull request #213 from one-acre-fund/SER-3281-SentryIntegration

Ser 3281 sentry integration

.gitignore

@@ -58,3 +58,6 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+# Sentry Config File
+.sentryclirc

RELEASE_NOTES.md

@@ -1,11 +1,13 @@
 # Release Notes
 
 ## Version 1.3.5 - Community 1.0.0
+
     * [SER-2577] - Allow group movement regardless of loan status and office
     * [SER-3227] - Change link color for group and office labels in the client detail page.
-    * [SER-2543] - Implement the user agent 
+    * [SER-2543] - Implement the user agent
     * [SER-3214] - Use the updated configuration for OTP verification in the UI
     * [SER-3204] - Move the audit page from System to Organization page
+    * [SER-3281] - Integrate Fineract UI with Sentry for error analytics and tracing
     * chore - Change Mifos name on the UI to Fineract
 
 ## Version 1.3.4.2 - Community 1.0.0
@@ -27,10 +29,12 @@
     * [SER-2902] - Disable loan submit button for a specific period to avoid double clicks.
     * [SER-2664] -  Show only client eligible loan products
     * [SER-2881] -  Re-enable configuration of the currency multiple from directly on the UI during Loan Definition
+
 ## Version 1.3.2 - Community 1.0.0
 
     * [SER-2947] - Show or hide some menus based on user permissions.
     * [SER-2956] - Fix regression on Display Terms&Conditions on loan product page
+
 ## Version 1.3.1 - Community 1.0.0
 
     * [SER-2854] Editing a loan product leads to loss of attached charges

angular.json

@@ -26,12 +26,7 @@
             "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
-            "assets": [
-              "src/favicon.ico",
-              "src/robots.txt",
-              "src/manifest.json",
-              "src/assets"
-            ],
+            "assets": ["src/favicon.ico", "src/robots.txt", "src/manifest.json", "src/assets"],
             "styles": [
               "node_modules/font-awesome/css/font-awesome.css",
               "src/main.scss",
@@ -67,10 +62,8 @@
               }
             ],
             "scripts": [],
-            "allowedCommonJsDependencies": [
-              "lodash",
-              "@ckeditor/ckeditor5-build-classic"
-            ]
+            "allowedCommonJsDependencies": ["lodash", "@ckeditor/ckeditor5-build-classic"],
+            "sourceMap": true
           },
           "configurations": {
             "production": {
@@ -208,24 +201,14 @@
                 "bundleName": "pictonblue-yellowgreen"
               }
             ],
-            "assets": [
-              "src/favicon.ico",
-              "src/robots.txt",
-              "src/manifest.json",
-              "src/assets"
-            ]
+            "assets": ["src/favicon.ico", "src/robots.txt", "src/manifest.json", "src/assets"]
           }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
+            "exclude": ["**/node_modules/**"]
           }
         }
       }
@@ -255,12 +238,8 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": [
-              "e2e/tsconfig.e2e.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "tsConfig": ["e2e/tsconfig.e2e.json"],
+            "exclude": ["**/node_modules/**"]
           }
         }
       }

package.json

@@ -24,7 +24,8 @@
     "translations:extract": "ngx-translate-extract --input ./src --output ./src/translations/template.json --format=json --clean -sort --marker extract",
     "docs": "hads ./docs -o",
     "env": "node version.js",
-    "postinstall": "node version.js && ngcc"
+    "postinstall": "node version.js && ngcc",
+    "sentry:sourcemaps": "sentry-cli sourcemaps inject --org one-acre-fund --project fineract-ui ./dist/web-app && sentry-cli sourcemaps upload --org one-acre-fund --project fineract-ui ./dist/web-app"
   },
   "dependencies": {
     "@angular-devkit/schematics": "^14.2.13",
@@ -51,6 +52,9 @@
     "@ngx-matomo/tracker": "^3.2.1",
     "@ngx-translate/core": "13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
+    "@sentry/angular": "^8.38.0",
+    "@sentry/cli": "^2.38.2",
+    "@sentry/tracing": "^7.114.0",
     "@tailwindcss/forms": "^0.5.4",
     "chart.js": "3.0.0-alpha",
     "core-js": "2.6.12",

src/app/app.module.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { APP_INITIALIZER, NgModule } from "@angular/core";
+import { APP_INITIALIZER, ErrorHandler, NgModule } from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { HttpClient, HttpClientModule } from "@angular/common/http";
@@ -51,7 +51,8 @@ import { DragulaModule } from "ng2-dragula";
 /** Matomo module */
 import { NgxMatomoRouterModule } from "@ngx-matomo/router";
 import { NgxMatomoTrackerModule } from "@ngx-matomo/tracker";
-
+import * as Sentry from "@sentry/angular";
+import { Router } from "@angular/router";
 /**
  * App Module
  *
@@ -119,6 +120,20 @@ import { NgxMatomoTrackerModule } from "@ngx-matomo/tracker";
       multi: true,
     },
     { provide: MAT_DATE_LOCALE, useValue: "en-GB" },
+    {
+      provide: ErrorHandler,
+      useValue: Sentry.createErrorHandler(),
+    },
+    {
+      provide: Sentry.TraceService,
+      deps: [Router],
+    },
+    {
+      provide: APP_INITIALIZER,
+      useFactory: () => () => {},
+      deps: [Sentry.TraceService],
+      multi: true,
+    },
   ],
   bootstrap: [WebAppComponent],
 })

src/app/home/home.component.html

@@ -18,7 +18,7 @@
     </mat-card-header>
 
     <mat-card-content>
-        
+
       <div fxLayout="column">
         <mat-form-field>
           <mat-label>Search Activity</mat-label>

src/assets/env.js

@@ -4,7 +4,7 @@
   // BackEnd Environment variables
   window['env']['fineractApiUrls'] =
     'https://dev.mifos.io,https://demo.mifos.io,https://qa.mifos.io,https://staging.mifos.io,https://mobile.mifos.io,https://loans.test.oneacrefund.org,https://localhost:8443';
-  window['env']['fineractApiUrl'] = 'https://loans.test.oneacrefund.org';
+  window['env']['fineractApiUrl'] = 'https://loans.integration.oneacrefund.org';
 
   window['env']['authServerUrl'] = '';
 
@@ -27,6 +27,8 @@
   window['env']['matomoSiteId'] = '';
   window['env']['matomoSiteUrl'] = '';
 
+  //Sentry integration
+  window['env']['sentryDsn'] = '';
   //App name
   window['env']['appName'] = '';
 

src/assets/env.template.js

@@ -28,6 +28,9 @@
   window['env']['matomoSiteId'] = '$MATOMO_SITE_ID';
   window['env']['matomoSiteUrl'] = '$MATOMO_SITE_URL';
 
+  //Sentry integration
+  window['env']['sentryDsn'] = '$SENTRY_DSN';
+
   // Loan submission button disabled timeout in seconds
   window['env']['loanSubmitButtonDisabledTimeOut'] = '$LOAN_SUBMIT_DISABLED_TIME_OUT';
 })(this);

src/environments/environment.local.ts

@@ -37,6 +37,8 @@ export const environment = {
   matomoSiteUrl: window['env']['matomoSiteUrl'] || 'http://localhost',
   // Loan submission button disabled timeout in seconds
   loanSubmitButtonDisabledTimeOut: window['env']['loanSubmitButtonDisabledTimeOut'] || 5,
+  sentryDsn: window['env']['sentryDsn'] || 'https://[email protected]/4508318875844608'
+
 };
 
 // Server URL

src/environments/environment.prod.ts

@@ -33,6 +33,7 @@ export const environment = {
   matomoSiteUrl: window['env']['matomoSiteUrl'] || 'https://analytics.oneacrefund.org',
   // Loan submission button disabled timeout in seconds
   loanSubmitButtonDisabledTimeOut: window['env']['loanSubmitButtonDisabledTimeOut'] || 5,
+  sentryDsn: window['env']['sentryDsn'],
 };
 
 // Server URL

src/environments/environment.qa.ts

@@ -22,12 +22,12 @@ export const environment = {
   apiVersion: window['env']['apiVersion'] || '/v1',
   serverUrl: '',
   oauth: {
-    enabled: true,  // For connecting to Mifos X using OAuth2 Authentication change the value to true
+    enabled: true, // For connecting to Mifos X using OAuth2 Authentication change the value to true
     serverUrl: window['env']['authServerUrl'] || 'https://accounts.qa.oneacrefund.org',
     realm: window['env']['keycloakRealm'] || 'OneAcreFund',
     client_id: window['env']['keycloakClientId'] || 'fineract',
     tokenUrl: window['env']['keycloakTokenUrl'] || `https://loans.qa.oneacrefund.org/auth/realms/OneAcreFund/protocol/openid-connect/token`,
-    redirectUri: window['env']['homeURL'] || 'http://localhost:4200/home'
+    redirectUri: window['env']['homeURL'] || 'http://localhost:4200/home',
   },
   defaultLanguage: window['env']['defaultLanguage'] || 'en-US',
   supportedLanguages: window['env']['supportedLanguages'] || 'en-US,fr-FR',
@@ -37,6 +37,8 @@ export const environment = {
   matomoSiteUrl: window['env']['matomoSiteUrl'] || 'https://analytics.qa.oneacrefund.org',
   // Loan submission button disabled timeout in seconds
   loanSubmitButtonDisabledTimeOut: window['env']['loanSubmitButtonDisabledTimeOut'] || 5,
+  sentryDsn: window['env']['sentryDsn'] ||
+    'https://[email protected]/test',
 };
 
 // Server URL

src/environments/environment.test.ts

@@ -1,38 +1,39 @@
 // `.env.ts` is generated by the `npm run env` command
-import env from "./.env";
+import env from './.env';
 import { commonEnvironments } from "./environment.common";
 
 export const environment = {
   ...commonEnvironments,
   production: true,
   // For connecting to server running elsewhere update the tenant identifier
-  fineractPlatformTenantId: window["env"]["fineractPlatformTenantId"] || "default",
+  fineractPlatformTenantId: window['env']['fineractPlatformTenantId'] || 'default',
   // For connecting to others servers running elsewhere update the base API URL
   baseApiUrls:
-    window["env"]["fineractApiUrls"] ||
-    "https://dev.mifos.io,https://demo.mifos.io,https://qa.mifos.io,https://staging.mifos.io,https://mobile.mifos.io,https://loans.integration.oneacrefund.org,https://localhost:8443",
+    window['env']['fineractApiUrls'] ||
+    'https://dev.mifos.io,https://demo.mifos.io,https://qa.mifos.io,https://staging.mifos.io,https://mobile.mifos.io,https://loans.integration.oneacrefund.org,https://localhost:8443',
   // For connecting to server running elsewhere set the base API URL
-  baseApiUrl: window["env"]["fineractApiUrl"] || "https://loans.integration.oneacrefund.org",
+  baseApiUrl: window['env']['fineractApiUrl'] || 'https://loans.integration.oneacrefund.org',
   allowServerSwitch: env.allow_switching_backend_instance,
-  apiProvider: window["env"]["apiProvider"] || "/fineract-provider/api",
-  apiVersion: window["env"]["apiVersion"] || "/v1",
-  serverUrl: "",
+  apiProvider: window['env']['apiProvider'] || '/fineract-provider/api',
+  apiVersion: window['env']['apiVersion'] || '/v1',
+  serverUrl: '',
   oauth: {
     enabled: true, // For connecting to Mifos X using OAuth2 Authentication change the value to true
-    serverUrl: window["env"]["authServerUrl"] || "https://accounts.integration.oneacrefund.org",
-    realm: window['env']['keycloakRealm'] || "OneAcreFund",
-    client_id: window['env']['keycloakClientId'] ||  "fineract",
+    serverUrl: window['env']['authServerUrl'] || 'https://accounts.integration.oneacrefund.org',
+    realm: window['env']['keycloakRealm'] || 'OneAcreFund',
+    client_id: window['env']['keycloakClientId'] || 'fineract',
     tokenUrl: window['env']['keycloakTokenUrl'] || "https://loans.integration.oneacrefund.org/auth/realms/OneAcreFund/protocol/openid-connect/token",
-    redirectUri: window["env"]["homeURL"] || "http://localhost:4200/home",
+    redirectUri: window['env']['homeURL'] || 'http://localhost:4200/home',
   },
-  defaultLanguage: window["env"]["defaultLanguage"] || "en-US",
-  supportedLanguages: window["env"]["supportedLanguages"] || "en-US,fr-FR",
-  headOfficeID: window["env"]["headOfficeID"] || "1",
+  defaultLanguage: window['env']['defaultLanguage'] || 'en-US',
+  supportedLanguages: window['env']['supportedLanguages'] || 'en-US,fr-FR',
+  headOfficeID: window['env']['headOfficeID'] || '1',
   //Matomo instance config
   matomoSiteId: window['env']['matomoSiteId'] || 1,
   matomoSiteUrl: window['env']['matomoSiteUrl'] || 'https://analytics.integration.oneacrefund.org',
   // Loan submission button disabled timeout in seconds
   loanSubmitButtonDisabledTimeOut: window['env']['loanSubmitButtonDisabledTimeOut'] || 5,
+  sentryDsn: window['env']['sentryDsn'] || 'https://[email protected]/test',
 };
 
 // Server URL

src/environments/environment.ts

@@ -37,6 +37,8 @@ export const environment = {
   matomoSiteUrl: window['env']['matomoSiteUrl'] || 'https://analytics.integration.oneacrefund.org',
   // Loan submission button disabled timeout in seconds
   loanSubmitButtonDisabledTimeOut: window['env']['loanSubmitButtonDisabledTimeOut'] || 5,
+  sentryDsn: window['env']['sentryDsn'] || 'https://[email protected]/4508318875844608'
+
 };
 
 // Server URL

src/main.ts

@@ -10,9 +10,24 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
+import * as Sentry from '@sentry/angular';
+
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.log(err));
+Sentry.init({
+  dsn: environment.sentryDsn,
+  integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
+  // Tracing
+  tracesSampleRate: 1.0, //  Capture 100% of the transactions
+  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+  tracePropagationTargets: ['localhost', /^https:\/\/yourserver\.io\/api/],
+  // Session Replay
+  replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+  replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+});
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.log(err));