[ui_next] [Meta-issue] Failed to execute 'Send' on Websocket: Still in CONNECTING state.

[unlikelyzero]

ISSUE TYPE

• Bug Report

SUMMARY

Multiple ways to trigger Failed to execute 'Send' on Websocket: Still in CONNECTING state.

1. Toggling between Job Output and Detail causes invalidstateerror.
2. Relaunching Jobs

ENVIRONMENT

• AWX version: 10664d1

STEPS TO REPRODUCE

1. Launch a Job
2. Navigate to the Output Page and toggle between Details and Output tabs

EXPECTED RESULTS

No errors

ACTUAL RESULTS

Unhandled error

ADDITIONAL INFORMATION

[mabashian]

Yea, I hit this by spamming the relaunch button 5-10 times

[akus062381]

Important Note: this same error is appearing when you click the Relaunch button from the job output screen.

[tiagodread]

This bug was fixed with #10339, there are still some places where the websocket is being closed:

• Host tabs: Moving from Groups tab to Jobs tab
• Project list after clicking on a project

may be fixed with #10192

[my2ter]

Old topic and people have probably moved away and use latest AWX but for those still stuck in 17.1 - or around that version - with similar error, the reason for the Job Events panel to not reload is due to the jobSocketCounter not being updated properly...

The websocket works, you can see in the Network tab that it gets updated and receives messages (if you don't then your error is not this issue and you should look at the nginx proxy conf - that might be the problem for you)

Othwerwise for this see below:

https://github.com/ansible/awx/blob/17.1.0/awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx#L259

In here update to:

componentDidMount() {
    const { job } = this.props;
    this._isMounted = true;
    this.loadJobEvents();
    this.jobSocketCounter = 0;

    connectJobSocket(job, data => {
      if (data.group_name === 'job_events') {
        if (data.counter && data.counter > this.jobSocketCounter) {
          this.jobSocketCounter = data.counter;
        }
      }
      if (data.group_name === 'jobs' && data.unified_job_id === job.id) {
        if (data.final_counter) {
          this.jobSocketCounter = data.final_counter;
        }
      }
    });
    this.interval = setInterval(() => this.monitorJobSocketCounter(), 5000);
  }

And voila.

If you want to fix that error "Send' on Websocket: Still in CONNECTING" update the following:

https://github.com/ansible/awx/blob/17.1.0/awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx#L179

ws.onopen = () => {
    const xrftoken = `; ${document.cookie}`
      .split('; csrftoken=')
      .pop()
      .split(';')
      .shift();
    const eventGroup = `${type}_events`;
    if (ws.readyState === WebSocket.OPEN) {
    ws.send(
      JSON.stringify({
        xrftoken,
        groups: { jobs: ['summary', 'status_changed'], [eventGroup]: [id] },
      })
    );
    }
  };

I doubt the AWX team will ever release a fix (feel free to submit a PR with my code, but I won't), so you will need to rebuild ui_next yourself and update AWX.

Hope that helps someone, I spent a day looking into this as I was frustrated to not be able to see live updates. But also can't upgrade to latest AWX.

[ygemici]

Old topic and people have probably moved away and use latest AWX but for those still stuck in 17.1 - or around that version - with similar error, the reason for the Job Events panel to not reload is due to the jobSocketCounter not being updated properly...

The websocket works, you can see in the Network tab that it gets updated and receives messages (if you don't then your error is not this issue and you should look at the nginx proxy conf - that might be the problem for you)

Othwerwise for this see below:

https://github.com/ansible/awx/blob/17.1.0/awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx#L259

In here update to:

componentDidMount() {
    const { job } = this.props;
    this._isMounted = true;
    this.loadJobEvents();
    this.jobSocketCounter = 0;

    connectJobSocket(job, data => {
      if (data.group_name === 'job_events') {
        if (data.counter && data.counter > this.jobSocketCounter) {
          this.jobSocketCounter = data.counter;
        }
      }
      if (data.group_name === 'jobs' && data.unified_job_id === job.id) {
        if (data.final_counter) {
          this.jobSocketCounter = data.final_counter;
        }
      }
    });
    this.interval = setInterval(() => this.monitorJobSocketCounter(), 5000);
  }

And voila.

If you want to fix that error "Send' on Websocket: Still in CONNECTING" update the following:

https://github.com/ansible/awx/blob/17.1.0/awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx#L179

ws.onopen = () => {
    const xrftoken = `; ${document.cookie}`
      .split('; csrftoken=')
      .pop()
      .split(';')
      .shift();
    const eventGroup = `${type}_events`;
    if (ws.readyState === WebSocket.OPEN) {
    ws.send(
      JSON.stringify({
        xrftoken,
        groups: { jobs: ['summary', 'status_changed'], [eventGroup]: [id] },
      })
    );
    }
  };

I doubt the AWX team will ever release a fix (feel free to submit a PR with my code, but I won't), so you will need to rebuild ui_next yourself and update AWX.

Hope that helps someone, I spent a day looking into this as I was frustrated to not be able to see live updates. But also can't upgrade to latest AWX.

Hi my2ter,
Is there a way to do this without deleting or rebuilding the existing dockers for AWX 17.1?