Track JS error - {${some error}}

public/index.html

@@ -43,7 +43,7 @@
                     'Unhandled rejection (promise: ',
                     event.promise,
                     ', reason: ',
-                    event.reason,
+                    JSON.stringify(event.reason, ['message', 'arguments', 'type', 'name']),
                     ').',
                     JSON.stringify(event.promise)
                 );

src/app/App.jsx

@@ -28,11 +28,16 @@ const App = () => {
     };
 
     React.useEffect(() => {
-        api_base.api.expectResponse('authorize').then(() =>
-            api_base.getActiveSymbols().then(data => {
-                initActiveSymbols(data);
-            })
-        );
+        api_base.api
+            .expectResponse('authorize')
+            .then(() =>
+                api_base.getActiveSymbols().then(data => {
+                    initActiveSymbols(data);
+                })
+            )
+            .catch(error => {
+                globalObserver.emit('Error', error);
+            });
 
         /* This code is used to monitor active_symbols when the user is not logged in and
         will initialize the app without requiring an authorization response. */

src/blockly/blocks/tools/loader.js

@@ -1,6 +1,8 @@
 import { translate } from '@i18n';
 import { observer as globalObserver } from '@utilities/observer';
+import { TrackJSError } from '@utilities/logger';
 import { deleteBlocksLoadedBy, loadRemote, recoverDeletedBlock } from '../../utils';
+import { trackJSTrack } from '../../../utilities/integrations/trackJSTrack';
 
 Blockly.Blocks.loader = {
     init: function init() {
@@ -44,7 +46,10 @@ Blockly.Blocks.loader = {
                 },
                 e => {
                     Blockly.Events.recordUndo = recordUndo;
-                    throw e;
+                    const serialized_error = JSON.stringify(e, ['message', 'arguments', 'type', 'name']);
+                    trackJSTrack(
+                        new TrackJSError(translate('Blocks aren`t loaded successfully'), `${e}, ${serialized_error}`)
+                    );
                 }
             );
         }

src/blockly/index.js

@@ -259,7 +259,8 @@ export const loadWorkspace = xml => {
         },
         e => {
             Blockly.Events.setGroup(false);
-            throw e;
+            const serialized_error = JSON.stringify(e, ['message', 'arguments', 'type', 'name']);
+            trackJSTrack(new TrackJSError(translate('Blocks aren`t loaded successfully'), `${e}, ${serialized_error}`));
         }
     );
 };
@@ -287,7 +288,8 @@ export const loadBlocks = (xml, dropEvent = {}) => {
             globalObserver.emit('ui.log.success', translate('Blocks are loaded successfully'));
         },
         e => {
-            throw e;
+            const serialized_error = JSON.stringify(e, ['message', 'arguments', 'type', 'name']);
+            trackJSTrack(new TrackJSError(translate('Blocks aren`t loaded successfully'), `${e} ${serialized_error}`));
         }
     );
 };
@@ -502,10 +504,15 @@ export default class _Blockly {
                 });
             }
             if (this.interpreter) {
-                this.interpreter.stop().then(() => {
-                    this.interpreter = null;
-                    resolve();
-                });
+                this.interpreter
+                    .stop()
+                    .then(() => {
+                        this.interpreter = null;
+                        resolve();
+                    })
+                    .catch(error => {
+                        globalObserver.emit('Error', error);
+                    });
             } else {
                 resolve();
             }

src/common/appId.js

@@ -13,6 +13,8 @@ import {
 } from '@storage';
 import { getRelatedDerivOrigin } from '@utils';
 import GTM from '@utilities/integrations/gtm';
+import { TrackJSError } from '@utilities/logger';
+import { trackJSTrack } from '@utilities/integrations/trackJSTrack';
 
 const generateOAuthDomain = () => {
     const related_deriv_origin = getRelatedDerivOrigin();
@@ -48,6 +50,8 @@ export async function addTokenIfValid(token) {
         return account;
     } catch (e) {
         GTM.setVisitorId();
+        const serialized_error = JSON.stringify(e, ['message', 'arguments', 'type', 'name']);
+        trackJSTrack(new TrackJSError(`${e}, ${serialized_error}`));
         throw e;
     }
 }
@@ -106,6 +110,8 @@ export async function loginAndSetTokens(token_list = []) {
         return { account_info, accounts_list };
     } catch (e) {
         GTM.setVisitorId();
+        const serialized_error = JSON.stringify(e, ['message', 'arguments', 'type', 'name']);
+        trackJSTrack(new TrackJSError(`${e}, ${serialized_error}`));
         throw e;
     }
 }

src/components/Header/Header.jsx

@@ -72,13 +72,18 @@ const Header = () => {
     }, [login_id]);
 
     React.useEffect(() => {
-        api_base.api.expectResponse('balance').then(({ balance }) => {
-            dispatch(client_slice.updateBalance(balance));
-            globalObserver.setState({
-                balance: Number(balance.balance),
-                currency: balance.currency,
+        api_base.api
+            .expectResponse('balance')
+            .then(({ balance }) => {
+                dispatch(client_slice.updateBalance(balance));
+                globalObserver.setState({
+                    balance: Number(balance.balance),
+                    currency: balance.currency,
+                });
+            })
+            .catch(error => {
+                globalObserver.emit('Error', error);
             });
-        });
 
         api_base.api.onMessage().subscribe(({ data }) => {
             if (data.msg_type === 'balance') {

src/components/ToolBox/save/save.jsx

@@ -3,6 +3,8 @@ import React from 'react';
 import { translate } from '@i18n';
 import { observer as globalObserver } from '@utilities/observer';
 import google_drive_util from '@utilities/integrations/GoogleDrive';
+import { TrackJSError } from '@utilities/logger';
+import { trackJSTrack } from '@utilities/integrations/trackJSTrack';
 import LoadingButton from '../loading_button';
 import SAVE_LOAD_TYPE from '../common';
 import useIsMounted from '../../../common/hooks/isMounted';
@@ -33,6 +35,10 @@ const Save = ({ blockly, closeDialog, is_gd_logged_in }) => {
                 mimeType: 'application/xml',
             })
             .then(() => globalObserver.emit('ui.log.success', translate('Successfully uploaded to Google Drive')))
+            .catch(e => {
+                const serialized_error = JSON.stringify(e, ['message', 'arguments', 'type', 'name']);
+                trackJSTrack(new TrackJSError(`${e}, ${serialized_error}`));
+            })
             .finally(() => isMounted() && setLoading(false));
     };
     const onSubmit = e => {

src/utilities/integrations/GoogleDrive.js

@@ -117,7 +117,11 @@ class GoogleDriveUtil {
                 store.dispatch(setGdLoggedIn(false));
                 this.updateLoginStatus(true);
             };
-            this.client.requestAccessToken({ prompt: '' });
+            try {
+                this.client.requestAccessToken({ prompt: '' });
+            } catch (err) {
+                trackJSTrack(new TrackJSError(err));
+            }
         }
     };
 
@@ -129,8 +133,12 @@ class GoogleDriveUtil {
     logout = () => {
         this.updateLoginStatus(false);
         if (this.access_token) {
-            gapi.client.setToken('');
-            google.accounts.oauth2.revoke(this.access_token);
+            try {
+                gapi.client.setToken('');
+                google.accounts.oauth2.revoke(this.access_token);
+            } catch (err) {
+                trackJSTrack(new TrackJSError(err));
+            }
             localStorage.removeItem('access_token');
         }
         this.access_token = '';