Rollbar in Vue app causes freeze / 100% CPU usage (inf. recursion)

[piyushsinghania]

I have a color picker in my site which shows up on clicking an icon. The site is built using Vue and is integrated with Rollbar. Though rollbar is working fine and is able to log errors to the dashboard. But few days back I encountered a weird problem with rollbar, when I mistakenly missed to add the input tag for color picker.

What is expected? Ideally there should be an error and it should be logged in rollbar.

What is happening? There's and infinite log of warning from rollbar in the console and the CPU utilisation peaks up to 100% and the site freezes.

Removing Rollbar - Removing rollbar integration doesn't freezes the site and logs the following warning and error in console -

Is there anything wrong with Rollbar internals? or is there a way I can tackle this problem? Thanks, Ahead!

[piyushsinghania]

Removing the vueComponent optional parameter from rollbar.error method helped me to prevent app freeze.

[MarcusEngvall]

We had this exact issue in our app. piyushsinghania's fix solved all issues for us when the underlying problem was an error being reported by Vue, however if there were warnings (such as computed property X is readOnly but was assigned to...) then the infinity-loop would still trigger. Adding a warningHandler solved this for us.

    app.config.errorHandler = (error, vm, info) => {
      rollbar.error(error, { info });
      console.error(error);
    };
    app.config.warnHandler = (msg, instance ,trace) => {
      console.warn(msg);
    };

[amokrunnr]

I was also experiencing a similar freeze, rollbar.umn.min.js was hanging at this line: try{for(o in e)(n=e[o])&&(i(n,"object")||i(n,"array"))?r.includes(n)?u[o]="Removed circular reference: "+s(n):((a=r.slice()).push(n)

@piyushsinghania 's fix has addressed it.

What rollbar functionality am I losing by removing the vueComponent parameter?

[piyushsinghania]

What rollbar functionality am I losing by removing the vueComponent parameter?

I have the same question as that of @amokrunnr

[waltjones]

What rollbar functionality am I losing by removing the vueComponent parameter?

It can be safely omitted.

This is the object representing the component where the error happened. Not selective error info, but rather the full object.

This shows up as a custom key in the Rollbar error, when passed as shown in the example.

If you're seeing an issue like described above, or an issue related to the size of the object, it can be omitted, or you can pass only the part(s) you're interested in.