Dispatch turbo:fetch-request-error during Visits

Follow-up to hotwired#640
Related to hotwired/turbo-site#110

When a `Visit` results in a `fetch` error (like when the browser is
offline), dispatch a `turbo:fetch-request-error` event in the same style
as `<turbo-frame>`- and `<form>`-initiated `fetch` errors.

For the sake of consistency, also make the `TurboFetchRequestErrorEvent`
cancelable.

Along with the implementation change, this commit also adds test
coverage to ensure that the `Event.target` is correct for
`<turbo-frame>` and `<form>` error events.

src/core/drive/form_submission.ts

@@ -3,7 +3,6 @@ import { FetchResponse } from "../../http/fetch_response"
 import { expandURL } from "../url"
 import { dispatch, getAttribute, getMetaContent, hasAttribute } from "../../util"
 import { StreamMessage } from "../streams/stream_message"
-import { TurboFetchRequestErrorEvent } from "../session"
 
 export interface FormSubmissionDelegate {
   formSubmissionStarted(formSubmission: FormSubmission): void
@@ -197,10 +196,6 @@ export class FormSubmission {
 
   requestErrored(request: FetchRequest, error: Error) {
     this.result = { success: false, error }
-    dispatch<TurboFetchRequestErrorEvent>("turbo:fetch-request-error", {
-      target: this.formElement,
-      detail: { request, error },
-    })
     this.delegate.formSubmissionErrored(this, error)
   }
 

src/core/frames/frame_controller.ts

@@ -29,7 +29,7 @@ import { FrameRenderer } from "./frame_renderer"
 import { session } from "../index"
 import { isAction, Action } from "../types"
 import { VisitOptions } from "../drive/visit"
-import { TurboBeforeFrameRenderEvent, TurboFetchRequestErrorEvent } from "../session"
+import { TurboBeforeFrameRenderEvent } from "../session"
 import { StreamMessage } from "../streams/stream_message"
 
 type VisitFallback = (location: Response | Locatable, options: Partial<VisitOptions>) => Promise<void>
@@ -260,10 +260,6 @@ export class FrameController
 
   requestErrored(request: FetchRequest, error: Error) {
     console.error(error)
-    dispatch<TurboFetchRequestErrorEvent>("turbo:fetch-request-error", {
-      target: this.element,
-      detail: { request, error },
-    })
     this.resolveVisitPromise()
   }
 

src/core/index.ts

@@ -19,7 +19,6 @@ export {
   TurboBeforeRenderEvent,
   TurboBeforeVisitEvent,
   TurboClickEvent,
-  TurboFetchRequestErrorEvent,
   TurboFrameLoadEvent,
   TurboFrameRenderEvent,
   TurboLoadEvent,

src/core/session.ts

@@ -22,7 +22,6 @@ import { FrameElement } from "../elements/frame_element"
 import { FrameViewRenderOptions } from "./frames/frame_view"
 import { FetchResponse } from "../http/fetch_response"
 import { Preloader, PreloaderDelegate } from "./drive/preloader"
-import { FetchRequest } from "../http/fetch_request"
 
 export type FormMode = "on" | "off" | "optin"
 export type TimingData = unknown
@@ -32,7 +31,6 @@ export type TurboBeforeVisitEvent = CustomEvent<{ url: string }>
 export type TurboClickEvent = CustomEvent<{ url: string; originalEvent: MouseEvent }>
 export type TurboFrameLoadEvent = CustomEvent
 export type TurboBeforeFrameRenderEvent = CustomEvent<{ newFrame: FrameElement } & FrameViewRenderOptions>
-export type TurboFetchRequestErrorEvent = CustomEvent<{ request: FetchRequest; error: Error }>
 export type TurboFrameRenderEvent = CustomEvent<{ fetchResponse: FetchResponse }>
 export type TurboLoadEvent = CustomEvent<{ url: string; timing: TimingData }>
 export type TurboRenderEvent = CustomEvent

src/http/fetch_request.ts

@@ -9,6 +9,10 @@ export type TurboBeforeFetchRequestEvent = CustomEvent<{
 export type TurboBeforeFetchResponseEvent = CustomEvent<{
   fetchResponse: FetchResponse
 }>
+export type TurboFetchRequestErrorEvent = CustomEvent<{
+  request: FetchRequest
+  error: Error
+}>
 
 export interface FetchRequestDelegate {
   referrer?: URL
@@ -106,7 +110,9 @@ export class FetchRequest {
       return await this.receive(response)
     } catch (error) {
       if ((error as Error).name !== "AbortError") {
-        this.delegate.requestErrored(this, error as Error)
+        if (this.willDelegateErrorHandling(error as Error)) {
+          this.delegate.requestErrored(this, error as Error)
+        }
         throw error
       }
     } finally {
@@ -174,4 +180,14 @@ export class FetchRequest {
     })
     if (event.defaultPrevented) await requestInterception
   }
+
+  private willDelegateErrorHandling(error: Error) {
+    const event = dispatch<TurboFetchRequestErrorEvent>("turbo:fetch-request-error", {
+      target: this.target as EventTarget,
+      cancelable: true,
+      detail: { request: this, error: error },
+    })
+
+    return !event.defaultPrevented
+  }
 }

src/http/index.ts

@@ -1 +1,5 @@
-export { TurboBeforeFetchRequestEvent, TurboBeforeFetchResponseEvent } from "./fetch_request"
+export {
+  TurboBeforeFetchRequestEvent,
+  TurboBeforeFetchResponseEvent,
+  TurboFetchRequestErrorEvent,
+} from "./fetch_request"

src/tests/fixtures/form.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html id="html" data-skip-event-details="turbo:submit-start turbo:submit-end">
+<html id="html" data-skip-event-details="turbo:submit-start turbo:submit-end turbo:fetch-request-error">
   <head>
     <meta charset="utf-8">
     <title>Form</title>
@@ -131,7 +131,7 @@ <h1>Form</h1>
         <input type="hidden" name="status" value="422">
         <input type="submit" style="margin-top:1000vh">
       </form>
-      <form class="internal_server_error" action="/__turbo/reject" method="post">
+      <form id="reject-form" class="internal_server_error" action="/__turbo/reject" method="post">
         <input type="hidden" name="status" value="500">
         <input type="submit">
       </form>

src/tests/fixtures/visit.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html id="html">
+<html id="html" data-skip-event-details="turbo:fetch-request-error">
   <head>
     <meta charset="utf-8">
     <title>Turbo</title>

src/tests/functional/form_submission_tests.ts

@@ -442,6 +442,12 @@ test("test invalid form submission with server error status", async ({ page }) =
   assert.notOk(await hasSelector(page, "#frame form.reject"), "replaces entire page")
 })
 
+test("test form submission with network error", async ({ page }) => {
+  await page.context().setOffline(true)
+  await page.click("#reject-form [type=submit]")
+  await nextEventOnTarget(page, "reject-form", "turbo:fetch-request-error")
+})
+
 test("test submitter form submission reads button attributes", async ({ page }) => {
   const button = await page.locator("#submitter form button[type=submit][formmethod=post]")
   await button.click()

src/tests/functional/frame_navigation_tests.ts

@@ -27,7 +27,7 @@ test("test frame navigation emits fetch-request-error event when offline", async
   await page.goto("/src/tests/fixtures/tabs.html")
   await page.context().setOffline(true)
   await page.click("#tab-2")
-  await nextEventNamed(page, "turbo:fetch-request-error")
+  await nextEventOnTarget(page, "tab-frame", "turbo:fetch-request-error")
 })
 
 test("test promoted frame navigation updates the URL before rendering", async ({ page }) => {

src/tests/functional/visit_tests.ts

@@ -7,6 +7,7 @@ import {
   isScrolledToTop,
   nextBeat,
   nextEventNamed,
+  nextEventOnTarget,
   noNextAttributeMutationNamed,
   readEventLogs,
   scrollToSelector,
@@ -253,6 +254,16 @@ test("test can scroll to element after history-initiated turbo:visit", async ({
   assert(await isScrolledToSelector(page, "#" + id), "scrolls after history-initiated turbo:load")
 })
 
+test("test Visit with network error", async ({ page }) => {
+  await page.evaluate(() => {
+    addEventListener("turbo:fetch-request-error", (event: Event) => event.preventDefault())
+  })
+  await page.context().setOffline(true)
+  await page.pause()
+  await page.click("#same-origin-link")
+  await nextEventOnTarget(page, "html", "turbo:fetch-request-error")
+})
+
 async function visitLocation(page: Page, location: string) {
   return page.evaluate((location) => window.Turbo.visit(location), location)
 }