Error Handling

Server-side

Server-side errors are exposed over pageContext.errorWhileRendering at renderPage():

// server.js
 
import { renderPage } from 'vike/server'
 
// Any server: Express.js, Cloudflare Worker, AWS Lambda Function, Fastify, Hono, Nitro, ...
server.addMiddleware({
  method: 'GET',
  route: '*', // catch-all
  async handler(request) {
    const pageContext = await renderPage({ urlOriginal: request.url })
 
    if (pageContext.errorWhileRendering) {
      /* Vike already calls console.error() so the following line isn't needed.
      console.error(pageContext.errorWhileRendering)
      */
 
      // If you use an error tracker (e.g. Sentry):
      myErrorTracker.intercept(pageContext.errorWhileRendering)
 
      // If you use a server middleware that handles errors:
      if (!pageContext.httpResponse) {
        // Don't throw if there is a pageContext.httpResponse, otherwise
        // the error page won't be rendered.
        throw pageContext.errorWhileRendering
      }
 
    }
 
    // pageContext.httpResponse is missing if:
    //  - There is an error and you didn't define an error page.
    //  - Your error page has a bug and, therefore, couldn't be rendered.
    if (!pageContext.httpResponse) return null
 
    // The HTTP response of the page. This can be the error page.
    return pageContext.httpResponse
  }
})

Vike calls console.error(err) for any error it encounters. With the upcoming new hook onLog() (#1439) you'll have control over Vike's logging.

See also API > Error page.

You can use any error tracker, such as Sentry, Bugsnag, Rollbar, or your own custom error tracking. For that, make sure to use the error tracker's server-side interceptor. For example with Sentry:

import * as Sentry from "@sentry/node";
 
// ...
 
    if (pageContext.errorWhileRendering) {
      Sentry.captureException(e)
    }
 
// ...

Client-side

Use +client.js in order to make sure that your error handling code is initialized before any other code executes.

// /pages/+client.js
 
// The first lines of JavaScript executed on the website.
 
window.addEventListener('error', (err) => {
   console.error('An error occured:', err)
})

Verbose

Vike prettifies transpilation errors, such as errors thrown by esbuild and Babel.

While Vike is careful about not removing relevant information, it may mistakenly do so. In that case create a new GitHub issue. Until a Vike maintainer fixes the issue you can use the debug flag DEBUG=vike:error.

# Show verbose and original errors
DEBUG=vike:error npm run dev

For even more verbose errors:

# Usually only used by Vike maintainers
DEBUG=vike:error,vike:log npm run dev

See also