---
name: "up:fragment:offline"
area: "API"
kind: "DOM event"
parent: "up.fragment module"
url: "https://unpoly.com/api/up:fragment:offline"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.fragment module](https://unpoly.com/api/up.fragment.md)</nav>

# up:fragment:offline

This event is emitted when the device loses its network connection while [rendering](https://unpoly.com/api/up.render.md) content.

Listeners may decide how to handle the connection loss. E.g. you may choose to display an error, or to offer a button that retries the failed request. See [handling connection loss](https://unpoly.com/learn/network-issues.md#disconnects) for more details and examples.

The event is emitted on the targeted layer.

<nav aria-label="Guides">

- [Learn: Handling network issues](https://unpoly.com/learn/network-issues.md#disconnects)

</nav>

## Example {#example}

This handler will ask the user if they want to retry a failed fragment update:

```js
up.on('up:fragment:offline', function(event) {
  if (confirm('You are offline. Retry?')) event.retry()
})
```

### Cases that trigger the event {#cases}

The `up:fragment:offline` event is emitted when we have a fatal connectivity issue _and_ we were about to render elements:

| Case | `up:fragment:offline` emitted? |
| --- | --- |
| [Fatal network error](https://unpoly.com/learn/network-issues.md#disconnects) | ✔️ yes |
| Server responds with an [error code](https://unpoly.com/learn/error-responses.md) | ❌ no |
| Server [renders nothing](https://unpoly.com/learn/conditional-requests.md#rendering-nothing) | ❌ no |
| [Preloading](https://unpoly.com/learn/preloading.md) fails | ❌ no |

---

## Event properties {#properties}

### event.request {#event.request}

(required)

The original request to the server.

Type: [up.Request](https://unpoly.com/api/up.Request.md)

### event.renderOptions {#event.renderOptions}

(required)

Options for the [`up.render()`](https://unpoly.com/api/up.render.md) call that has caused the failed request.

Type: [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)

### event.retry() {#event.retry}

(required)

Retry the render pass with the same options.

You may pass an object to override individual properties from the original render options.

Retrying causes a second render pass with its own async [`up.RenderResult`](https://unpoly.com/api/up.RenderResult.md). The promise from the original render pass has already been rejected when `up:fragment:offline` is emitted.

Type: Function([Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)): [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)<[up.RenderResult](https://unpoly.com/api/up.RenderResult.md)>

### [event.origin] {#event.origin}

(optional)

The link or form element that caused the fragment update.

Type: [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)