Refactor error handling.

assets/js/phoenix_live_view/constants.js

@@ -64,6 +64,7 @@ export const PHX_PROGRESS = "progress"
 export const PHX_MOUNTED = "mounted"
 export const PHX_RELOAD_STATUS = "__phoenix_reload_status__"
 export const LOADER_TIMEOUT = 1
+export const MAX_CHILD_JOIN_ATTEMPTS = 3
 export const BEFORE_UNLOAD_LOADER_TIMEOUT = 200
 export const BINDING_PREFIX = "phx-"
 export const PUSH_TIMEOUT = 30000

assets/js/phoenix_live_view/live_socket.js

@@ -318,15 +318,15 @@ export default class LiveSocket {
     let maxMs = this.reloadJitterMax
     let afterMs = Math.floor(Math.random() * (maxMs - minMs + 1)) + minMs
     let tries = Browser.updateLocal(this.localStorage, window.location.pathname, CONSECUTIVE_RELOADS, 0, count => count + 1)
-    if(tries > this.maxReloads){
+    if(tries >= this.maxReloads){
       afterMs = this.failsafeJitter
     }
     this.reloadWithJitterTimer = setTimeout(() => {
       // if view has recovered, such as transport replaced, then cancel
       if(view.isDestroyed() || view.isConnected()){ return }
       view.destroy()
       log ? log() : this.log(view, "join", () => [`encountered ${tries} consecutive reloads`])
-      if(tries > this.maxReloads){
+      if(tries >= this.maxReloads){
         this.log(view, "join", () => [`exceeded ${this.maxReloads} consecutive reloads. Entering failsafe mode`])
       }
       if(this.hasPendingLink()){

assets/js/phoenix_live_view/view.js

@@ -31,10 +31,10 @@ import {
   PHX_VIEW_SELECTOR,
   PHX_MAIN,
   PHX_MOUNTED,
-  PHX_RELOAD_STATUS,
   PUSH_TIMEOUT,
   PHX_VIEWPORT_TOP,
   PHX_VIEWPORT_BOTTOM,
+  MAX_CHILD_JOIN_ATTEMPTS
 } from "./constants"
 
 import {
@@ -148,6 +148,7 @@ export default class View {
     this.redirect = false
     this.href = null
     this.joinCount = this.parent ? this.parent.joinCount - 1 : 0
+    this.joinAttempts = 0
     this.joinPending = true
     this.destroyed = false
     this.joinCallback = function(onDone){ onDone && onDone() }
@@ -188,7 +189,9 @@ export default class View {
 
     if(manifest.length > 0){ params["_track_static"] = manifest }
     params["_mounts"] = this.joinCount
+    params["_mount_attempts"] = this.joinAttempts
     params["_live_referer"] = liveReferer
+    this.joinAttempts++
 
     return params
   }
@@ -328,6 +331,7 @@ export default class View {
       let [html, streams] = this.renderContainer(null, "join")
       this.dropPendingRefs()
       this.joinCount++
+      this.joinAttempts = 0
 
       this.maybeRecoverForms(html, () => {
         this.onJoinComplete(resp, html, streams, events)
@@ -810,14 +814,12 @@ export default class View {
 
   onJoinError(resp){
     if(resp.reason === "reload"){
-      if(this.isMain()){
-        this.log("error", () => [`failed mount with ${resp.status}. Falling back to page reload`, resp])
-        this.onRedirect({to: this.href, reloadToken: resp.token})
-      }
+      this.log("error", () => [`failed mount with ${resp.status}. Falling back to page reload`, resp])
+      this.onRedirect({to: this.root.href, reloadToken: resp.token})
       return
     } else if(resp.reason === "unauthorized" || resp.reason === "stale"){
       this.log("error", () => ["unauthorized live_redirect. Falling back to page request", resp])
-      if(this.isMain()){ this.onRedirect({to: this.href}) }
+      this.onRedirect({to: this.root.href})
       return
     }
     if(resp.redirect || resp.live_redirect){
@@ -826,14 +828,31 @@ export default class View {
     }
     if(resp.redirect){ return this.onRedirect(resp.redirect) }
     if(resp.live_redirect){ return this.onLiveRedirect(resp.live_redirect) }
-    this.displayError([PHX_LOADING_CLASS, PHX_ERROR_CLASS, PHX_SERVER_ERROR_CLASS])
     this.log("error", () => ["unable to join", resp])
-    if(this.liveSocket.isConnected()){ this.liveSocket.reloadWithJitter(this) }
+    if(this.isMain()){
+      this.displayError([PHX_LOADING_CLASS, PHX_ERROR_CLASS, PHX_SERVER_ERROR_CLASS])
+      if(this.liveSocket.isConnected()){ this.liveSocket.reloadWithJitter(this) }
+    } else {
+      if(this.joinAttempts >= MAX_CHILD_JOIN_ATTEMPTS){
+        // put the root review into permanent error state, but don't destroy it as it can remain active
+        this.root.displayError([PHX_LOADING_CLASS, PHX_ERROR_CLASS, PHX_SERVER_ERROR_CLASS])
+        this.log("error", () => [`giving up trying to mount after ${MAX_CHILD_JOIN_ATTEMPTS} tries`, resp])
+        this.destroy()
+      }
+      let trueChildEl = DOM.byId(this.el.id)
+      if(trueChildEl){
+        DOM.mergeAttrs(trueChildEl, this.el)
+        this.displayError([PHX_LOADING_CLASS, PHX_ERROR_CLASS, PHX_SERVER_ERROR_CLASS])
+        this.el = trueChildEl
+      } else {
+        this.destroy()
+      }
+    }
   }
 
   onClose(reason){
     if(this.isDestroyed()){ return }
-    if(this.liveSocket.hasPendingLink() && reason !== "leave"){
+    if(this.isMain() && this.liveSocket.hasPendingLink() && reason !== "leave"){
       return this.liveSocket.reloadWithJitter(this)
     }
     this.destroyAllChildren()

assets/test/view_test.js

@@ -733,7 +733,7 @@ describe("View", function(){
     stubChannel(view)
 
     expect(view.channel.params()).toEqual({
-      "flash": undefined, "params": {"_mounts": 0},
+      "flash": undefined, "params": {"_mounts": 0, "_mount_attempts": 0, "_live_referrer": undefined},
       "session": "abc123", "static": null, "url": undefined, "redirect": undefined}
     )
 
@@ -747,6 +747,8 @@ describe("View", function(){
       "redirect": undefined,
       "params": {
         "_mounts": 0,
+        "_mount_attempts": 1,
+        "_live_referrer": undefined,
         "_track_static": [
           "http://localhost/css/app-123.css?vsn=d",
           "http://localhost/img/tracked.png",

lib/phoenix_live_view/channel.ex

@@ -1193,13 +1193,15 @@ defmodule Phoenix.LiveView.Channel do
               token =
                 Phoenix.LiveView.Static.sign_token(endpoint, %{
                   status: status,
+                  view: inspect(view),
                   exception: exception_mod,
                   stack: stack
                 })
 
               GenServer.reply(from, {:error, %{reason: "reload", status: status, token: token}})
               {:stop, :shutdown, :no_state}
             else
+              IO.inspect({view, connect_params})
               reraise(exception, __STACKTRACE__)
             end
         end

lib/phoenix_live_view/static.ex

@@ -96,18 +96,18 @@ defmodule Phoenix.LiveView.Static do
       %{@phoenix_reload_status => status_token} ->
         conn = Plug.Conn.delete_resp_cookie(conn, @phoenix_reload_status)
 
-        {status, exception, stack} =
+        {status, exception, errored_view, stack} =
           case verify_token(endpoint, status_token) do
-            {:ok, %{status: status, exception: exception, stack: stack}}
+            {:ok, %{status: status, exception: exception, view: errored_view, stack: stack}}
             when is_integer(status) ->
-              {status, exception, stack}
+              {status, exception, errored_view, stack}
 
             {:error, _reason} ->
-              {500, nil, []}
+              {500, nil, nil, []}
           end
 
         message = """
-        #{inspect(view)} raised #{inspect(exception)} during connected mount sending a #{status} response
+        #{errored_view} raised #{exception} during connected mount sending a #{status} response
         """
 
         raise Plug.Conn.WrapperError,