Integrate with Sentry (#253)

package.json

@@ -25,6 +25,7 @@
     "test": "mocha"
   },
   "dependencies": {
+    "@sentry/electron": "2.0.3",
     "cli-truncate": "2.1.0",
     "electron-is-dev": "1.2.0",
     "electron-settings": "3.2.0",

public/electron.js

@@ -26,6 +26,12 @@ const { autoUpdater } = require('electron-updater');
 const { menubar } = require('menubar');
 const windowStateKeeper = require('electron-window-state');
 
+// Activate the Sentry Electron SDK as early as possible in every process.
+if (!isDev) {
+  // eslint-disable-next-line global-require
+  require('./libs/sentry');
+}
+
 const { createMenu, showMenu } = require('./libs/menu');
 const loadListeners = require('./listeners');
 const { getPreference } = require('./libs/preferences');
@@ -242,6 +248,7 @@ if (!gotTheLock) {
         webPreferences: {
           nodeIntegration: true,
           webSecurity: false,
+          preload: path.join(__dirname, 'preload', 'default.js'),
         },
       });
       mainWindowState.manage(mainWindow);

public/libs/sentry.js

@@ -0,0 +1,12 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+const electron = require('electron');
+const { init } = require('@sentry/electron');
+
+const isRenderer = (process && process.type === 'renderer');
+
+init({
+  dsn: 'https://[email protected]/5516769',
+  release: isRenderer ? electron.remote.app.getVersion() : electron.app.getVersion(),
+});

public/preload/default.js

@@ -0,0 +1,4 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+require('./shared');

public/preload/menubar.js

@@ -2,3 +2,5 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 window.mode = 'menubar';
+
+require('./shared');

public/preload/shared.js

@@ -0,0 +1,22 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+const {
+  remote,
+  ipcRenderer,
+  webFrame,
+  desktopCapturer,
+} = require('electron');
+const isDev = require('electron-is-dev');
+
+// Activate the Sentry Electron SDK as early as possible in every process.
+if (!isDev) {
+  // eslint-disable-next-line global-require
+  require('../libs/sentry');
+}
+
+window.remote = remote;
+window.ipcRenderer = ipcRenderer;
+window.desktopCapturer = desktopCapturer;
+
+webFrame.setVisualZoomLevelLimits(1, 1);

src/components/app.js

