How to start debugging a web socket connection?

Hi everyone!

I have a chat app live and some users haven’t been able to connect to their socket.

At first I thought it was my frontend code but I changed things and still doesn’t connect for this user and probably others (it works for me and other users)

this is where I make the socket connection https://pelable.com/js/chatroom.js

import {Socket} from "./phoenix.js"
import Chat from "./chat.js";
import ChatNotification from "./chatnotification.js";
import ChatPresence from "./chatpresence.js";



window.onload = function () {
    convert_to_local_datetimes();
    prepare_rendered_messages();
    console.log("user token: ")
    console.log(get_user_token())
    let socket = new Socket("/socket", {params: {token: get_user_token()}})
    socket.connect()
    Chat.init(socket);
    ChatNotification.init(socket);
    ChatPresence.init(socket);
    };

I’m now thinking it probably is my configuration in the backend:

this is my releases.exs

import Config
config :logger, level: :info
config :pelable, PelableWeb.Endpoint, server: true


config :pelable, PelableWeb.Endpoint,
  http: [:inet6, port: String.to_integer(System.get_env("PORT") || "4000")],
  secret_key_base: System.get_env("SECRET_KEY_BASE")

config :pelable, Pelable.Repo,
  ssl: true,
  database: System.get_env("DATABASE_URL"),
  pool_size: String.to_integer(System.get_env("POOL_SIZE") || "10")

This is my prod.exs

use Mix.Config
config :pelable, PelableWeb.Endpoint,
  http: [:inet6, port: System.get_env("PORT") || 4000],
  url: [host: System.get_env("RENDER_EXTERNAL_HOSTNAME") || "localhost", port: 80],
  check_origin: ["//locahost", "//pelable.com"],
  cache_static_manifest: "priv/static/cache_manifest.json"

config :logger, level: :info

and my config.exs:

use Mix.Config

config :pelable,
  ecto_repos: [Pelable.Repo]

# Configures the endpoint
config :pelable, PelableWeb.Endpoint,
  url: [host: "localhost"],
  secret_key_base: " secret base key here",
  render_errors: [view: PelableWeb.ErrorView, accepts: ~w(html json)],
  pubsub: [name: Pelable.PubSub, adapter: Phoenix.PubSub.PG2]

# Configures Elixir's Logger
config :logger, :console,
  format: "$time $metadata[$level] $message\n",
  metadata: [:request_id]

# Use Jason for JSON parsing in Phoenix
config :phoenix, :json_library, Jason

config :pelable, :pow,
  user: Pelable.Users.User,
  repo: Pelable.Repo,
  web_module: PelableWeb,
  cache_store_backend: PelableWeb.PowRedisCache,
  extensions: [PowResetPassword, PowEmailConfirmation, PowPersistentSession],
  controller_callbacks: Pow.Extension.Phoenix.ControllerCallbacks,
  mailer_backend: PelableWeb.PowMailer,
  web_mailer_module: PelableWeb,
  routes_backend: PelableWeb.Pow.Routes

  config :pow, PelableWeb.PowMailer,
  adapter: Swoosh.Adapters.Sendgrid,
  api_key: "api key here"

# Import environment specific config. This must remain at the bottom
# of this file so it overrides the configuration defined above.
import_config "#{Mix.env()}.exs"

I can see on my logs the following, but I can’t confirm if this is the user that reported this to me:

Oct 14 06:39:24 AM  11:39:24.360 [info] REFUSED CONNECTION TO PelableWeb.UserSocket in 406µs
Oct 14 06:39:24 AM    Transport: :websocket
Oct 14 06:39:24 AM    Serializer: Phoenix.Socket.V2.JSONSerializer
Oct 14 06:39:24 AM    Connect Info: %{}
Oct 14 06:39:24 AM    Parameters: %{"token" => "same token", "vsn" => "2.0.0"}
Oct 14 06:40:25 AM  11:40:25.094 [info] REFUSED CONNECTION TO PelableWeb.UserSocket in 310µs
Oct 14 06:40:25 AM    Transport: :websocket
Oct 14 06:40:25 AM    Serializer: Phoenix.Socket.V2.JSONSerializer
Oct 14 06:40:25 AM    Connect Info: %{}
Oct 14 06:40:25 AM    Parameters: %{"token" => "same token", "vsn" => "2.0.0"}
Oct 14 06:41:25 AM  11:41:25.817 [info] REFUSED CONNECTION TO PelableWeb.UserSocket in 462µs
Oct 14 06:41:25 AM    Transport: :websocket
Oct 14 06:41:25 AM    Serializer: Phoenix.Socket.V2.JSONSerializer
Oct 14 06:41:25 AM    Connect Info: %{}
Oct 14 06:41:25 AM    Parameters: %{"token" => "same token", "vsn" => "2.0.0"}

I also started looking into ways of tracking window.errors on the client but services seemed to be paid and can’t afford it right now, if you know a way of doing this

Thank you!