search

woutdp / live_svelte

Svelte inside Phoenix LiveView with seamless end-to-end reactivity
https://hexdocs.pm/live_svelte
MIT License
1.01k stars 38 forks source link

Intermittent SSR crash #44

Closed dev-guy closed 1 year ago

dev-guy commented 1 year ago
  1. Run the application at https://github.com/dev-guy/phoenix-ash-svelte-flowbite/blob/main/README.md . Unfortunately it needs Postgres to set up. I need to remove that part or install on a hosting service. Until then you can ignore.
  2. Open Safari and go to http://localhost:4000/svelte/mermaid . I don't know why it has to be Safari. Chrome is more difficult.
  3. Go to http://localhost:4000/svelte/counter
  4. Repeat steps 2 and 3 until it crashes on counter. It crashes more frequently on Mermaid but the counter page is a lot less complicated so should be easier to figure out.

Note that you can't make it happen by refreshing the counter page. The mermaid page is definitely part of the problem and you make the crash happen by simply refreshing it but sometimes it works.

Error message shown in browser

Error message shown in 'mix phx.server' console:


/Users/dg/agle/202308/phoenix-ash-svelte-flowbite/priv/static/assets/server/server.js:14964
  return typeof selector === "string" ? new Selection([[document.querySelector(selector)]], [document.documentElement]) : new Selection([[selector]], root);
                                                        ^

