philnash / react-twilio-phone

A Twilio Client based web phone, built with React
MIT License
49 stars 38 forks source link

Please help. I followed your guide but facing errors #28

Closed Sunilg1234 closed 2 years ago

Sunilg1234 commented 2 years ago

In console I got this error:

Proxy error: Could not proxy request /voice/token?identity=phil from localhost:3000 to http://localhost:3001/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

Likewise, I am confused in your guide. What url do I write in twilio incoming calls? Also the ngrok link will be different everytime I connect right? So, in outgoing call of twilio app i write: http://ff90-202-51-88-209.ngrok.io/voice ?

philnash commented 2 years ago

I think your first issue is that you need to run the project with npm run dev.

The ngrok link will be different every time you restart ngrok, unless your pay for an account and can use a subdomain of your choice. Otherwise start ngrok then use the URL that's shown, plus /voice (like in your question).

Sunilg1234 commented 2 years ago

Thank you so much for getting back to me. I am beginner to all this, so I am having hard time.

So, in both incoming and outgoing in twilio, I right ngrok link + /voice?

To use the react app daily through this, I have to npm run dev, then operate ngrok, put the link and I am good to go?

philnash commented 2 years ago

Ah, my mistake, incoming should be /voice/incoming.

You could always run the app like that, or you could deploy it somewhere and have it always run. I'll admit, I doubt I included good instructions to deploy, but you might be able to figure it out.

Sunilg1234 commented 2 years ago

Still the same error :(

undefined:3
return typeof s === "string" ? %FlattenString(s) : s
                               ^

SyntaxError: Unexpected token '%'
    at actualWrite (C:\Users\maina\react-twilio-phone\node_modules\sonic-boom\index.js:192:3)
    at SonicBoom.write (C:\Users\maina\react-twilio-phone\node_modules\sonic-boom\index.js:101:5)
    at Pino.write (C:\Users\maina\react-twilio-phone\node_modules\pino\lib\proto.js:98:43)
    at Pino.LOG [as info] (C:\Users\maina\react-twilio-phone\node_modules\pino\lib\tools.js:39:21)
    at ServerResponse.onResFinished (C:\Users\maina\react-twilio-phone\node_modules\pino-http\logger.js:47:18)
    at ServerResponse.emit (node:events:402:35)
    at onFinish (node:_http_outgoing:830:10)
    at callback (node:internal/streams/writable:552:21)
    at afterWrite (node:internal/streams/writable:497:5)
    at afterWriteTick (node:internal/streams/writable:484:10)
Proxy error: Could not proxy request /voice/token?identity=phil from localhost:3000 to http://localhost:3001/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

In ngrok

GET /voice/token               500 Internal Server Error        
philnash commented 2 years ago

How are you running the application?

Sunilg1234 commented 2 years ago

At first I cloned your repo copied .env.example file, deleted it, then I created new .env file in home directory with my details ran ngrok code npm run dev wrote ngrok link in both incoming and outgoing

then in my browser I went to ngrok link/voice

everything works fine, but when I click connect I get above errors.

philnash commented 2 years ago

That error means that the server side is not running for some reason. Can you run npm run server alone and see if the server is able to start or if you get another error?

Sunilg1234 commented 2 years ago

Yes it shows the same error when I try to go to http://localhost:3001/ after I enter npm run server

Also, In twilio, both incoming and outgoing is http POST?

philnash commented 2 years ago

The error you were seeing before was React saying that it could not proxy to localhost:3001. You should not be seeing that same error when you only run the server because the React application is not running.

Can you run npm run server and then try to visit http://localhost:3001/voice/token in the browser. If you get an error please tell me what the error is also check the terminal where you ran the server and let me know if there is an error there too, and if so, what the error says.

Also, In twilio, both incoming and outgoing is http POST?

Yes, you can see the server endpoints here and that they are post requests: https://github.com/philnash/react-twilio-phone/blob/master/server/index.js#L66-L81

Sunilg1234 commented 2 years ago

Thank you. I visited http://localhost:3001/voice/token after I ran npm run server ,It gave me the token and no errors

philnash commented 2 years ago

Ok, the server works.

So now if you run both npm run server and npm start that will start the client and the server separately.

If you do that, does the application work?

Sunilg1234 commented 2 years ago

Still the same error. Also after I tried the server second time, it showed the error.

do you recommend doing npm audit fix or npm audit fix --force

philnash commented 2 years ago

Were there any errors in the terminal?

Sunilg1234 commented 2 years ago

yes in npm run server :

undefined:3
return typeof s === "string" ? %FlattenString(s) : s
                               ^

SyntaxError: Unexpected token '%'
    at actualWrite (C:\Users\maina\Desktop\react-twilio-phone\node_modules\sonic-boom\index.js:192:3)
    at SonicBoom.write (C:\Users\maina\Desktop\react-twilio-phone\node_modules\sonic-boom\index.js:101:5)
    at Pino.write (C:\Users\maina\Desktop\react-twilio-phone\node_modules\pino\lib\proto.js:98:43)
    at Pino.LOG [as info] (C:\Users\maina\Desktop\react-twilio-phone\node_modules\pino\lib\tools.js:39:21)
    at ServerResponse.onResFinished (C:\Users\maina\Desktop\react-twilio-phone\node_modules\pino-http\logger.js:47:18)    
    at ServerResponse.emit (node:events:402:35)
    at onFinish (node:_http_outgoing:830:10)
    at callback (node:internal/streams/writable:552:21)
    at afterWrite (node:internal/streams/writable:497:5)
    at afterWriteTick (node:internal/streams/writable:484:10)
[nodemon] app crashed - waiting for file changes before starting...

In npm start :

Proxy error: Could not proxy request /voice/token?identity=phil from localhost:3000 to http://localhost:3001/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).
philnash commented 2 years ago

It looks as though you are having trouble with pino, the logger.

If you remove or comment out the line in server/index.js that uses pino and try again, what happens?

Sunilg1234 commented 2 years ago

Thank you now it works!

philnash commented 2 years ago

We'll that's weird. I've not known pino not to work before, it might be something worth raising on the pino repo.

Glad this is working for you now!