Setup sentry logging as per version and upload its source map (#7143)

* Added a fix for snake case properties

* Setup sentry logging as per version and upload its source map

* Remove version

* Fix process not being defined

* Add version to sentry release

* Add release version in config api

* Changes in docker file

* Create a version file in frontend

* Remove docker changes

* fix

* Add a script to bump .version files

---------

Co-authored-by: Muhsin Shah <muhsinshah21@gmail.com>

frontend/.version

@@ -0,0 +1 @@
+2.11.0

frontend/package.json

@@ -11,8 +11,9 @@
     "@radix-ui/colors": "^0.1.8",
     "@radix-ui/react-popover": "^1.0.3",
     "@react-google-maps/api": "^2.18.1",
-    "@sentry/react": "^7.37.2",
-    "@sentry/tracing": "^7.37.2",
+    "@sentry/react": "^7.60.0",
+    "@sentry/tracing": "^7.60.0",
+    "@sentry/webpack-plugin": "^2.5.0",
     "@tabler/icons-react": "^2.4.0",
     "@tooljet/plugins": "../plugins",
     "@uiw/react-codemirror": "^3.0.6",

frontend/src/index.jsx

@@ -3,7 +3,6 @@ import { render } from 'react-dom';
 // import { createRoot } from 'react-dom/client';
 import * as Sentry from '@sentry/react';
 import { useLocation, useNavigationType, createRoutesFromChildren, matchRoutes } from 'react-router-dom';
-import { BrowserTracing } from '@sentry/tracing';
 import { appService } from '@/_services';
 import { App } from './App';
 // eslint-disable-next-line import/no-unresolved
@@ -46,8 +45,9 @@ appService
         dsn: window.public_config.SENTRY_DNS,
         debug: !!window.public_config.SENTRY_DEBUG,
         release: releaseVersion,
+        name: 'react',
         integrations: [
-          new BrowserTracing({
+          new Sentry.BrowserTracing({
             routingInstrumentation: Sentry.reactRouterV6Instrumentation(
               React.useEffect,
               useLocation,
@@ -55,10 +55,10 @@ appService
               createRoutesFromChildren,
               matchRoutes
             ),
-            tracingOrigins: tracingOrigins,
           }),
         ],
         tracesSampleRate: 0.5,
+        tracePropagationTargets: tracingOrigins,
       });
     }
   })

frontend/webpack.config.js

@@ -5,6 +5,10 @@ const CompressionPlugin = require('compression-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 require('dotenv').config({ path: '../.env' });
 const hash = require('string-hash');
+const { sentryWebpackPlugin } = require('@sentry/webpack-plugin');
+const fs = require('fs');
+const versionPath = path.resolve(__dirname, '.version');
+const version = fs.readFileSync(versionPath, 'utf-8').trim();
 
 const environment = process.env.NODE_ENV === 'production' ? 'production' : 'development';
 
@@ -53,7 +57,7 @@ module.exports = {
       '@assets': path.resolve(__dirname, 'assets/'),
     },
   },
-  devtool: environment === 'development' ? 'eval-cheap-source-map' : false,
+  devtool: environment === 'development' ? 'eval-cheap-source-map' : 'hidden-source-map',
   module: {
     rules: [
       {
@@ -151,6 +155,16 @@ module.exports = {
       'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH),
       'process.env.SERVE_CLIENT': JSON.stringify(process.env.SERVE_CLIENT),
     }),
+    // Add Sentry plugin for error and performance monitoring
+    sentryWebpackPlugin({
+      authToken: process.env.SENTRY_AUTH_TOKEN,
+      org: process.env.SENTRY_ORG,
+      project: process.env.SENTRY_PROJECT,
+      release: {
+        // The version should be same as what its when we are sending error events
+        name: `tooljet-${version}`,
+      },
+    }),
   ],
   devServer: {
     historyApiFallback: { index: ASSET_PATH },

package.json

@@ -50,6 +50,7 @@
     "db:drop": "npm --prefix server run db:drop",
     "deploy": "cp -a frontend/build/. public/",
     "heroku-postbuild": "./heroku-postbuild.sh",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "update-version": "node update-version.js"
   }
 }

server/src/main.ts

@@ -16,6 +16,7 @@ import { join } from 'path';
 const fs = require('fs');
 
 globalThis.TOOLJET_VERSION = fs.readFileSync('./.version', 'utf8').trim();
+process.env['RELEASE_VERSION'] = globalThis.TOOLJET_VERSION;
 
 function replaceSubpathPlaceHoldersInStaticAssets() {
   const filesToReplaceAssetPath = ['index.html', 'runtime.js', 'main.js'];

update-version.js

@@ -0,0 +1,30 @@
+// As we are maintaining three .version files, this script will help in updating it one go
+const fs = require('fs');
+const path = require('path');
+
+// Get the new version from the command-line arguments
+const newVersion = process.argv[2];
+
+if (!newVersion) {
+  console.error('Usage: node update-version.js <new-version>');
+  process.exit(1);
+}
+
+// Function to update version in a file
+function updateVersion(filePath, newVersion) {
+  const content = fs.readFileSync(filePath, 'utf-8');
+  const updatedContent = content.replace(/\d+\.\d+\.\d+/, newVersion);
+  fs.writeFileSync(filePath, updatedContent, 'utf-8');
+  console.log(`Updated version in ${filePath} to ${newVersion}`);
+}
+
+// Update version in both server and client folders
+const versionPath =  path.join(__dirname, '.version')
+const serverVersionFilePath = path.join(__dirname, 'server', '.version');
+const frontendVersionFilePath = path.join(__dirname, 'frontend', '.version');
+
+updateVersion(versionPath,newVersion)
+updateVersion(serverVersionFilePath, newVersion);
+updateVersion(frontendVersionFilePath, newVersion);
+
+// eg.---> npm run update-version <version> ---> npm run update-version 3.0.0