@@ -47,8 +47,7 @@ import {
 
 const styles = (theme) => {
   // big sur increases title bar height
-  const { remote } = window.require('electron');
-  const titleBarHeight = remote.getGlobal('isMacOs11') ? 28 : 22;
+  const titleBarHeight = window.remote.getGlobal('isMacOs11') ? 28 : 22;
 
   return {
     container: {
@@ -164,7 +163,7 @@ class App extends React.Component {
             onDoubleClick={() => {
               // feature: double click on title bar to expand #656
               // https://github.com/atomery/webcatalog/issues/656
-              const win = window.require('electron').remote.getCurrentWindow();
+              const win = window.remote.getCurrentWindow();
               if (win.isMaximized()) {
                 win.unmaximize();
               } else {

src/components/pages/history/search-box.js

@@ -86,11 +86,10 @@ const SearchBox = ({
     inputRef.current.select();
   }, [inputRef]);
   useEffect(() => {
-    const { ipcRenderer } = window.require('electron');
-    ipcRenderer.on('open-find', handleOpenFind);
+    window.ipcRenderer.on('open-find', handleOpenFind);
     // Remove event listener on cleanup
     return () => {
-      ipcRenderer.removeListener('open-find', handleOpenFind);
+      window.ipcRenderer.removeListener('open-find', handleOpenFind);
     };
   }, [handleOpenFind]);
 

src/components/pages/home/index.js

@@ -193,13 +193,11 @@ class Home extends React.Component {
       this.inputRef.current.focus();
     }
 
-    const { ipcRenderer } = window.require('electron');
-    ipcRenderer.on('open-find', this.handleOpenFind);
+    window.ipcRenderer.on('open-find', this.handleOpenFind);
   }
 
   componentWillUnmount() {
-    const { ipcRenderer } = window.require('electron');
-    ipcRenderer.removeListener('open-find', this.handleOpenFind);
+    window.ipcRenderer.removeListener('open-find', this.handleOpenFind);
   }
 
   handleOpenFind() {
@@ -224,8 +222,6 @@ class Home extends React.Component {
       textToSpeechPlaying,
     } = this.props;
 
-    const { remote } = window.require('electron');
-
     if (fullscreenInputBox === true) {
       return null;
     }
@@ -261,7 +257,7 @@ class Home extends React.Component {
             Icon: FileCopy,
             tooltip: getLocale('copy'),
             onClick: () => {
-              remote.clipboard.writeText(output.outputText);
+              window.remote.clipboard.writeText(output.outputText);
               onOpenSnackbar(getLocale('copied'));
             },
           },
@@ -361,8 +357,6 @@ class Home extends React.Component {
       translateWhenPressingEnter,
     } = this.props;
 
-    const { remote } = window.require('electron');
-
     const controllers = [
       {
         Icon: ContentClear,
@@ -378,7 +372,7 @@ class Home extends React.Component {
         )),
         tooltip: getLocale('translateClipboard'),
         onClick: () => {
-          const text = remote.clipboard.readText();
+          const text = window.remote.clipboard.readText();
           onUpdateInputText(text);
           onTranslate(inputLang, outputLang, text);
         },

src/components/pages/language-list/search-box.js

@@ -88,11 +88,10 @@ const SearchBox = ({
     inputRef.current.select();
   }, [inputRef, route]);
   useEffect(() => {
-    const { ipcRenderer } = window.require('electron');
-    ipcRenderer.on('open-find', handleOpenFind);
+    window.ipcRenderer.on('open-find', handleOpenFind);
     // Remove event listener on cleanup
     return () => {
-      ipcRenderer.removeListener('open-find', handleOpenFind);
+      window.ipcRenderer.removeListener('open-find', handleOpenFind);
     };
   }, [inputRef, handleOpenFind]);
 

src/components/pages/ocr/index.js

@@ -138,8 +138,6 @@ class Ocr extends React.Component {
       zoomLevel,
     } = this.props;
 
-    const { remote } = window.require('electron');
-
     if (!imageUrl) return null;
 
     return (
@@ -172,7 +170,7 @@ class Ocr extends React.Component {
                   lineHeight: `${line.height}px`,
                 }}
                 onClick={() => {
-                  remote.clipboard.writeText(line.text);
+                  window.remote.clipboard.writeText(line.text);
                   onOpenSnackbar(getLocale('copied'));
                 }}
               >
@@ -254,7 +252,7 @@ class Ocr extends React.Component {
               <MenuItem
                 dense
                 onClick={() => {
-                  remote.clipboard.writeText(inputText);
+                  window.remote.clipboard.writeText(inputText);
                   onOpenSnackbar(getLocale('copied'));
                 }}
               >
@@ -267,7 +265,7 @@ class Ocr extends React.Component {
               <MenuItem
                 dense
                 onClick={() => {
-                  remote.clipboard.writeText(outputText);
+                  window.remote.clipboard.writeText(outputText);
                   onOpenSnackbar(getLocale('copied'));
                 }}
               >

src/components/pages/phrasebook/search-box.js

@@ -86,11 +86,10 @@ const SearchBox = ({
     inputRef.current.select();
   }, [inputRef]);
   useEffect(() => {
-    const { ipcRenderer } = window.require('electron');
-    ipcRenderer.on('open-find', handleOpenFind);
+    window.ipcRenderer.on('open-find', handleOpenFind);
     // Remove event listener on cleanup
     return () => {
-      ipcRenderer.removeListener('open-find', handleOpenFind);
+      window.ipcRenderer.removeListener('open-find', handleOpenFind);
     };
   }, [handleOpenFind]);
 

src/components/pages/preferences/index.js

@@ -313,7 +313,7 @@ const Preferences = (props) => {
               <>
                 <ListItem
                   button
-                  onClick={() => window.require('electron').remote.shell.openExternal('https://translatium.app/popclip')}
+                  onClick={() => window.remote.shell.openExternal('https://translatium.app/popclip')}
                 >
                   <ListItemText primary={getLocale('popclipExtension')} />
                   <ChevronRightIcon color="action" />
@@ -432,7 +432,7 @@ const Preferences = (props) => {
             )}
             <Divider />
             <ListItem button>
-              <ListItemText primary={getLocale('quit')} onClick={() => window.require('electron').remote.app.quit()} />
+              <ListItemText primary={getLocale('quit')} onClick={() => window.remote.app.quit()} />
             </ListItem>
           </List>
         </Paper>

src/components/root/dialog-about.js

@@ -64,8 +64,6 @@ const About = (props) => {
     open,
   } = props;
 
-  const { remote } = window.require('electron');
-
   return (
     <Dialog
       className={classes.root}
@@ -82,7 +80,7 @@ const About = (props) => {
           variant="body2"
           className={classes.version}
         >
-          {`Version v${remote.app.getVersion()}`}
+          {`Version v${window.remote.app.getVersion()}`}
         </Typography>
 
         <Button

src/components/shared/windows-title-bar.js

@@ -111,13 +111,12 @@ const EnhancedAppBar = ({
   isMaximized,
   title,
 }) => {
-  const { remote } = window.require('electron');
   const onDoubleClick = (e) => {
     // feature: double click on title bar to expand #656
     // https://github.com/webcatalog/webcatalog-app/issues/656
     // https://stackoverflow.com/questions/10554446/no-onclick-when-child-is-clicked
     if (e.target === e.currentTarget) {
-      const win = remote.getCurrentWindow();
+      const win = window.remote.getCurrentWindow();
       if (win.isMaximized()) {
         win.unmaximize();
       } else {
@@ -126,7 +125,7 @@ const EnhancedAppBar = ({
     }
   };
 
-  const menubarMode = remote.getGlobal('attachToMenubar');
+  const menubarMode = window.remote.getGlobal('attachToMenubar');
 
   return (
     <AppBar
@@ -170,7 +169,7 @@ const EnhancedAppBar = ({
                 aria-label="Minimize"
                 onClick={(e) => {
                   e.stopPropagation();
-                  const browserWindow = remote.getCurrentWindow();
+                  const browserWindow = window.remote.getCurrentWindow();
                   browserWindow.minimize();
                 }}
               >
@@ -184,7 +183,7 @@ const EnhancedAppBar = ({
                   aria-label={isMaximized ? 'Unmaximize' : 'Maximize'}
                   onClick={(e) => {
                     e.stopPropagation();
-                    const browserWindow = remote.getCurrentWindow();
+                    const browserWindow = window.remote.getCurrentWindow();
                     if (browserWindow.isMaximized()) {
                       browserWindow.unmaximize();
                     } else {
@@ -209,7 +208,7 @@ const EnhancedAppBar = ({
                   aria-label={isMaximized ? 'Unmaximize' : 'Maximize'}
                   onClick={(e) => {
                     e.stopPropagation();
-                    const browserWindow = remote.getCurrentWindow();
+                    const browserWindow = window.remote.getCurrentWindow();
                     browserWindow.close();
                   }}
                 >

src/helpers/open-file-to-blob-async.js

@@ -13,8 +13,7 @@ const getFileType = (ext) => {
 };
 
 const openFileToBlobAsync = () => new Promise((resolve, reject) => {
-  const { remote } = window.require('electron');
-  remote.dialog.showOpenDialog({
+  window.remote.dialog.showOpenDialog({
     properties: ['openFile'],
     filters: [
       { name: 'Images', extensions: ['jpg', 'jpeg', 'png'] },

src/helpers/take-screenshot-to-blob-async.js

@@ -2,14 +2,12 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 const takeScreenshotToBlob = () => {
-  const { desktopCapturer, remote } = window.require('electron');
-
   // use node-mac-permissions
   // as Electron API doesn't support askForScreenCaptureAccess()
   // shell.openExternal('x-apple.systempreferences...') is not sufficient as it doesn't ensure
   // the app is added to app list in system pref
   if (window.process.platform === 'darwin') {
-    const permissions = remote.require('node-mac-permissions');
+    const permissions = window.remote.require('node-mac-permissions');
     const authStatus = permissions.getAuthStatus('screen');
     if (authStatus === 'denied' || authStatus === 'restricted') {
       permissions.askForScreenCaptureAccess();
@@ -19,15 +17,15 @@ const takeScreenshotToBlob = () => {
 
   return new Promise((resolve, reject) => {
     try {
-      remote.getCurrentWindow().on('hide', () => {
+      window.remote.getCurrentWindow().on('hide', () => {
         resolve();
       });
-      remote.getCurrentWindow().hide();
+      window.remote.getCurrentWindow().hide();
     } catch (err) {
       reject(err);
     }
   })
-    .then(() => desktopCapturer.getSources({ types: ['screen'] }))
+    .then(() => window.desktopCapturer.getSources({ types: ['screen'] }))
     .then(async (sources) => {
       const source = sources[0];
       const stream = await window.navigator.mediaDevices.getUserMedia({
@@ -57,7 +55,7 @@ const takeScreenshotToBlob = () => {
       // so use grabFrame instead
       return imageCapture.grabFrame()
         .then((img) => {
-          remote.getCurrentWindow().show();
+          window.remote.getCurrentWindow().show();
           const canvas = window.document.createElement('canvas');
           canvas.width = img.width;
           canvas.height = img.height;
@@ -77,11 +75,11 @@ const takeScreenshotToBlob = () => {
         });
     })
     .then((result) => {
-      remote.getCurrentWindow().show();
+      window.remote.getCurrentWindow().show();
       return result;
     })
     .catch((err) => {
-      remote.getCurrentWindow().show();
+      window.remote.getCurrentWindow().show();
       // eslint-disable-next-line no-console
       console.log(err);
       return null;

src/index.js

@@ -40,10 +40,6 @@ require('lunr-languages/lunr.th')(global.lunr);
 require('lunr-languages/lunr.tr')(global.lunr);
 require('lunr-languages/lunr.vi')(global.lunr);
 
-const { webFrame } = window.require('electron');
-
-webFrame.setVisualZoomLevelLimits(1, 1);
-
 // https://github.com/quanglam2807/translatium/issues/28
 // remove text formatting when copying
 document.addEventListener('copy', (e) => {