Introduce NUSMODS_ENV and fix deploy preview robots.txt and Sentry env (#3137)

Author: taneliang

export/src/render-serverless.ts

@@ -24,7 +24,7 @@ async function setViewport(page: Page, options: ViewportOptions = {}) {
 
 export async function open(url: string) {
   const browser = await chromium.puppeteer.launch({
-    // devtools: !!process.env.DEVTOOLS, // TODO: Query string && __DEV__?
+    // devtools: !!process.env.DEVTOOLS, // TODO: Query string && NODE_ENV === 'development'?
     args: chromium.args,
     defaultViewport: chromium.defaultViewport,
     executablePath: await chromium.executablePath,

website/jest.common.config.js

@@ -15,15 +15,11 @@ module.exports = {
   },
   // Mimic the globals we set with Webpack's DefinePlugin
   globals: {
-    // Default to development
-    __DEV__: process.env.NODE_ENV === 'development',
-    __TEST__: process.env.NODE_ENV === 'test',
+    NUSMODS_ENV: 'test',
     DATA_API_BASE_URL: '',
     VERSION_STR: '',
     DISPLAY_COMMIT_HASH: '',
     DEBUG_SERVICE_WORKER: false,
-    VERCEL_ENV: '',
-    VERCEL_GIT_COMMIT_REF: '',
   },
   // Allow us to directly use enzyme wrappers for snapshotting
   // Usage: expect(enzyme.shallow(<div/>)).toMatchSnapshot();

website/package.json

@@ -73,7 +73,6 @@
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "chalk": "4.1.0",
     "codecov": "3.8.1",
-    "compression-webpack-plugin": "7.1.2",
     "copy-webpack-plugin": "7.0.0",
     "cross-env": "7.0.3",
     "css-loader": "5.0.1",

website/src/.eslintrc.js

@@ -104,13 +104,10 @@ module.exports = {
 
   // Mimic the globals we set with Webpack's DefinePlugin
   globals: {
-    __DEV__: 'readonly',
-    __TEST__: 'readonly',
+    NUSMODS_ENV: 'readonly',
     DATA_API_BASE_URL: 'readonly',
     VERSION_STR: 'readonly',
     DISPLAY_COMMIT_HASH: 'readonly',
     DEBUG_SERVICE_WORKER: 'readonly',
-    VERCEL_ENV: 'readonly',
-    VERCEL_GIT_COMMIT_REF: 'readonly',
   },
 };

website/src/bootstrapping/configure-store.ts

@@ -27,7 +27,7 @@ export default function configureStore(defaultState?: State) {
 
   const middlewares = [ravenMiddleware, thunk, requestsMiddleware];
 
-  if (__DEV__) {
+  if (NUSMODS_ENV === 'development') {
     // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require, import/no-extraneous-dependencies
     const { createLogger } = require('redux-logger');
     const logger = createLogger({

website/src/bootstrapping/sentry.ts

@@ -4,26 +4,22 @@ import { Integrations } from '@sentry/tracing';
 
 import { isBrowserSupported } from './browser';
 
-// Decide Sentry environment based on some basic heuristics.
-function sentryEnv(): string | undefined {
-  if (VERCEL_ENV === 'production') return 'production';
-  if (VERCEL_ENV === 'preview') {
-    if (VERCEL_GIT_COMMIT_REF === 'master') return 'staging';
-    return 'preview';
+function sentryEnv() {
+  if (NUSMODS_ENV === 'test') {
+    throw new Error('Do not load Sentry in tests');
   }
-  return 'development';
+  return NUSMODS_ENV;
 }
 
-// Configure Raven - the client for Sentry, which we use to handle errors
-const loadRaven = !__DEV__ && !__TEST__;
-if (loadRaven) {
+// Configure Sentry client, which we use to handle errors
+if (NUSMODS_ENV === 'production') {
   Sentry.init({
     dsn: 'https://[email protected]/213986',
 
     release: VERSION_STR || 'UNKNOWN_RELEASE',
 
     integrations: [new Integrations.BrowserTracing()],
-    tracesSampleRate: 1.0,
+    tracesSampleRate: NUSMODS_ENV === 'production' ? 0.2 : 1.0,
 
     environment: sentryEnv(),
 

website/src/entry/main.tsx

@@ -28,8 +28,7 @@ ReactModal.setAppElement('#app');
 ReactDOM.render(<App store={store} persistor={persistor} />, document.getElementById('app'));
 
 if (
-  (!__DEV__ &&
-    !__TEST__ &&
+  ((NUSMODS_ENV === 'preview' || NUSMODS_ENV === 'staging' || NUSMODS_ENV === 'production') &&
     'serviceWorker' in navigator &&
     window.location.protocol === 'https:') ||
   // Allow us to force service worker to be enabled for debugging
@@ -38,6 +37,6 @@ if (
   registerServiceWorker(store);
 }
 
-if (!__DEV__ && !__TEST__) {
+if (NUSMODS_ENV === 'production') {
   initializeMamoto();
 }

website/src/storage/persistReducer.ts

@@ -23,7 +23,7 @@ export default function persistReducer<S>(
     {
       key,
       storage,
-      debug: __DEV__,
+      debug: NUSMODS_ENV === 'development',
       ...options,
     },
     reducer,

website/src/types/global.d.ts

@@ -1,13 +1,27 @@
 // Globals injected by Webpack DefinePlugin
 /* eslint-disable no-underscore-dangle */
-declare const __DEV__: boolean;
-declare const __TEST__: boolean;
+/**
+ * NUSMods deployment environment.
+ *
+ * **Note:** although these environments may share the same name as
+ * `NODE_ENV` and other envs, there are subtle differences. Definitions:
+ *
+ * - `production`: a production deployment of NUSMods, i.e. a deployment meant to
+ *   be used by the general public.
+ * - `staging`: a deployment of NUSMods's main development branch, which is
+ *   not meant to be used by the general public but which may be promoted to
+ *   production at any point.
+ * - `preview`: a deployment of work-in-progress branches, e.g. PR deploy
+ *   previews.
+ * - `test`: we are in a test environment, e.g. a jest test run.
+ * - `development`: all other situations.
+ */
+declare const NUSMODS_ENV: 'development' | 'production' | 'staging' | 'preview' | 'test';
+
 declare const DATA_API_BASE_URL: string | undefined;
 declare const VERSION_STR: string | undefined;
 declare const DISPLAY_COMMIT_HASH: string | undefined;
 declare const DEBUG_SERVICE_WORKER: boolean;
-declare const VERCEL_ENV: string;
-declare const VERCEL_GIT_COMMIT_REF: string;
 /* eslint-enable no-underscore-dangle */
 
 /**

website/src/views/modules/ReportError.tsx

@@ -114,7 +114,7 @@ const ReportError = memo<Props>(({ module }) => {
 
   // Causes the error reporting function to email modules@nusmods.com instead.
   // In production, use SET_ERROR_REPORTING_DEBUG(true) to enable debug mode
-  const debug = useGlobalDebugValue('SET_ERROR_REPORTING_DEBUG', __DEV__);
+  const debug = useGlobalDebugValue('SET_ERROR_REPORTING_DEBUG', NUSMODS_ENV === 'development');
 
   const [formData, setFormData] = useState<ReportErrorForm>(() => ({
     ...retrieveContactInfo(),