Merge pull request #2657 from overleaf/revert-2650-revert-2570-as-sentry-source-maps

Bring back upload source maps to Sentry

GitOrigin-RevId: 22024e3ec2462d0bc9ad9c14e8d1c21880c55cd1

services/web/.gitignore

@@ -59,3 +59,6 @@ docker-shared.yml
 config/*.coffee
 
 modules/**/Makefile
+
+# Sentry secrets file (injected by CI)
+.sentryclirc

services/web/Dockerfile

@@ -13,6 +13,12 @@ RUN npm install --quiet
 
 COPY . /app
 
+# Set environment variables for Sentry
+ARG SENTRY_RELEASE
+ARG BRANCH_NAME
+ENV SENTRY_RELEASE=$SENTRY_RELEASE
+ENV BRANCH_NAME=$BRANCH_NAME
+
 RUN chmod 0755 ./install_deps.sh && ./install_deps.sh
 
 FROM base

services/web/Makefile

@@ -119,6 +119,8 @@ lint:
 build:
 	docker build --pull --tag ci/$(PROJECT_NAME):$(BRANCH_NAME)-$(BUILD_NUMBER) \
 		--tag gcr.io/overleaf-ops/$(PROJECT_NAME):$(BRANCH_NAME)-$(BUILD_NUMBER) \
+		--build-arg SENTRY_RELEASE=${COMMIT_SHA} \
+		--build-arg BRANCH_NAME=$(BRANCH_NAME) \
 		.
 
 build_test_frontend:

services/web/app/src/infrastructure/ExpressLocals.js

@@ -365,7 +365,8 @@ module.exports = function(webRouter, privateApiRouter, publicApiRouter) {
         Settings.recaptcha != null ? Settings.recaptcha.siteKeyV3 : undefined,
       recaptchaDisabled:
         Settings.recaptcha != null ? Settings.recaptcha.disabled : undefined,
-      validRootDocExtensions: Settings.validRootDocExtensions
+      validRootDocExtensions: Settings.validRootDocExtensions,
+      sentryDsn: Settings.sentry != null ? Settings.sentry.publicDSN : undefined
     }
     next()
   })

services/web/frontend/js/base.js

@@ -20,6 +20,7 @@
 __webpack_public_path__ = window.baseAssetPath
 
 define([
+  'utils/sentry',
   'libraries',
   'modules/recursionHelper',
   'modules/errorCatcher',

services/web/frontend/js/utils/sentry.js

@@ -0,0 +1,18 @@
+// Conditionally enable Sentry based on whether the DSN token is set
+if (window.ExposedSettings.sentryDsn) {
+  import(/* webpackChunkName: "sentry" */ '@sentry/browser').then(Sentry => {
+    Sentry.init({
+      dsn: window.ExposedSettings.sentryDsn,
+
+      // Ignore errors unless they come from overleaf.com/sharelatex.com
+      // Adapted from: https://docs.sentry.io/platforms/javascript/#decluttering-sentry
+      whitelistUrls: [
+        /https:\/\/[a-z]+\.overleaf\.com/,
+        /https:\/\/[a-z]+\.sharelatex\.com/
+      ]
+    })
+
+    // Previously Raven added itself as a global, so we mimic that old behaviour
+    window.Raven = Sentry
+  })
+}

services/web/package.json

@@ -33,6 +33,7 @@
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
     "@overleaf/o-error": "^2.1.0",
+    "@sentry/browser": "^5.12.0",
     "algoliasearch": "^3.35.1",
     "angular": "~1.6.10",
     "angular-sanitize": "~1.6.10",
@@ -123,6 +124,7 @@
     "yauzl": "^2.10.0"
   },
   "devDependencies": {
+    "@sentry/webpack-plugin": "^1.9.3",
     "acorn": "^6.1.0",
     "acorn-walk": "^6.1.1",
     "angular-mocks": "~1.6.10",
@@ -173,6 +175,7 @@
     "postcss-loader": "^3.0.0",
     "prettier-eslint-cli": "^4.7.1",
     "react-testing-library": "^5.4.2",
+    "remove-files-webpack-plugin": "^1.2.2",
     "requirejs": "^2.1.22",
     "samlp": "^3.4.1",
     "sandboxed-module": "0.2.0",

services/web/webpack.config.prod.js

@@ -1,13 +1,18 @@
+const fs = require('fs')
 const merge = require('webpack-merge')
 const TerserPlugin = require('terser-webpack-plugin')
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const SentryPlugin = require('@sentry/webpack-plugin')
+const RemoveFilesPlugin = require('remove-files-webpack-plugin')
 
 const base = require('./webpack.config')
 
 // Use "smart" merge: attempts to combine loaders targeting the same file type,
 // overriding the base config
-module.exports = merge.smart(base, {
+module.exports = merge.smart(
+  base,
+  {
     mode: 'production',
 
     // Enable a full source map. Generates a comment linking to the source map
@@ -46,8 +51,54 @@ module.exports = merge.smart(base, {
     plugins: [
       // Extract CSS to a separate file (rather than inlining to a <style> tag)
       new MiniCssExtractPlugin({
-      // Output to public/stylesheets directory and append hash for immutable caching
+        // Output to public/stylesheets directory and append hash for immutable
+        // caching
         filename: 'stylesheets/[name]-[chunkhash].css'
       })
     ]
-})
+  },
+  // Conditionally merge in Sentry plugins
+  generateSentryConfig()
+)
+
+/*
+ * If Sentry secrets file exists, then configure SentryPlugin to upload source
+ * maps to Sentry
+ */
+function generateSentryConfig() {
+  // Only upload if the Sentry secrets file is available and on master branch
+  if (
+    fs.existsSync('./.sentryclirc') &&
+    process.env['BRANCH_NAME'] === 'master'
+  ) {
+    console.log('Sentry secrets file found. Uploading source maps to Sentry')
+    return {
+      plugins: [
+        new SentryPlugin({
+          release: process.env['SENTRY_RELEASE'],
+          include: './public/js',
+          ignore: ['ace-1.4.5', 'cmaps', 'libs']
+        }),
+
+        // After uploading source maps to Sentry, delete them. Some of the
+        // source maps are of proprietary code and so we don't want to make them
+        // publicly available
+        new RemoveFilesPlugin({
+          after: {
+            test: [
+              {
+                folder: './public/js',
+                method: filePath => /\.map$/.test(filePath)
+              }
+            ]
+          }
+        })
+      ]
+    }
+  } else {
+    console.log(
+      'Sentry secrets file not found. NOT uploading source maps to Sentry'
+    )
+    return {}
+  }
+}