Cordova.js in <head/> or in <body/>

Since I introduced Sentry I get some reports of weird issue like

Native: tried calling StatusBar.styleDefault, but the StatusBar plugin is not installed.
Install the StatusBar plugin: ‘ionic cordova plugin add cordova-plugin-statusbar’

or

ERROR Error: Uncaught (in promise): TypeError: undefined is not an object (evaluating ‘window.Branch.initSession’)

or

GET ./assets/i18n/en.json [0]
ERROR [object Object]

This happens on very few devices of my users but still, I’ve to find the reason.

I could not reproduce the problem, therefore it’s a bit difficult to know what’s really the problem. Right now I’m betting on the fact that sometimes on few devices, code is executed when cordova isn’t loaded yet even if these part are under platform.ready check.

But, I noticed that I’ve got

 <script src="cordova.js"></script>

in the <body/>, since Ionic 2.RC0, and not in the <head/> as a it is with a brand new fresh dummy app (“ionic start …”).

I guess that may be a weird side effect of this, so just wanted to ask, do you guys load the cordova.js script in the <head/> or <body/> part of your index.html?

Also if someone has got a better idea?

P.S.: For the record I read this to come to this idea https://github.com/ionic-team/ionic-plugin-deploy/issues/136 … doesn’t related at all, but who knows…

I would LOVE to know if you fixed this by putting the cordova.js in the head instead of body. We’re having the exact same issue when introducing Sentry, some errors come back saying that xxx plugin is not installed.

Sorry for not having written a feedback yet, I was waiting a couple of more days and weeks to see how it improves

Two things:

First, I think it do improves a bit but it’s not like I don’t have the warning anymore, I have the warning less often. I don’t know if it’s because the problem isn’t solved or because not all users upgraded their apps, it’s hard to say, it’s better but I still saw it (that’s why also I was waiting a couple of days/weeks before writing about it)

Secondly I noticed something, often, errors are also reported to Sentry when I’m debugging with ionic serve and when I do a modification which trigger a rebuild which trigger a reload of the app in Chrome (for example). Even if I take care in my code to not trigger event when I work locally (I do something like “if config dev then no sentry”), when the script rebuild, the app might finds itself in a partial state which gonna allow the errors to be sent to Sentry. So long story short, it’s also possible that the error might be sent to Sentry when I work/debug locally and when my app rebuild

I’m not sure if that helps you too, it’s really difficult for me to find the proper reason to this error.

If you find something I would love to hear your feedback.

Thank you for replying! We will try the same and let you know as well. It’s good to add the app version in your sentry errors so you know if the error is due to a previous version or not. But I agree this one is very hard to diagnose, it could also be affecting end-users if the plugins are indeed not loaded so they won’t have the same experience.

We also tried to suppress errors when we develop locally but sometimes they do get through as you said. Very difficult to diagnose stuff with Ionic/Cordova sometimes.

It’s really good to know I’m not the only one facing these problems, we keep in touch!

And thx about the remark to add the App version within the errors sent to Sentry, good tips!

1 Like

@id90travelapp did you solve the problem on your side?

from my side, it look like it happens less often but it definitely still happens respectively I still see this error time to time in Sentry :frowning:

Hey sorry just now seeing this! I think it’s less for us too, I can’t know for sure just yet but it is looking good. I will keep you updated on this as we continue to see updates…

cool @id90travelapp

actually I may have found something in the meantime too, I’m wainting a couple of days to see what happens :crossed_fingers:

Look like I was finally able to get rid of this unexpected captureException reported by Sentry

  1. Yes moving cordova.js from the body to head improved the situation

but

  1. What definitely solved the issue was to move the initialization of ngx-translate from the constructor or app.compontnet to it’s ngOnInit() method

app.component.ts:

 constructor() {
    this.initializeTranslateServiceConfig(); // <-- Sentry report that if placed there, init will sometimes not work
 }
 
 ngOnInit() {
     this.initializeTranslateServiceConfig(); // <-- moving the call here solved my issue
 } 
 
 private initializeTranslateServiceConfig() {
    let userLang: string = this.translateService.getBrowserLang();
    userLang = /(de|en|fr|it)/gi.test(userLang) ? userLang : 'en';

    this.translateService.addLangs(['en', 'de', 'fr', 'it']);
    this.translateService.setDefaultLang('en');
    this.translateService.use(userLang);
}

:slight_smile:

P.S.: @id90travelapp did you solve your issue the same way?

I assume Sentry is a bug reporting system.
Out of interest is Sentry good to use and can it work offline?

@JAR19 exactly a bug reporting tool. I picked Sentry for the following reason [SOLVED] Track errors and crashes, advice on tools

I think it’s good and I could recommend it. Sentry allowed me to discover a couple of minor issues, because you could test as much as you want, your users always gonna have their own behavior :wink:

not sure if it works offline but you could maybe follow the following issue to get an answer or solution about this https://github.com/getsentry/raven-js/issues/279 (raven.js is the javascript library from Sentry)