@wavemaker/app-rn-runtime 11.14.1-3.6306 → 11.14.1-32.647748

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wavemaker/app-rn-runtime",
-  "version": "11.14.1-3.6306",
+  "version": "11.14.1-32.647748",
   "description": "''",
   "main": "index",
   "module": "index",
@@ -59,7 +59,7 @@
     "@react-navigation/drawer": "7.5.8",
     "@react-navigation/native": "7.1.18",
     "@react-navigation/stack": "7.4.8",
-    "@wavemaker/variables": "11.14.1-3.6306",
+    "@wavemaker/variables": "11.14.1-32.647748",
     "axios": "1.8.3",
     "color": "4.2.3",
     "cross-env": "7.0.3",
@@ -72,7 +72,7 @@
     "expo-video": "3.0.11",
     "fast-xml-parser": "4.5.3",
     "imask": "7.6.1",
-    "lodash-es": "4.17.21",
+    "lodash-es": "4.18.1",
     "lottie-react-native": "7.3.4",
     "moment": "2.30.1",
     "react-lottie-player": "2.1.0",
@@ -157,6 +157,11 @@
     "victory-native": "37.3.2",
     "yargs": "16.2.0"
   },
+  "overrides": {
+    "react-native-worklets": "0.7.4",
+    "lodash": "4.18.1",
+    "debug": "4.4.3"
+  },
   "jest": {
     "preset": "jest-expo",
     "testRegex": "(test/.*|(\\.|/)(test|spec))\\.[t]sx?$",

package/runtime/App.js

@@ -8,9 +8,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import ProtoTypes from 'prop-types';
 import { SafeAreaProvider, SafeAreaInsetsContext, SafeAreaView } from 'react-native-safe-area-context';
 import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
-import { Linking } from 'react-native';
 import { NativeModulesProxy } from 'expo-modules-core';
-import * as WebBrowser from 'expo-web-browser';
 import { get, last } from 'lodash';
 import { RENDER_LOGGER } from '@wavemaker/app-rn-runtime/core/logger';
 import EventNotifier from '@wavemaker/app-rn-runtime/core/event-notifier';
@@ -21,7 +19,7 @@ import ConstantService from '@wavemaker/app-rn-runtime/core/constant.service';
 import NetworkService from '@wavemaker/app-rn-runtime/core/network.service';
 import injector from '@wavemaker/app-rn-runtime/core/injector';
 import formatters from '@wavemaker/app-rn-runtime/core/formatters';
-import { deepCopy, isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';
+import { deepCopy } from '@wavemaker/app-rn-runtime/core/utils';
 import * as Utils from '@wavemaker/app-rn-runtime/core/utils';
 import { ModalProvider } from '@wavemaker/app-rn-runtime/core/modal.service';
 import { FixedViewContainer } from '@wavemaker/app-rn-runtime/core/fixed-view.component';
@@ -46,7 +44,8 @@ import { CameraProvider } from '../core/device/camera-service';
 import CameraService from './services/device/camera-service';
 import { ScanProvider } from '../core/device/scan-service';
 import ScanService from './services/device/scan-service';
-import AppSecurityService from './services/app-security.service';
+import BrowserService from './services/browser.service';
+import AppSecurityService, { shouldRedirectToLoginOn401 } from './services/app-security.service';
 import { getValidJSON, parseErrors } from '@wavemaker/app-rn-runtime/variables/utils/variable.utils';
 import MaterialCommunityIconsFont from '@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf';
 import * as SplashScreen from 'expo-splash-screen';
@@ -58,6 +57,8 @@ import moment from 'moment';
 import ErrorBoundary from '../core/error-boundary.component';
 import { ScreenCaptureProtectionProvider } from '../core/screen-capture-protection.service';
 import { allowScreenCaptureAsync, preventScreenCaptureAsync } from 'expo-screen-capture';
+import { setupGlobalJsErrorHandler } from '../core/global-error-handler.service';
+import Fallback from '../core/components/error-fallback/error-fallback.component';
 //some old react libraries need this
 View['propTypes'] = {
   style: ProtoTypes.any
@@ -128,6 +129,8 @@ export default class BaseApp extends React.Component {
     }));
     _defineProperty(this, "networkStatus", {});
     _defineProperty(this, "statusbarInsets", void 0);
+    _defineProperty(this, "globalError", null);
+    _defineProperty(this, "globalJsErrorHandlerCleanup", null);
     _defineProperty(this, "enableProtection", async () => {
       try {
         if (Platform.OS !== 'web') {
@@ -150,6 +153,9 @@ export default class BaseApp extends React.Component {
     setTimeout(() => SplashScreen.hideAsync(), 10000);
     this.appConfig.app = this;
     this.appConfig.drawer = new DrawerImpl(() => this.refresh());
+
+    // Register app instance in injector for Error Boundary access
+    injector.set('APP_INSTANCE', this);
     AppSpinnerService.setDefaultOptions({
       spinner: this.appConfig.spinner
     });
@@ -245,10 +251,62 @@ export default class BaseApp extends React.Component {
     try {
       this.onPageReady(activePageName, activePageScope);
     } catch (e) {
-      console.error(e);
+      this.handleCallbackError(e, `Error in onPageReady callback`);
     }
   }
   onPageReady(activePageName, activePageScope) {}
+  triggerOnError(error, errorInfo, errorType) {
+    try {
+      this.onError(error, errorInfo, errorType);
+    } catch (e) {
+      console.error('Error in onError callback:', e);
+    }
+  }
+  onError(error, errorInfo, errorType) {
+    // Empty implementation - user can override in app.js
+    // errorType: 'render' for React component errors, 'javascript' for other JS errors
+  }
+  handleCallbackError(error, context) {
+    var _this$appConfig;
+    console.error(error);
+    const errorObj = error instanceof Error ? error : new Error(String(error));
+
+    // Check if error handling is enabled
+    const prefs = (_this$appConfig = this.appConfig) === null || _this$appConfig === void 0 ? void 0 : _this$appConfig.preferences;
+    const globalEnabled = (prefs === null || prefs === void 0 ? void 0 : prefs.enableGlobalErrorHandler) === true;
+    const showDefaultFallback = (prefs === null || prefs === void 0 ? void 0 : prefs.showDefaultErrorFallback) !== false;
+    if (!globalEnabled) {
+      return;
+    }
+
+    // Immediately hide all overlays to ensure error fallback is visible
+    try {
+      // Hide Expo SplashScreen
+      SplashScreen.hideAsync();
+
+      // Hide App Spinner (force hide regardless of count)
+      AppSpinnerService.hide();
+    } catch (hideError) {
+      console.warn('Error hiding overlays:', hideError);
+    }
+
+    // Trigger user callback
+    this.triggerOnError(errorObj, context, 'javascript');
+
+    // Only set global error state if fallback should be shown
+    if (showDefaultFallback) {
+      this.globalError = {
+        error: errorObj,
+        errorInfo: context,
+        errorType: 'javascript',
+        isFatal: false
+      };
+
+      // Set isStarted to true so app template will render the error screen
+      this.isStarted = true;
+      this.forceUpdate(); // Show fallback screen
+    }
+  }
   setTimezone(timezone) {
     AppI18nService.setTimezone(timezone);
   }
@@ -256,16 +314,7 @@ export default class BaseApp extends React.Component {
     return AppSpinnerService;
   }
   openBrowser(url, params = {}) {
-    if (url) {
-      if (isWebPreviewMode()) {
-        window.open(url, '_blank');
-      } else if (url.startsWith('http') && params.target === '_blank') {
-        WebBrowser.openBrowserAsync(url);
-      } else {
-        return Linking.openURL(url);
-      }
-    }
-    return Promise.resolve();
+    return BrowserService.open(url, params);
   }
 
   // To support old api
@@ -286,13 +335,22 @@ export default class BaseApp extends React.Component {
       config.headers['X-Requested-With'] = 'XMLHttpRequest';
       console.log('onBeforeService call invoked on ' + config.url);
       this.notify('beforeServiceCall', config);
-      return this.onBeforeServiceCall(config);
+      try {
+        return this.onBeforeServiceCall(config);
+      } catch (e) {
+        this.handleCallbackError(e, `Error in onBeforeServiceCall callback`);
+        return config; // Return original config as fallback
+      }
     }), axios.interceptors.response.use(response => {
-      this.onServiceSuccess(response.data, response);
+      try {
+        this.onServiceSuccess(response.data, response);
+      } catch (e) {
+        this.handleCallbackError(e, `Error in onServiceSuccess callback`);
+      }
       this.notify('afterServiceCall', response.config, response);
       return response;
     }, error => {
-      var _errorDetails, _errorDetails2, _error$response, _error$response2, _error$response3, _error$response4;
+      var _errorDetails, _errorDetails2, _error$response, _error$response2, _error$response3, _this$appConfig$curre5;
       let errorDetails = error.response,
         errMsg;
       errorDetails = getValidJSON((_errorDetails = errorDetails) === null || _errorDetails === void 0 ? void 0 : _errorDetails.data) || ((_errorDetails2 = errorDetails) === null || _errorDetails2 === void 0 ? void 0 : _errorDetails2.data);
@@ -302,11 +360,43 @@ export default class BaseApp extends React.Component {
         errMsg = error.message || "Service Call Failed";
       }
       error.message = errMsg;
+
+      // Mark as service error for priority handling
+      // Set flags on both error and config to handle wrapping scenarios
+      error.__wmServiceError = true;
+      error.__wmServiceErrorHandled = false;
+      if (error.config) {
+        error.config.__wmServiceError = true;
+        error.config.__wmServiceErrorHandled = false;
+      }
       console.error(`Error ${errMsg} recieved from ${(_error$response = error.response) === null || _error$response === void 0 || (_error$response = _error$response.config) === null || _error$response === void 0 ? void 0 : _error$response.url}`);
-      this.onServiceError(error.message, error);
-      if ((_error$response2 = error.response) !== null && _error$response2 !== void 0 && (_error$response2 = _error$response2.config.url) !== null && _error$response2 !== void 0 && _error$response2.startsWith(this.appConfig.url) && !((_error$response3 = error.response) !== null && _error$response3 !== void 0 && (_error$response3 = _error$response3.config.url) !== null && _error$response3 !== void 0 && _error$response3.includes('/services/')) && ((_error$response4 = error.response) === null || _error$response4 === void 0 ? void 0 : _error$response4.status) === 401) {
-        var _this$appConfig$curre5, _this$appConfig$curre6;
-        ((_this$appConfig$curre5 = this.appConfig.currentPage) === null || _this$appConfig$curre5 === void 0 ? void 0 : _this$appConfig$curre5.pageName) !== 'Login' && ((_this$appConfig$curre6 = this.appConfig.currentPage) === null || _this$appConfig$curre6 === void 0 ? void 0 : _this$appConfig$curre6.goToPage('Login'));
+      try {
+        var _this$appConfig2;
+        this.onServiceError(error.message, error);
+        // Mark as handled to prevent onError from being called
+        error.__wmServiceErrorHandled = true;
+        if (error.config) {
+          error.config.__wmServiceErrorHandled = true;
+        }
+
+        // Show fallback for service errors if enabled (but don't call onError)
+        const prefs = (_this$appConfig2 = this.appConfig) === null || _this$appConfig2 === void 0 ? void 0 : _this$appConfig2.preferences;
+        const globalEnabled = (prefs === null || prefs === void 0 ? void 0 : prefs.enableGlobalErrorHandler) === true;
+        const showDefaultFallback = (prefs === null || prefs === void 0 ? void 0 : prefs.showDefaultErrorFallback) !== false;
+        if (globalEnabled && showDefaultFallback) {
+          this.globalError = {
+            error: error,
+            errorInfo: (error === null || error === void 0 ? void 0 : error.stack) || (error === null || error === void 0 ? void 0 : error.toString()),
+            errorType: 'javascript',
+            isFatal: false
+          };
+          this.forceUpdate(); // Trigger re-render to show error fallback
+        }
+      } catch (e) {
+        this.handleCallbackError(e, `Error in onServiceError callback`);
+      }
+      if (shouldRedirectToLoginOn401((_error$response2 = error.response) === null || _error$response2 === void 0 || (_error$response2 = _error$response2.config) === null || _error$response2 === void 0 ? void 0 : _error$response2.url, (_error$response3 = error.response) === null || _error$response3 === void 0 ? void 0 : _error$response3.status, this.appConfig.url, (_this$appConfig$curre5 = this.appConfig.currentPage) === null || _this$appConfig$curre5 === void 0 ? void 0 : _this$appConfig$curre5.pageName)) {
+        AppSecurityService.redirectToLogin();
       }
       this.notify('afterServiceCall', error.config, error);
       return Promise.reject(error);
@@ -327,6 +417,34 @@ export default class BaseApp extends React.Component {
     return Promise.all(this.startUpVariables.map(s => this.Variables[s] && this.Variables[s].invoke())).catch(() => {});
   }
   componentDidMount() {
+    var _this$appConfig3;
+    // Setup global JS error handler with granular control
+    const prefs = (_this$appConfig3 = this.appConfig) === null || _this$appConfig3 === void 0 ? void 0 : _this$appConfig3.preferences;
+    const globalEnabled = (prefs === null || prefs === void 0 ? void 0 : prefs.enableGlobalErrorHandler) === true;
+    const enableSyncErrors = (prefs === null || prefs === void 0 ? void 0 : prefs.enableJsSyncErrors) !== false;
+    const enableAsyncErrors = (prefs === null || prefs === void 0 ? void 0 : prefs.enableJsAsyncErrors) !== false;
+    const showFallback = (prefs === null || prefs === void 0 ? void 0 : prefs.showDefaultErrorFallback) !== false;
+
+    // Only setup if master switch is on and at least one error type is enabled
+    if (globalEnabled && (enableSyncErrors || enableAsyncErrors)) {
+      this.globalJsErrorHandlerCleanup = setupGlobalJsErrorHandler((error, isFatal, errorInfo) => {
+        // Trigger user error callback
+        this.triggerOnError(error, errorInfo, 'javascript');
+
+        // Only set global error state if fallback should be shown
+        if (showFallback) {
+          this.globalError = {
+            error,
+            errorInfo,
+            errorType: 'javascript',
+            isFatal
+          };
+          this.forceUpdate(); // Trigger re-render to show error fallback
+        }
+      }, true,
+      // suppressDefaultErrorScreen = true when global error handler is enabled
+      enableSyncErrors, enableAsyncErrors);
+    }
     AppSpinnerService.show({
       spinner: this.appConfig.spinner
     });
@@ -342,7 +460,12 @@ export default class BaseApp extends React.Component {
     }));
     this.startUpActions.map(a => this.Actions[a] && this.Actions[a].invoke());
     return this.triggerStartUpVariables().then(() => {
-      this.onAppVariablesReady();
+      try {
+        this.onAppVariablesReady();
+      } catch (e) {
+        this.handleCallbackError(e, `Error in onAppVariablesReady callback`);
+        return; // Early return to prevent subsequent code from executing
+      }
       this.isStarted = true;
       this.forceUpdate();
     }, () => {});
@@ -352,6 +475,11 @@ export default class BaseApp extends React.Component {
       axios.interceptors.request.eject(id);
     });
     this.cleanup.forEach(fn => fn());
+
+    // Cleanup global JS error handler
+    if (this.globalJsErrorHandlerCleanup) {
+      this.globalJsErrorHandlerCleanup();
+    }
   }
   refresh() {
     this.appConfig.refresh();
@@ -376,8 +504,8 @@ export default class BaseApp extends React.Component {
     }, content))))))));
   }
   renderToasters() {
-    var _this$appConfig;
-    const isEdgeToEdgeApp = !!((_this$appConfig = this.appConfig) !== null && _this$appConfig !== void 0 && (_this$appConfig = _this$appConfig.edgeToEdgeConfig) !== null && _this$appConfig !== void 0 && _this$appConfig.isEdgeToEdgeApp);
+    var _this$appConfig4;
+    const isEdgeToEdgeApp = !!((_this$appConfig4 = this.appConfig) !== null && _this$appConfig4 !== void 0 && (_this$appConfig4 = _this$appConfig4.edgeToEdgeConfig) !== null && _this$appConfig4 !== void 0 && _this$appConfig4.isEdgeToEdgeApp);
     this.toastsOpened = AppToastService.toastsOpened.length;
     return /*#__PURE__*/React.createElement(WmMemo, {
       watcher: this.watcher,
@@ -570,13 +698,13 @@ export default class BaseApp extends React.Component {
     return false;
   }
   renderApp(commonPartial) {
-    var _this$appConfig2, _this$appConfig3;
+    var _this$appConfig5, _this$appConfig6;
     this.autoUpdateVariables.forEach(value => {
       var _this$Variables$value;
       return (_this$Variables$value = this.Variables[value]) === null || _this$Variables$value === void 0 ? void 0 : _this$Variables$value.invokeOnParamChange();
     });
-    const edgeToEdgeConfig = (_this$appConfig2 = this.appConfig) === null || _this$appConfig2 === void 0 ? void 0 : _this$appConfig2.edgeToEdgeConfig;
-    const statusbarConfig = (_this$appConfig3 = this.appConfig) === null || _this$appConfig3 === void 0 || (_this$appConfig3 = _this$appConfig3.edgeToEdgeConfig) === null || _this$appConfig3 === void 0 ? void 0 : _this$appConfig3.statusbarConfig;
+    const edgeToEdgeConfig = (_this$appConfig5 = this.appConfig) === null || _this$appConfig5 === void 0 ? void 0 : _this$appConfig5.edgeToEdgeConfig;
+    const statusbarConfig = (_this$appConfig6 = this.appConfig) === null || _this$appConfig6 === void 0 || (_this$appConfig6 = _this$appConfig6.edgeToEdgeConfig) === null || _this$appConfig6 === void 0 ? void 0 : _this$appConfig6.statusbarConfig;
     const isEdgeToEdgeApp = !!(edgeToEdgeConfig !== null && edgeToEdgeConfig !== void 0 && edgeToEdgeConfig.isEdgeToEdgeApp);
     const Wrapper = isEdgeToEdgeApp ? View : SafeAreaView;
     return /*#__PURE__*/React.createElement(SafeAreaProvider, null, /*#__PURE__*/React.createElement(SafeAreaInsetsContext.Consumer, null, (insets = {
@@ -599,7 +727,8 @@ export default class BaseApp extends React.Component {
       }), /*#__PURE__*/React.createElement(ThemeProvider, {
         value: this.appConfig.theme
       }, /*#__PURE__*/React.createElement(ErrorBoundary, {
-        currentPage: this.appConfig.currentPage
+        currentPage: this.appConfig.currentPage,
+        app: this
       }, this.renderIosStatusbarInsetsView(isEdgeToEdgeApp, insets), /*#__PURE__*/React.createElement(View, {
         style: {
           flex: 1
@@ -617,7 +746,29 @@ export default class BaseApp extends React.Component {
         drawerAnimation: (_this$appConfig$drawe2 = this.appConfig.drawer) === null || _this$appConfig$drawe2 === void 0 ? void 0 : _this$appConfig$drawe2.getAnimation()
       }), /*#__PURE__*/React.createElement(FixedViewContainer, null, commonPartial))), this.appConfig.url ? /*#__PURE__*/React.createElement(WmNetworkInfoToaster, {
         appLocale: this.appConfig.appLocale
-      }) : null, this.renderToasters(), this.renderDialogs(), this.renderDisplayManager()), isEdgeToEdgeApp && (statusbarConfig === null || statusbarConfig === void 0 ? void 0 : statusbarConfig.type) === 'blur' ? this.renderBlurView("top", insets, statusbarConfig) : null, isEdgeToEdgeApp && (statusbarConfig === null || statusbarConfig === void 0 ? void 0 : statusbarConfig.type) === 'transparent' ? this.renderTransparentView("top", insets, statusbarConfig) : null))))));
+      }) : null, this.renderToasters(), this.renderDialogs(), this.renderDisplayManager(), this.globalError && /*#__PURE__*/React.createElement(View, {
+        style: {
+          position: 'absolute',
+          height: "100%",
+          width: "100%",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 999999,
+          elevation: 999999
+        }
+      }, /*#__PURE__*/React.createElement(Fallback, {
+        error: this.globalError.error,
+        info: {
+          errorInfo: this.globalError.errorInfo
+        },
+        errorType: this.globalError.errorType,
+        resetErrorBoundary: () => {
+          this.globalError = null;
+          this.forceUpdate();
+        }
+      }))), isEdgeToEdgeApp && (statusbarConfig === null || statusbarConfig === void 0 ? void 0 : statusbarConfig.type) === 'blur' ? this.renderBlurView("top", insets, statusbarConfig) : null, isEdgeToEdgeApp && (statusbarConfig === null || statusbarConfig === void 0 ? void 0 : statusbarConfig.type) === 'transparent' ? this.renderTransparentView("top", insets, statusbarConfig) : null))))));
     }));
   }
 }