This plugin hooks into the Vite build step, to create a new release and upload source maps. It does not instrument error reporting in your app.

It's a port of official Sentry webpack plugin for Vite.

It's fully written on Typescript and there is some differences in configuration, described below, but we mostly follow @sentry/cli types.

yarn add -D vite-plugin-sentry

If you using Typescript - you can use ViteSentryPluginOptions type for better configuration experience with autocomplete.

Example config:

// vite.config.ts
// other declarations
import type { ViteSentryPluginOptions } from 'vite-plugin-sentry'
import viteSentry from 'vite-plugin-sentry'

/*
  Configure sentry plugin
*/
const sentryConfig: ViteSentryPluginOptions = {
  url: 'https://sentry.io',
  authToken: '<SECRET_TOKEN_HERE>',
  org: 'my_org',
  project: 'my_project',
  release: '1.0',
  // legacyErrorHandlingMode: true, <- warn about sentry errors instead of fail
  // cleanSourcemapsAfterUpload: true, <- delete generated sourcemap files after complete
  deploy: {
    env: 'production'
  },
  setCommits: {
    auto: true
  },
  sourceMaps: {
    include: ['./dist/assets'],
    ignore: ['node_modules'],
    urlPrefix: '~/assets'
  }
}

export default defineConfig({
  // other options
  plugins: [ viteSentry(sentryConfig) ],
  build: {
    // required: tells vite to create source maps
    sourcemap: true,
  }
})

From version 1.2.0 we have changed default error handling. Now if Sentry report error while uploading sourcemaps - we crash whole build process instead of just print warning. This was done to prevent calling next to && operator on uploading error.

You can enable legacy mode using legacyErrorHandlingMode: true in plugin config.

Check project wiki on github to get more information.

To correctly work with Sentry, you need to add a release to your project. Same about dist option: your uploaded sourcemaps and client sentry initialization must have same release/dist to make sentry correct recognize and bind sourcemaps to logged errors.

You can expose release and dist options used by vite-plugin-sentry into your application using Vite feature known as virtual module.

To do so, you need to add several lines:

// import virtual module
// i would recommend doing it at entry point script (e.g. main.js)
import 'virtual:vite-plugin-sentry/sentry-config'

// now you can use this variable like so
const dist = import.meta.env.VITE_PLUGIN_SENTRY_CONFIG.dist
const release = import.meta.env.VITE_PLUGIN_SENTRY_CONFIG.release

// use it in sentry init
Sentry.init({
  // other sentry options
  dist,
  release
})

// also, these settings exposed to globalThis object
// so you can get them from window object:
const dist = window.VITE_PLUGIN_SENTRY_CONFIG.dist
const release = window.VITE_PLUGIN_SENTRY_CONFIG.release

To get type information for the virtual module or import meta env, you can add vite-plugin-sentry/client to your types array in tsconfig.json.

{
  "types": [
    "vite-plugin-sentry/client"
  ]
}

Also you can use reference in your typescript code like below:

///<reference types="vite-plugin-sentry/client"/>

UPD: From version 1.2.1 you can use new configuration option cleanSourcemapsAfterUpload to clean sourcemap files.

While i recommend to use CI, you can also use tools like rimraf in your npm scripts to drop any unnecessary files after build was complete:

// package.json
{
  "scripts": {
    // delete all js map files when built
    "build": "vite build && rimraf dist/**/*.js.map"
  }
}

This plugin relies on @sentry/cli tool, which requires VCRedist to be installed. Please check #8 for details.

Here are the list of all plugin options:

Legend:

❌ - NOT required

⚠️ - NOT required in plugin config, but MUST be set (for example, using .sentryclirc file)

✅ - Required

With deploy you can configure sentry cli to send deployment info. Here is a table of settings:

With sourceMaps you can configure how sourcemaps will be processed

With setCommits you can configure

At the moment we got unit tests for plugin functions. You can run them by running yarn test

Also there will appear e2e tests soon.

👤 ikenfin

• Website: https://ikfi.ru
• Github: @ikenfin

Thank you to all contributors and users of this plugin. Knowing that so many people found this plugin helpful is really motivating me!

Give a ⭐️ if this project helped you!

This README was generated with ❤️ by readme-md-generator