Ionic: App is broken after deploying for browser platform with production mode, when user has the browser opened


#1

I have been getting a problem after deploying our ionic app to the server compiled for the browser platform, where all requests going to server fail and it becomes unusable for the user. It happens only when a user has the site opened at the time of the deploy, and it goes away when they reload the page.

I have tried many possible solutions, but no luck, so I’m posting it here and hope I can find some help.

The console errors I’m getting are the following:

Error 1:

errorUncaught (in promise): NotFoundError: Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found. Error: Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found. at /platforms/browser/www/build/vendor.js?v=1540203735513:1:1007099 at t.invoke /platforms/browser/www/build/polyfills.js?v=1540203735513:3:14976) at Object.onInvoke ...

Error 2:

Uncaught (in promise): SecurityError: The operation is insecure. openDatabase@[native code] https://domain.com/build/vendor.js?v=1536911308754:1:1006552 t@https://domain.com/build/polyfills.js?v=1536911308754:3:21507 ...

As mentioned before, I get these errors only after running the deploy script (see below) in the following scenario:

  • The users have an existing open session in his browser.
  • Deploy occurs in the middle of his session.
  • Error only appears on pages that the user didn’t visit before the deploy.

For example:

  • The user visited Page A and Page B before the deploy script runs.
  • I run the deploy script.
  • I access Page A, Page B and it works, no problem here.
  • I access Page C, Page D (pages didn’t visit before), and I get the errors above

Deploy Script:

# remove the browser platform
ionic cordova platform remove browser

# add the browser platform
ionic cordova platform add browser

# build with production mode
MY_ENV=staging ionic cordova build browser --prod --release

# deploy to the server
rsync -r platforms/browser/www/* cloud@[SERVER_IP]:/home/cloud/www/

Note. I later built a more complex deploy process trying to debug the issue but the result was the same.

My guess is that the cause may be related to some inner workings of ionic in the browser happening when visiting a new page, it had a reference with some kind of ID from the previous deploy, looks for it and then fails because the new deployed version changed that ID. The API didn't change, so the endpoints are not the problem.

To add some extra context, below is the way we manage our environments using webpack and the MY_ENV variable used in the deploy script above; and the versions of the packages in the project.

Environment Management

var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');
module.exports = function () {
var env = process.env.MY_ENV || process.env.IONIC_ENV;

var environmentsMapping = {
dev_docker: 'dev',
test: 'dev',
test_local: 'dev',
staging: 'prod',
qa: 'prod'
}

if (env !== 'prod' && env !== 'dev') {
// Default to dev config
useDefaultConfig[env] = useDefaultConfig[ environmentsMapping[env] ];
}

useDefaultConfig[env].resolve.alias = {
"@environment": path.resolve(__dirname + '/../../src/config/config.' + env + '.ts'),
};

return useDefaultConfig;
};

Packages

"dependencies": {
"@angular/common": "5.0.0",
"@angular/compiler": "5.0.0",
"@angular/compiler-cli": "5.0.0",
"@angular/core": "5.0.0",
"@angular/forms": "5.0.0",
"@angular/http": "5.0.0",
"@angular/platform-browser": "5.0.0",
"@angular/platform-browser-dynamic": "5.0.0",
"@ionic-native/app-version": "^4.11.0",
"@ionic-native/core": "4.3.2",
"@ionic-native/geolocation": "^4.15.0",
"@ionic-native/native-geocoder": "^4.15.0",
"@ionic-native/splash-screen": "4.3.2",
"@ionic-native/status-bar": "4.3.2",
"@ionic/storage": "^2.1.3",
"@ngx-translate/core": "^9.1.1",
"@ngx-translate/http-loader": "^2.0.1",
"analytics-node": "^3.3.0",
"brmasker-ionic-3": "^1.0.9",
"cordova-android": "7.0.0",
"cordova-browser": "5.0.3",
"cordova-plugin-app-version": "^0.1.9",
"cordova-plugin-device": "^1.1.4",
"cordova-plugin-ionic-webview": "^1.1.16",
"cordova-plugin-nativegeocoder": "^3.1.2",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-whitelist": "^1.3.1",
"cordova-sqlite-storage": "^2.3.1",
"flag-icon-css": "^3.0.0",
"ionic-angular": "3.9.2",
"ionic-plugin-keyboard": "^2.2.1",
"ionic2-rating": "^1.2.2",
"ionicons": "3.0.0",
"jquery": "^3.3.1",
"lodash": "^4.17.5",
"moment": "^2.21.0",
"ng-select": "^1.0.0-rc.5",
"ngx-bootstrap": "^2.0.5",
"ngx-credit-cards": "^1.0.9",
"raven-js": "^3.26.4",
"rxjs": "5.5.2",
"slick-carousel": "^1.8.1",
"sw-toolbox": "3.6.0",
"zone.js": "^0.8.21"
},
"devDependencies": {
"@ionic/app-scripts": "3.1.0",
"@ionic/cli-plugin-cordova": "1.6.2",
"@types/jasmine": "^2.8.7",
"@types/node": "^10.1.2",
"angular2-template-loader": "^0.6.2",
"html-loader": "^0.5.5",
"ionic": "3.20.0",
"istanbul-instrumenter-loader": "^3.0.1",
"jasmine": "^3.1.0",
"jasmine-spec-reporter": "^4.2.1",
"karma": "^2.0.2",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.0",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^1.1.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^3.0.0",
"null-loader": "^0.1.1",
"postcss": "6.0.14",
"protractor": "^5.3.2",
"ts-loader": "^3.5.0",
"ts-node": "^6.0.3",
"typescript": "2.4.2",
"ws": "3.3.2"
}

#2

You could try to detect a new version on the old client and force a page reload. (maybe that works as workaround)