Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Call hang and freeze browser #15229

Closed
mgohin opened this issue Dec 3, 2019 · 10 comments
Closed

Call hang and freeze browser #15229

mgohin opened this issue Dec 3, 2019 · 10 comments
Labels
not-in-changelog For issues or pull requests that should not be included in our release changelog on matomo.org.

Comments

@mgohin
Copy link

mgohin commented Dec 3, 2019

We use Angular 8 with ngx-translate in our project and sometimes matomo call doesn't end so it freezes the page.

called url by matomo :

https://mydomain.com/piwik.php?action_name=MyPage&idsite=47&rec=1&r=203661&h=11&m=19&s=58&url=http%3A%2F%2Flocalhost%3A3000%2F%23%2Fpublic%2Ftest&urlref=http%3A%2F%2Flocalhost%3A3000%2F&_id=fab9aa671acf9075&_idts=1575284641&_idvc=2&_idn=0&_refts=0&_viewts=1575362367&send_image=1&pdf=1&qt=0&realp=0&wma=0&dir=0&fla=1&java=0&gears=0&ag=0&cookie=1&res=1680x1050&gt_ms=831&pv_id=Dmyu7L

This syntax makes it fail, and it's about the line-break between translate and </button>

<button
        class="btn btn-primary"
        [routerLink]="['/myurl']"
        translate>key.to.translate
</button>

But this one works :

<button
        class="btn btn-primary"
        [routerLink]="['/myurl']"
        translate>key.to.translate</button>

And this one too

<button
  class="btn btn-primary"
  [routerLink]="['/myurl']"
>{{'key.to.translate' | translate}}</button>

So I guess matomo tracks the button but fail on this one. Can you guide me how to avoid that kind of troubles (and please don't tell me to change the html syntax :) )

@mgohin mgohin changed the title Call hang Call hang and freeze browser Dec 3, 2019
@mgohin
Copy link
Author

mgohin commented Dec 3, 2019

Some news because we have the problem on button component.

<button class="btn" [type]="type" [ngClass]="getClass()" 
    [attr.disabled]="loading || disabled ? 'disabled' : null"
              (click)="clicked.emit($event)">
          <ng-content></ng-content>
</button>
getClass() {
    const classes = [];
    if (this.block) {
      classes.push('btn-block');
    }

    if (this.size) {
      classes.push(`btn-${this.size}`);
    }

    if (this.loading || this.outline) {
      classes.push(`btn-outline-${this.color}`);
    } else {
      classes.push(`btn-${this.color}`);
    }

    return classes;
  }

The tab freezes because getClass keeps being called. So I guess matomo is "touching" the button somehow and triggers Angular updates ?

@tsteur
Copy link
Member

tsteur commented Dec 3, 2019

sorry could you explain a bit more where you use Angular 8? We are using Angular 1 here. Are you developing a plugin? We can't give any support for Angular 8.

@Arnaud73
Copy link

Arnaud73 commented Dec 3, 2019

This is not going to be a simple issue.

What surprises me is the very subtle difference between the working code and the freezing code : a simple line break. Since the Angular template is no real HTML code, it is being compiled as javascript for handling DOM modification, I find it surprising that a simple line break is changing the generated code, but it could be.

Regarding Angular 8, are you using the new Ivy Renderer? If not, can you activate it (it is not by default) and check if anything changes?

@tsteur
Copy link
Member

tsteur commented Dec 3, 2019

@Arnaud73 @mgohin just checking are you sure you wanted to post this in the Matomo issue tracker?

@Arnaud73
Copy link

Arnaud73 commented Dec 3, 2019

@tsteur, I just wanted to add that this issue may not be an easy one to decide what needs to be fixed. Some simple test application may need to be produced in order to reproduce it and understand what's going on. Then this issue may also need to be posted to the Angular team.

@mgohin
Copy link
Author

mgohin commented Dec 4, 2019

@tsteur we are developing our projects with Angular 8 and we use @Arnaud73 's plugin https://github.com/Arnaud73/ngx-matomo but it seems to just wrap the api.

Matomo is mandatory for us, that's why I'm posting here, I'm dicovering Matomo so maybe I'm in the wrong place ?
Does matomo add listeners, class or anything else on buttons without setting a tracker on it ?

I tried Ivy. After a very long compilation time, it broke the app with forms, so cannot use it :(

@tsteur
Copy link
Member

tsteur commented Dec 4, 2019

You mean in the JS tracker? We're not adding any listeners to buttons unless you were to call the addListener tracker method for a specific element. That would be more https://github.com/Arnaud73/ngx-matomo related though

@Arnaud73
Copy link

Arnaud73 commented Dec 5, 2019

@mgohin, is there any chance you could come with a striped down version of your app that reproduces the problem?

@mattab
Copy link
Member

mattab commented Jan 21, 2020

Maybe this bug should be created in https://github.com/Arnaud73/ngx-matomo directly?

@mgohin mgohin closed this as completed Nov 3, 2020
@mattab mattab added the not-in-changelog For issues or pull requests that should not be included in our release changelog on matomo.org. label Nov 23, 2020
@Stanteq
Copy link

Stanteq commented Feb 13, 2023

As a workaround I fount this working solution

window["_paq"].push(['HeatmapSessionRecording::disable'])

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
not-in-changelog For issues or pull requests that should not be included in our release changelog on matomo.org.
Projects
None yet
Development

No branches or pull requests

5 participants