Fix dotenv

Author: Yadro

.env.example

@@ -1,4 +1,6 @@
 SENTRY_DSN='https://XXXX.ingest.sentry.io/00000000'
 GA_UACODE=UA-XXXXXXXXX-X
-# DEBUG=universal-analytics
+# DEBUG=universal-analytics # do not use DEBUG, because `debug` package will override this var.
+ # But dotenv-webpack plugin will replace it by string and parse by Terser will fail.
 # NODE_DEBUG=request # debug requests in analytics
+# DEBUG_PROD=true

.erb/configs/webpack.config.main.prod.babel.js

@@ -10,18 +10,23 @@ import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import baseConfig from './webpack.config.base';
 import CheckNodeEnv from '../scripts/CheckNodeEnv';
 import DeleteSourceMaps from '../scripts/DeleteSourceMaps';
+import Dotenv from 'dotenv-webpack';
 
 CheckNodeEnv('production');
 DeleteSourceMaps();
 
-const devtoolsConfig = process.env.DEBUG_PROD === 'true' ? {
-  devtool: 'source-map'
-} : {};
+const devtoolsConfig =
+  process.env.DEBUG_PROD === 'true'
+    ? {
+        devtool: 'source-map',
+      }
+    : {};
 
 export default merge(baseConfig, {
   ...devtoolsConfig,
 
   mode: 'production',
+  // devtool: 'source-map',
 
   target: 'electron-main',
 
@@ -37,7 +42,7 @@ export default merge(baseConfig, {
       new TerserPlugin({
         parallel: true,
       }),
-    ]
+    ],
   },
 
   plugins: [
@@ -61,6 +66,11 @@ export default merge(baseConfig, {
       DEBUG_PROD: false,
       START_MINIMIZED: false,
     }),
+
+    new Dotenv({
+      path: path.join(__dirname, '../../.env'),
+      systemvars: true,
+    }),
   ],
 
   /**

.erb/configs/webpack.config.renderer.dev.babel.js

@@ -4,6 +4,7 @@ import webpack from 'webpack';
 import chalk from 'chalk';
 import { merge } from 'webpack-merge';
 import { spawn, execSync } from 'child_process';
+import Dotenv from 'dotenv-webpack';
 import baseConfig from './webpack.config.base';
 import CheckNodeEnv from '../scripts/CheckNodeEnv';
 import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
@@ -257,6 +258,11 @@ export default merge(baseConfig, {
       NODE_ENV: 'development',
     }),
 
+    new Dotenv({
+      path: path.join(__dirname, '../../.env'),
+      systemvars: true,
+    }),
+
     new webpack.LoaderOptionsPlugin({
       debug: true,
     }),

.erb/configs/webpack.config.renderer.dev.dll.babel.js

@@ -5,6 +5,7 @@
 import webpack from 'webpack';
 import path from 'path';
 import { merge } from 'webpack-merge';
+import Dotenv from 'dotenv-webpack';
 import baseConfig from './webpack.config.base';
 import { dependencies } from '../../package.json';
 import CheckNodeEnv from '../scripts/CheckNodeEnv';
@@ -59,6 +60,11 @@ export default merge(baseConfig, {
       NODE_ENV: 'development',
     }),
 
+    new Dotenv({
+      path: path.join(__dirname, '../../.env'),
+      systemvars: true,
+    }),
+
     new webpack.LoaderOptionsPlugin({
       debug: true,
       options: {

package.json

@@ -205,7 +205,6 @@
     "caniuse-lite": "1.0.30001214",
     "clsx": "^1.1.1",
     "date-fns": "2.20.1",
-    "dotenv": "10.0.0",
     "electron-debug": "^3.1.0",
     "electron-log": "^4.2.4",
     "electron-updater": "^4.3.4",

src/components/SettingsModal/SettingsModal.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import {
+  Button,
   Checkbox,
   Divider,
   Form,
@@ -11,6 +12,7 @@ import {
 import { CheckboxChangeEvent } from 'antd/lib/checkbox';
 import { SaveOutlined } from '@ant-design/icons';
 import { observer } from 'mobx-react';
+import * as Sentry from '@sentry/browser';
 // eslint-disable-next-line import/named
 import moment, { Moment } from 'moment';
 
@@ -117,6 +119,17 @@ const SettingsModal: React.VFC<ISettingsModalProps> = observer(
             onChange={handleChangeNotifications}
           />
         </Form.Item>
+        {process.env.DEBUG_PROD === 'true' && (
+          <Button
+            onClick={() => {
+              const message = `${process.env.NODE_ENV} exception ${Date.now()}`;
+              Sentry.captureException(new Error(message));
+              console.log('Sentry.captureException', message);
+            }}
+          >
+            Test Sentry
+          </Button>
+        )}
       </Modal>
     );
   }

src/main.dev.ts

@@ -8,20 +8,18 @@
  * When running `yarn build` or `yarn build:main`, this file is compiled to
  * `./src/main.prod.js` using webpack. This gives us some performance wins.
  */
+import log from 'electron-log';
+Object.assign(console, log.functions);
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
-import dotenv from 'dotenv';
 import path from 'path';
 import { app, BrowserWindow, shell } from 'electron';
 import { autoUpdater } from 'electron-updater';
-import log from 'electron-log';
 import Badge from 'electron-windows-badge';
 
 import MenuBuilder from './menu';
 import { initSentry } from './shared/initSentry';
 
-dotenv.config();
-
 initSentry();
 
 console.log('Working path:', app.getAppPath());

src/shared/initSentry.ts

@@ -1,3 +1,6 @@
+import log from 'electron-log';
+Object.assign(console, log.functions);
+
 const Sentry =
   process.type === 'browser'
     ? require('@sentry/electron/dist/main')
@@ -8,5 +11,6 @@ export function initSentry() {
     Sentry.init({
       dsn: process.env.SENTRY_DSN,
     });
+    console.log(`[process.type=${process.type}] Sentry.init succeeded`);
   }
 }