Open stream after listeners are added

[ostap0207]

Contributing to Twilio

All third party contributors acknowledge that any contributions they provide will be made under the same open source license that the open source project is provided under.

• [x] I acknowledge that all my contributions will be made under the project's license.

Pull Request Details

Description

Currently error listener is added after the connection is open. So if there is a synchronous error during connection open (for example exeption) then we don't receive this error in the error listener.

We found this after noticing that if websocket connection to Twilio is blocked by CSP then on iOS Safari it's not being reported as error.

On Chrome this does not reproduce as it will not throw an error in this case, but instead call WebSocket error listener.

Burndown

Before review

• [ ] Updated CHANGELOG.md if necessary
• [x] Added unit tests if necessary
• [ ] Updated affected documentation
• [x] Verified locally with npm test
• [x] Manually sanity tested running locally
• [x] Ready for review

Before merge

• [ ] Got one or more +1s
• [ ] Squashed erroneous commits if necessary
• [ ] Re-tested if necessary

[ostap0207]

Will test this manually to ensure it works in a bit.

[ostap0207]

Works manually, not quite sure why CI fails.

[charliesantos]

Thanks for submitting @ostap0207 . I'll take a look and also check why CI is failing.

[charliesantos]

@ostap0207 , can you please provide a reproduction steps, along with code snippets that can simulate the issue you're seeing?

[ostap0207]

Here are the steps based on the client-quickstart-js

1. Add the following line to the head tag. It allows all the required URLs except wss://*.twilio.com to simulated websockets being blocked.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' *.gstatic.com; style-src 'self' 'unsafe-inline' *.googleapis.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' *.googleapis.com *.twiliocdn.com; connect-src 'self' https://*.twilio.com *.twil.io; img-src 'self'; media-src 'self'">

2. Modify quickstart.js to setup the device after the listeners are added.
3. Open the page in iOS Safari

Expected: Twilio.Device Error: appears on the screen. Works if you open the page in Chrome. Actual: The error does not appear as the error listener is not being called. In the console log there is an error Refused to connect to wss://chunderw-vpc-gll.twilio.com/signal because it does not appear in the connect-src directive of the Content Security Policy. which is expected.

Or use the project attached below: client-quickstart-js.zip

[ostap0207]

The error that's not being triggered is https://github.com/twilio/twilio-client.js/blob/6d73cf602fbc729b4df6e4ecc644a0ddde8fe1d9/lib/twilio/wstransport.ts#L298. This error happens synchronously, but the listeners in device are currently added only after connection is created.

[charliesantos]

Thanks @ostap0207 . We implemented asyncEmit before in Connection object. I'm thinking if that is a better implementation. I filed an internal ticket to track this. I'll keep you updated. https://issues.corp.twilio.com/browse/CLIENT-8118

[ostap0207]

Any updates on this?