Edit this page

Error Tracking

You can install error tracking:

  • On the client-side, by using the +client.js file.
  • On the server-side, by using the +onError() hook.

Client-side

You can use +client.js in order to make sure that your error tracker is initialized before any other code executes.

// pages/+client.js
 
// This is a good place to initialize an error tracker such as Sentry
Sentry.init()
 
// Custom tracking
window.addEventListener('error', (err) => {
  console.error('An error occurred:', err)
})
// pages/+client.ts
 
// This is a good place to initialize an error tracker such as Sentry
Sentry.init()
 
// Custom tracking
window.addEventListener('error', (err) => {
  console.error('An error occurred:', err)
})

Server-side

You can use the +onError() hook to access server-side errors:

// pages/+onError.js
// Environment: server
 
export const onError = (error) => {
  if (!import.meta.env.PROD) return // only track errors in production
 
  /* Vike already calls console.error() so the following line isn't needed.
  console.error(error)
  */
 
  // Install error tracker
  myErrorTracker.intercept(error)
}
// pages/+onError.ts
// Environment: server
 
import type { Config } from 'vike/types'
 
export const onError: Config['onError'] = (error) => {
  if (!import.meta.env.PROD) return // only track errors in production
 
  /* Vike already calls console.error() so the following line isn't needed.
  console.error(error)
  */
 
  // Install error tracker
  myErrorTracker.intercept(error)
}

This enables you to install error trackers such as Sentry, Bugsnag, or Rollbar. For example with Sentry:

// pages/+onError.js
// Environment: server
 
import * as Sentry from '@sentry/node'
 
export const onError = (error) => {
  Sentry.captureException(error)
}
// pages/+onError.ts
// Environment: server
 
import * as Sentry from '@sentry/node';
import type { Config } from 'vike/types'
 
export const onError: Config['onError'] = (error) => {
  Sentry.captureException(error)
}

See also