CODEWITHSUNDEEP
electronchromium
jeanpaul62
jeanpaul62

Reputation: 10551

Electron: [Violation] 'click' handler took 574ms

I'm building a SPA, and everything works fine in Chrome browser. I try to run the same code in Electron, and I have the following error (when clicking on a button):

[Violation] 'click' handler took 574ms

Moreover, right after this error, all IPC calls between webview and guest page (via ipcRenderer.sendToHost) are blocked, i.e. not arriving to the webview.

Googling a bit taught me that the limit for blocking UI is 50ms. Is there a way I can increase this limit?

Edit: Here's the code which handles the click. It's a tabbar with one tab. Code is reactjs.

import { Link } from 'react-router';
import { Tab as MUITab } from 'material-ui/Tabs';

class TabBar extends Component {
  render() {
    const view = {
      to: '/accounts',
      id: 'accounts',
      icon: 'home',
      label: 'ACCOUNTS'
    };

    return (
      <Link to={ view.to }> // <--- <a> tag in DOM, receives the click
        <Tab view={ view } />
      </Link>
    );
}

class Tab extends Component {
  static propTypes = {
    view: PropTypes.object.isRequired
  };

  render () {
    const { view } = this.props;

    return (
      <MUITab
        icon={ view.icon }
        label={
          this.renderLabel(view.id)
        }
      />
    );
  }

  renderLabel (id, bubble) {
    return (
      <div className={ styles.label }>
        <FormattedMessage
          id={ `settings.views.${id}.label` }
        />
        { bubble }
      </div>
    );
  }
}

Upvotes: 4

Views: 10322

Answers (1)

OJ Kwon
OJ Kwon

Reputation: 4641

Googling a bit taught me that the limit for blocking UI is 50ms. Is there a way I can increase this limit?

Probably not the answer you want, but I'd rather suggest refactor code not blocking. 50ms is noticeable time for users, and if your code blocks average 500ms, it'll make noticeable UI lags to user. Electron's IPC have asynchronous mechanism - try to avoid sync but use async one instead to make UI non-blocking.

Upvotes: 1

Related Questions