WebSocket connection failing

[michaelchadwick]

I'm trying this awesome project out on a Rails 7.1.3 application, but getting the following error in the dev console:

WebSocket connection to 'ws://127.0.0.1:3000/_debugbar/cable' failed: 

I think this has something to do with Action Cable, but I'm only moderately familiar with how Ruby on Rails works, and have never used Action Cable before. What might be wrong?

[julienbourdeau]

Did you configure config.action_cable.allowed_request_origins as shown at the bottom of this page?
https://debugbar.dev/docs/installation/

[michaelchadwick]

The code in your installation guide mentions something called Algolia, which I don't use, so I'm not sure what to put in place of it. My site uses Redis, but switching that in did not work.

[julienbourdeau]

Yeah the doc is incorrect. It’s because I work at Algolia and I copy pasted the name from the codebase I’m working on. It should be your app name. You can probably use Rails:: instead of Algolia:: I’ll edit the docs. 

On February 22, 2024, Marcin Magnus ***@***.***> wrote: The code in your installation guide mentions something called Algolia, which I don't use, so I'm not sure what to put in place of it. My site uses Redis, but switching that in did not work.

— Reply to this email directly, view it on GitHub <#14 (comment)- 1960109282>, or unsubscribe <https://github.com/notifications/unsubscribe- auth/AALUPBFCUOCDVTDHFXNN5TDYU6LY7AVCNFSM6AAAAABDVHTREWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNRQGEYDSMRYGI>. You are receiving this because you commented.Message ID: ***@***.***>

[michaelchadwick]

I changed my config/environments/development.rb to read as follows, but it still gives the same error:

Rails.application.configure do
  ...
  config.action_cable.allowed_request_origins = [%r{http://*}, %r{https://*}]
end

[fusionlove]

Same issue. Would appreciate fix so can try software.

[julienbourdeau]

How do you serve your app? Do you use something like Nginx? If so, you need to have these 2 headers: https://gist.github.com/julienbourdeau/5d5edc2da97f5a35ba4003e6918e0920#file-nginx-site-conf-L26-L27

Until Websocket works, you can have a look at polling mode, which doesn't use websocket: https://debugbar.dev/docs/polling-mode/

[michaelchadwick]

While testing, I serve it using rails s.

[vkazakevich]

@michaelchadwick try specifying the url of your local site for callback debugbar_javascript ERB helper.

Like this:
<%= debugbar_javascript cable: {url: "ws://localhost:3000"} %>

[sergiopantoja]

@vkazakevich That worked for me! Thanks!

[michaelchadwick]

@vkazakevich That fixed that error! However, now I get this error in the dev console: Uncaught SyntaxError: Identifier 'cS' has already been declared (at script:1:1)

[Eric-Guo]

Can also using config.action_cable.disable_request_forgery_protection = true which maybe easier then config.action_cable.allowed_request_origins = [%r{http://*}, %r{https://*}]

[julienbourdeau]

@Eric-Guo Yeah it's definitely easier, I updated the docs. Thanks!

@michaelchadwick This error is fixed in 0.3.0, see #26

@vkazakevich Thank you! I added a troubleshooting section to the docs with your fix 🙏

[jathayde]

I had further issues as I went down this debug path. Found that the AppSignal logger dumping setup was messing with ActionCable. I updated my initializer that had other logging stuff in it based on this thread (bensheldon/good_job#596 (comment)):

formatter = ActiveSupport::Logger::SimpleFormatter.new
formatter.extend ActiveSupport::TaggedLogging::Formatter
Rails.logger.formatter = formatter

And now it's working great. Adding here for anyone else that hits this weird conflict between semantic logger and debugbar