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

Upload source maps to Sentry

GitOrigin-RevId: badbce7a5a72c3c2b5ad61d1ab2e458a52128e37

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

@@ -136,6 +136,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",
     "sandboxed-module": "0.2.0",
     "sinon": "^7.5.0",

services/web/webpack.config.prod.js

@@ -1,53 +1,104 @@
+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, {
-  mode: 'production',
+module.exports = merge.smart(
+  base,
+  {
+    mode: 'production',
 
-  // Enable a full source map. Generates a comment linking to the source map
-  devtool: 'source-map',
+    // Enable a full source map. Generates a comment linking to the source map
+    devtool: 'source-map',
 
-  output: {
-    // Override filename to include hash for immutable caching
-    filename: 'js/[name]-[chunkhash].js'
-  },
+    output: {
+      // Override filename to include hash for immutable caching
+      filename: 'js/[name]-[chunkhash].js'
+    },
 
-  module: {
-    rules: [
-      {
-        // Override base font loading to add hash to filename so that we can
-        // use "immutable" caching
-        test: /\.(woff|woff2)$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              outputPath: 'fonts',
-              publicPath: '/fonts/',
-              name: '[name]-[hash].[ext]'
+    module: {
+      rules: [
+        {
+          // Override base font loading to add hash to filename so that we can
+          // use "immutable" caching
+          test: /\.(woff|woff2)$/,
+          use: [
+            {
+              loader: 'file-loader',
+              options: {
+                outputPath: 'fonts',
+                publicPath: '/fonts/',
+                name: '[name]-[hash].[ext]'
+              }
             }
-          }
-        ]
-      }
+          ]
+        }
+      ]
+    },
+
+    optimization: {
+      // Minify JS (with Terser) and CSS (with cssnano)
+      minimizer: [new TerserPlugin(), new OptimizeCssAssetsPlugin()]
+    },
+
+    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
+        filename: 'stylesheets/[name]-[chunkhash].css'
+      })
     ]
   },
+  // Conditionally merge in Sentry plugins
+  generateSentryConfig()
+)
 
-  optimization: {
-    // Minify JS (with Terser) and CSS (with cssnano)
-    minimizer: [new TerserPlugin(), new OptimizeCssAssetsPlugin()]
-  },
+/*
+ * 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']
+        }),
 
-  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
-      filename: 'stylesheets/[name]-[chunkhash].css'
-    })
-  ]
-})
+        // 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 {}
+  }
+}