throw render()

throw render() is like throw redirect() but preserves the URL, see Abort > throw redirect() VS throw render() VS navigate().

// Render the error page
render(abortStatusCode: 401 | 403 | 404 | 429 | 500 | 503, abortReason?: unknown)
// Render another page (aka URL rewrite)
render(url: `/${string}`, abortReason?: unknown)

// /pages/some-page/+someHook.js
 
import { render } from 'vike/abort'
 
export function someHook() {
  if (someCondition) {
    throw render('/login')
  }
  if (someOtherCondition) {
    throw render(401, "You don't have the permission to access this page.")
  }
}

• If the first argument is a URL, then that URL is rendered.
• If the first argument is a status code, then the error page is rendered.
  • 401 Unauthorized - Access denied, the user isn't logged in.
  • 403 Forbidden - Access denied, the user is logged in but isn't allowed.
  • 404 Not Found - Page doesn't exist.
  • 429 Too Many Requests - Purposefully not serving the request, because of rate limiting or to protect from DDoS attacks.
  • 500 Internal Server Error - Your client or server has a bug.
  • 503 Service Unavailable - Server is overloaded, or a third-party API isn't responding.
• The abortReason and abortStatusCode arguments are made available at pageContext.abortReason and pageContext.abortStatusCode which is usually used by the error page to show a useful error message to the user, see API > Error Page.

  If you use TypeScript, you can define the abortReason type by using the global interface Vike.PageContext, see API > Error Page.

While it's most commonly used with guard() or data() you can use it with any hook.

Common use cases:

• Authentication and authorization, see Tool Integration > Authentication > Login flow.
• Data fetching error handling, see API > data() hook > Error handling.

If throw render() doesn't work, see Abort > Debug.

See also

• API > throw redirect()
• API > guard() hook
• Abort > throw redirect() VS throw render() VS navigate()
• Abort > Debug