ReferenceError: document is not defined
    at select_default2 (/Users/dg/agle/202308/phoenix-ash-svelte-flowbite/priv/static/assets/server/server.js:14964:57)
    at Object.render3 [as render] (/Users/dg/agle/202308/phoenix-ash-svelte-flowbite/priv/static/assets/server/server.js:181274:19)
    at /Users/dg/agle/202308/phoenix-ash-svelte-flowbite/priv/static/assets/server/server.js:181576:22
    at new Promise (<anonymous>)
    at performCall (/Users/dg/agle/202308/phoenix-ash-svelte-flowbite/priv/static/assets/server/server.js:181575:35)
    at executeQueue ([info] GET /
[debug] Processing with KantanWeb.PageController.home/2
  Parameters: %{}
  Pipelines: [:browser]
[info] Sent 200 in 10ms
[info] GET /svelte/mermaid
[debug] Processing with KantanWeb.PageController.mermaid/2
  Parameters: %{}
  Pipelines: [:browser]
[error] GenServer #PID<0.613.0> terminating
** (ArgumentError) argument error
    :erlang.port_command(#Port<0.9>, "[[\"server/server\",\"ssrRenderComponent\"],[\"Mermaid\",{},{}]]\n")
    (nodejs 2.0.0) lib/nodejs/worker.ex:102: NodeJS.Worker.handle_call/3
    (stdlib 4.3) gen_server.erl:1149: :gen_server.try_handle_call/4
    (stdlib 4.3) gen_server.erl:1178: :gen_server.handle_msg/6
    (stdlib 4.3) proc_lib.erl:240: :proc_lib.init_p_do_apply/3
Last message (from #PID<0.831.0>): {{"server/server", "ssrRenderComponent"}, ["Mermaid", %{}, %{}], [binary: false, timeout: 30000]}
State: ["/Users/dg/agle/202308/phoenix-ash-svelte-flowbite/_build/dev/lib/nodejs/priv/server.js", #Port<0.9>]
Client #PID<0.831.0> is alive

    (stdlib 4.3) gen.erl:256: :gen.do_call/4
    (elixir 1.14.4) lib/gen_server.ex:1035: GenServer.call/3
    (nodejs 2.0.0) lib/nodejs/supervisor.ex:38: anonymous fn/5 in NodeJS.Supervisor.run_in_transaction/3
    (poolboy 1.5.2) /Users/dg/agle/202308/phoenix-ash-svelte-flowbite/deps/poolboy/src/poolboy.erl:84: :poolboy.transaction/3
    (nodejs 2.0.0) lib/nodejs/supervisor.ex:68: NodeJS.Supervisor.call/3
    (nodejs 2.0.0) lib/nodejs/supervisor.ex:77: NodeJS.Supervisor.call!/3
    (live_svelte 0.5.1) lib/ssr.ex:19: LiveSvelte.SSR.render/3
    (live_svelte 0.5.1) lib/component.ex:56: LiveSvelte."render (overridable 1)"/1
    (phoenix_live_view 0.18.18) lib/phoenix_live_view/tag_engine.ex:68: Phoenix.LiveView.TagEngine.component/3
    (kantan 0.1.0) lib/kantan_web/controllers/page_html/mermaid.html.heex:1: anonymous fn/2 in KantanWeb.PageHTML.mermaid/1
    (phoenix_live_view 0.18.18) lib/phoenix_live_view/engine.ex:137: Phoenix.HTML.Safe.Phoenix.LiveView.Rendered.to_iodata/1
    (phoenix_live_view 0.18.18) lib/phoenix_live_view/engine.ex:153: Phoenix.HTML.Safe.Phoenix.LiveView.Rendered.to_iodata/3
    (phoenix 1.7.2) lib/phoenix/controller.ex:1010: anonymous fn/5 in Phoenix.Controller.template_render_to_iodata/4
    (telemetry 1.2.1) /Users/dg/agle/202308/phoenix-ash-svelte-flowbite/deps/telemetry/src/telemetry.erl:321: :telemetry.span/3
    (phoenix 1.7.2) lib/phoenix/controller.ex:976: Phoenix.Controller.render_and_send/4
    (kantan 0.1.0) lib/kantan_web/controllers/page_controller.ex:1: KantanWeb.PageController.action/2
    (kantan 0.1.0) lib/kantan_web/controllers/page_controller.ex:1: KantanWeb.PageController.phoenix_controller_pipeline/2
    (phoenix 1.7.2) lib/phoenix/router.ex:430: Phoenix.Router.__call__/5
    (kantan 0.1.0) lib/kantan_web/endpoint.ex:1: KantanWeb.Endpoint.plug_builder_call/2
    (kantan 0.1.0) deps/plug/lib/plug/debugger.ex:136: KantanWeb.Endpoint."call (overridable 3)"/2
[info] Sent 500 in 122ms
[error] #PID<0.831.0> running Phoenix.Endpoint.SyncCodeReloadPlug (connection #PID<0.783.0>, stream id 8) terminated
Server: localhost:4000 (http)
Request: GET /svelte/mermaid
** (exit) an exception was raised:
    ** (NodeJS.Error) got {:node_js_worker_exit, {{:badarg, [{:erlang, :port_command, [#Port<0.9>, "[[\"server/server\",\"ssrRenderComponent\"],[\"Mermaid\",{},{}]]\n"], [error_info: %{module: :erl_erts_errors}]}, {NodeJS.Worker, :handle_call, 3, [file: 'lib/nodejs/worker.ex', line: 102]}, {:gen_server, :try_handle_call, 4, [file: 'gen_server.erl', line: 1149]}, {:gen_server, :handle_msg, 6, [file: 'gen_server.erl', line: 1178]}, {:proc_lib, :init_p_do_apply, 3, [file: 'proc_lib.erl', line: 240]}]}, {GenServer, :call, [#PID<0.613.0>, {{"server/server", "ssrRenderComponent"}, ["Mermaid", %{}, %{}], [binary: false, timeout: 30000]}, 30000]}}} while retrieving Exception.message/1 for %NodeJS.Error{message: {:node_js_worker_exit, {{:badarg, [{:erlang, :port_command, [#Port<0.9>, "[[\"server/server\",\"ssrRenderComponent\"],[\"Mermaid\",{},{}]]\n"], [error_info: %{module: :erl_erts_errors}]}, {NodeJS.Worker, :handle_call, 3, [file: 'lib/nodejs/worker.ex', line: 102]}, {:gen_server, :try_handle_call, 4, [file: 'gen_server.erl', line: 1149]}, {:gen_server, :handle_msg, 6, [file: 'gen_server.erl', line: 1178]}, {:proc_lib, :init_p_do_apply, 3, [file: 'proc_lib.erl', line: 240]}]}, {GenServer, :call, [#PID<0.613.0>, {{"server/server", "ssrRenderComponent"}, ["Mermaid", %{}, %{}], [binary: false, timeout: 30000]}, 30000]}}}, stack: nil} (expected a string)
        (nodejs 2.0.0) lib/nodejs/supervisor.ex:80: NodeJS.Supervisor.call!/3
        (live_svelte 0.5.1) lib/ssr.ex:19: LiveSvelte.SSR.render/3
        (live_svelte 0.5.1) lib/component.ex:56: LiveSvelte."render (overridable 1)"/1
        (phoenix_live_view 0.18.18) lib/phoenix_live_view/tag_engine.ex:68: Phoenix.LiveView.TagEngine.component/3
        (kantan 0.1.0) lib/kantan_web/controllers/page_html/mermaid.html.heex:1: anonymous fn/2 in KantanWeb.PageHTML.mermaid/1
        (phoenix_live_view 0.18.18) lib/phoenix_live_view/engine.ex:137: Phoenix.HTML.Safe.Phoenix.LiveView.Rendered.to_iodata/1
        (phoenix_live_view 0.18.18) lib/phoenix_live_view/engine.ex:153: Phoenix.HTML.Safe.Phoenix.LiveView.Rendered.to_iodata/3
        (phoenix 1.7.2) lib/phoenix/controller.ex:1010: anonymous fn/5 in Phoenix.Controller.template_render_to_iodata/4
        (telemetry 1.2.1) /Users/dg/agle/202308/phoenix-ash-svelte-flowbite/deps/telemetry/src/telemetry.erl:321: :telemetry.span/3
        (phoenix 1.7.2) lib/phoenix/controller.ex:976: Phoenix.Controller.render_and_send/4
        (kantan 0.1.0) lib/kantan_web/controllers/page_controller.ex:1: KantanWeb.PageController.action/2
        (kantan 0.1.0) lib/kantan_web/controllers/page_controller.ex:1: KantanWeb.PageController.phoenix_controller_pipeline/2
        (phoenix 1.7.2) lib/phoenix/router.ex:430: Phoenix.Router.__call__/5
        (kantan 0.1.0) lib/kantan_web/endpoint.ex:1: KantanWeb.Endpoint.plug_builder_call/2
        (kantan 0.1.0) deps/plug/lib/plug/debugger.ex:136: KantanWeb.Endpoint."call (overridable 3)"/2
        (kantan 0.1.0) lib/kantan_web/endpoint.ex:1: KantanWeb.Endpoint.call/2
        (phoenix 1.7.2) lib/phoenix/endpoint/sync_code_reload_plug.ex:22: Phoenix.Endpoint.SyncCodeReloadPlug.do_call/4
        (plug_cowboy 2.6.1) lib/plug/cowboy/handler.ex:11: Plug.Cowboy.Handler.init/2
        (cowboy 2.10.0) /Users/dg/agle/202308/phoenix-ash-svelte-flowbite/deps/cowboy/src/cowboy_handler.erl:37: :cowboy_handler.execute/2
        (cowboy 2.10.0) /Users/dg/agle/202308/phoenix-ash-svelte-flowbite/deps/cowboy/src/cowboy_stream_h.erl:306: :cowboy_stream_h.execute/3
woutdp commented 1 year ago

Hmm might be mermaid specific then. I'll take a look at this later, thanks for the bug report :)