Provide event to handle turbo-frame hitting a NetworkError when fetching

[romaricpascal]

At the moment, if a turbo-frame cannot make its request to the server due to a network issue, there is no way to provide feedback to users as the error gets only logged to the console and not surfaced anywhere. No before-fetch-response gets triggered as, well..., there was indeed no response.

It'd be great if the frame would dispatch a turbo:fetch-error event (or similarly named) to let the page add some rendering.

For now, this can be achieved through the following, but requires some very far reaching overriding:

const frame = document.createElement("turbo-frame");
const controllerPrototype = Object.getPrototypeOf(frame.delegate);
const originalRequestErrored = controllerPrototype.requestErrored;
controllerPrototype.requestErrored = function (request, error) {
  console.log('Network error', this.element, 'Dispatching event');
  this.element.dispatchEvent(new CustomEvent('turbo:fetch-error', {
    bubbles: true,
    cancelable: true,
    detail: {request,error}
  }));
  return originalRequestErrored.apply(this, arguments);
};

To harmonize error handling, it may also be worth dispatching this event when the response is not a success, though that could be easily achieved by library users through:

document.addEventListener('turbo:before-fetch-response', (event) => {
  if (!event.detail.fetchResponse.response.ok) {
    event.target.dispatchEvent(new CustomEvent('turbo:fetch-error', {
      bubbles: true,
      cancelable: true,
      detail: event.detail
    }))
  }
});

I'm not familiar if this would translate to Turbo drive as well, I'd guess there must be some place it needs to handle fetch errors too.

[corporealfunk]

I agree that this would be useful. It would be nice to be able access the fact that the network failed when we set the src attribute on a frame. Homegonizing errors would be nice too instead of having to listen for submit-end and also before-fetch-response.

To further homogenize the error handling, so that turbo:fetch-error will also trigger when a form fetch request encounters a NetworkError:

// we want to catch turbo-frame network errors on all frames:
const frame = document.createElement('turbo-frame');
const controllerPrototype = Object.getPrototypeOf(frame.delegate);
const originalRequestErrored = controllerPrototype.requestErrored;

controllerPrototype.requestErrored = function (request, error) {
  this.element.dispatchEvent(new CustomEvent('turbo:fetch-error', {
    bubbles: true,
    cancelable: true,
    detail: { request, error, success: false },
  }));

  return originalRequestErrored.apply(this, arguments);
};

const checkForFetchError = (event) => {
  if (!event.detail.fetchResponse.response.ok) {
    event.target.dispatchEvent(new CustomEvent('turbo:fetch-error', {
      bubbles: true,
      cancelable: true,
      detail: event.detail,
    }));
  }
};

const checkForNetworkError = (event) => {
  if (!event.detail.fetchResponse && event.detail.success === false) {
    event.target.dispatchEvent(new CustomEvent('turbo:fetch-error', {
      bubbles: true,
      cancelable: true,
      detail: event.detail,
    }));
  }
};

// check for error states in the response from the server:
document.addEventListener('turbo:before-fetch-response', checkForFetchError);

// check for error states when the server doesn't even respond:
document.addEventListener('turbo:submit-end', checkForNetworkError);