Incoming call issue browser

[SimbaAzim]

I have followed the same instructions as you have mentioned and used the same code. For receiving the incoming call I have set the path '/voice/incoming' POST method. Receiving the call in backend but not in the browser, how I am gonna get that in browser.

[philnash]

It looks like on your server you are trying to <Dial> to a <Client>, which is correct. But instead of using the client's identity, you are using a phone number (twilio.config.callerId).

In my original code, the identity is set at the top of App.js, and it's just hardcoded to "phil". To dial to this client, your server should return TwiML like:

const dial = response.dial(options);
dial.client("phil");

Make sure you are dialling your client's identity and the phone should ring.

[SimbaAzim]

const dial = response.dial(options); dial.client("phil");

I have tried this too. Apart from ngrok i don't have to write anything in my code for forwarding the call to browser?

[philnash]

From your original post, it looks like you've made changes to the code. What happens if you run the original project?

[ababu-speedum]

first ringing but not reflecting in the browser and it says An application error has occurred.

for outgoing using this which works fine

for incoming using this

[philnash]

Hi @ababu-speedum, is this a different issue or are you working with @SimbaAzim?

When you say:

first ringing but not reflecting in the browser and it says An application error has occurred.

Is that for an inbound call to your Twilio number from someone on a phone? If so, is your ngrok tunnel setup properly? Can you see the incoming webhook request in the ngrok dashboard (visible at http://localhost:4040)?

[SimbaAzim]

that's also me

On Tue, Aug 16, 2022 at 11:11 AM Phil Nash @.***> wrote:

Hi @ababu-speedum https://github.com/ababu-speedum, is this a different issue or are you working with @SimbaAzim https://github.com/SimbaAzim?

When you say:

first ringing but not reflecting in the browser and it says An application error has occurred.

Is that for an inbound call to your Twilio number from someone on a phone? If so, is your ngrok tunnel setup properly? Can you see the incoming webhook request in the ngrok dashboard (visible at http://localhost:4040)?

— Reply to this email directly, view it on GitHub https://github.com/philnash/react-twilio-phone/issues/37#issuecomment-1216172481, or unsubscribe https://github.com/notifications/unsubscribe-auth/AVJ3VXIRDGIYAI3SZ64QVN3VZMSY3ANCNFSM56MZQYOQ . You are receiving this because you were mentioned.Message ID: @.***>

--

Thanks & Regards [image: Logo] https://www.simbaquartz.com/ Md Azim Babu Software Engineer (IT) Phone: +91 8837772881 Email: @. @.> SimbaQuartz National Highway-1, G.T Road, Tangra Amritsar, Punjab [image: LinkedIn icon] https://www.linkedin.com/in/mdazimbabu [image: Youtbue icon] https://www.youtube.com/c/MandeepKaurTangraStudio [image: Instagram icon]

[ababu-speedum]

Got this >>>

[philnash]

So that's an inbound call, what TwiML did you respond to it? And when did you get the error?

[ababu-speedum]

call ringing and auto end after few sec and no state change in front end for incoming call

[philnash]

Are you still setting the identity of the user that should be receiving the call to "phil" like I did in the original App.js?

[ababu-speedum]

yes

I have saprated the server code getting error for react-script in running server part

I am using PORT : 3000 for frontend and for server PORT : 5001

for ngrok used the ngrok http 3000 --host-header localhost:3000

for frontend proxy used the "proxy":"http://localhost:5001",

[philnash]

Oh, I think that's the problem. Making a request to another port like that is a cross origin request and the server is not setting CORS headers. But you are proxying port 3000 to port 5001, so you can just write:

    fetch(`/voice/token?identity=${encodeURIComponent(identity)}`)

That will make a request to the domain that you are viewing the site on, which will be proxied to your server and will not cause any cross domain issues.

In fact, that is how the original application did it (although it ran the server on port 3001 and proxied that instead).

[ababu-speedum]

Getting this error

I have already added the proxy in package.json file

and the fetch

I have started the APP using npm run dev

[ababu-speedum]

Can you check if it is working on your end ?

[philnash]

I have just run the original application using npm run dev and was able to proxy the request to the server and successfully retrieve a token. Have you changed anything on the server side? You said earlier that you were running the server on port 5001, is that still the case?

[ababu-speedum]

i have directly applied the .env values to config file porcess.ENV is not working and for the proxy it works fine if added http://localhost:5001 front of fetch api but i have to saprated the server from the app

Now i have 2 folder one for Front end running on 3000 and backend running on 5001

I am using twilo demo account and making call from twiML App

call ring and ended automatically

[philnash]

If you are running the server on port 5001, then make sure the "proxy" property in package.json is pointing to "http://localhost:5001".

[ababu-speedum]

done the same still not working for incoming calls

[philnash]

Is the issue still that you cannot get the token?

Can you publish your current version of this code to GitHub so I can check it out and see what is happening?

[ababu-speedum]

Forntend Repo ---> https://github.com/Az1m04/twilio-frontend Backend Repo ---> https://github.com/Az1m04/twilio-backend

[philnash]

You should have received an email already, but you seem to have included your api key and secret in the back end repo. I recommend you delete that API key now, so that a malicious user doesn't abuse your Twilio account.

[philnash]

Ok, I downloaded both projects, installed their dependencies, ran the server with npm start, ran the front end with npm start, opened the browser to localhost:3000 and it successfully requested a token and connected.

I think your issue maybe that in your config.js you have set incomingAllow to "true". That should actually be a boolean, not the string "true". In my original, incomingAllow was set to process.env.TWILIO_ALLOW_INCOMING_CALLS === "true" (which is true if the environment variable TWILIO_ALLOW_INCOMING_CALLS is equal to the string "true").

Try changing it to incomingAllow: true and see what happens.

[ababu-speedum]

It worked thanks !!

[philnash]

Great!

Now please tell me that you have deleted the API key that you leaked in that repo.

[ababu-speedum]

Great!

Now please tell me that you have deleted the API key that you leaked in that repo.

yes

[ababu-speedum]

in your APP its working fine , now i am implementing on my app getting the token but for outbound and inbound call gettin 404 not found

[ababu-speedum]

My server is now live how i am gonna tunnel it to my local app?

[philnash]

What do you mean your server is live?

In your previous message, you show the ngrok dashboard. Is ngrok pointing at the right localhost?

[ababu-speedum]

Suppose I have deployed the backend on https://example.com then i have to set the proxy for it in package.json

my frontend running on localhost 3000 I have ngrok the port 3000

backend is now not on 5001 it on http://example.com

if i have to access voice http://example.com/voice

for incoming http://example.com/voice/incoming

In twilio using ngrok [ngroxurl]/voice

[philnash]

The proxy setting is for use in development. It is a feature of webpack dev server. When you deploy this to production you should either deploy your static assets to the same domain.

Or, if you need to serve your static assets from a different domain, then you should add CORS headers to the responses from the server and fully qualify the domain in the front-end code.

If you have deployed your server to example.com, you should no longer be using ngrok, you should point Twilio at the public URLs you now have.

[philnash]

Have you managed to sort this out yet? Can this issue be closed?

[SimbaAzim]

Yah, thanks for helping me out.

On Tue, 23 Aug, 2022, 7:26 am Phil Nash, @.***> wrote:

Have you managed to sort this out yet? Can this issue be closed?

— Reply to this email directly, view it on GitHub https://github.com/philnash/react-twilio-phone/issues/37#issuecomment-1223424811, or unsubscribe https://github.com/notifications/unsubscribe-auth/AVJ3VXJYY4TSL34UFFUOWCDV2QVUVANCNFSM56MZQYOQ . You are receiving this because you were mentioned.Message ID: @.***>

[philnash]

Thanks for letting me know! Glad it's all working now.