tinesoft/ngx-cookieconsent

Cannot read property 'palette' of null

Kenji94 opened this issue · 4 comments

Hi,

Thank you for your lib!

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> 'Cannot read property 'palette' of null'

### CookieConsent and Library Versions?

 "cookieconsent": "^3.1.1",
 "ngx-cookieconsent": "^2.2.3",

OS Version?

browser Chrome Mobile 77.0.3865

Angular, Node and al Versions?

angular 9

Repro steps

Bug: 'Cannot read property 'palette' of null'
Cannot reproduce locally but is happening for some user on prod
This is happening either when:
this.ccService.destroy(); high chance this is happening on this line
or
this.ccService.init(this.ccService.getConfig()); low chance it is happening on this line

The log given by the failure

Node.removeChild(s),e.customStyles[n]=null}}}(this.options.palette),this.options=null},o.prototype.open=function(t){if(this.element)return t {snip}

Desired functionality

No crash

Mention any other details that might be useful

in my setup i have:
const cookieConfig: NgcCookieConsentConfig = {
cookie: {
domain: environment.domain
},
palette: {
popup: {
background: '#012E4B'
},
button: {
background: '#33B4A5'
}
},
theme: 'edgeless'
};

Hi @Kenji94 ,

I've just tested with your config on latest version of Angular (v9.1.0) and never encountered this error... I'm afraid there is not much i can do at this point...

Why do you need to call this.ccService.destroy()? and where do you call it?

It happens very rarely that's why it is difficult to find the origin of the problem.
Whenever the user change the website language, I call "updateCookiePopupLanguage()" to modify the popup if it is visible.

private updateCookiePopupLanguage() {

this.translateService
  .get(['cookie.header', 'cookie.message', 'cookie.dismiss', 'cookie.allow', 'cookie.deny', 'cookie.link', 'cookie.policy'])
  .subscribe(data => {
    this.ccService.getConfig().content = this.ccService.getConfig().content || {};
    // Override default messages with the translated ones
    this.ccService.getConfig().content.header = data['cookie.header'];
    this.ccService.getConfig().content.message = data['cookie.message'];
    this.ccService.getConfig().content.dismiss = data['cookie.dismiss'];
    this.ccService.getConfig().content.allow = data['cookie.allow'];
    this.ccService.getConfig().content.deny = data['cookie.deny'];
    this.ccService.getConfig().content.link = data['cookie.link'];
    this.ccService.getConfig().content.policy = data['cookie.policy'];
    try {
      this.ccService.destroy(); // remove previous cookie bar (with default messages)
    } catch (e) {
      this.consoleLoggerService.error('updateCookiePopupLanguage, this.ccService.destroy() crashed', e);
    }

      const cookieStatus = localStorage.getItem(Constants.cookieStatus);
      this.consoleLoggerService.log('cookieStatus', cookieStatus);
      if (cookieStatus && (cookieStatus === 'allow' || cookieStatus === 'dismiss')) {
        this.consoleLoggerService.log('do not show again the cookie popup');
        return;
      }
      this.ccService.init(this.ccService.getConfig()); // show popup
 
  });

}

I also regularly encounter this error in my Angular 9 application. It happens occasionally when ccService.destroy() is called.
I need to call this method when I load the consent from a different source, and need to hide the CC bar.

I suspect it happens because the destroy() call tries to access the options object, which might not yet have been initialized in the view. A null check would probably fix it.

Some further investigation tells me that the https://github.com/osano/cookieconsent dependency might be the problem.