Gridsome & Sentry

Gridsome with Sentry Error Tracking

This will help you get started with adding Sentry.io error tracking to a Gridsome website.

Install the Gridsome Sentry Plugin

Follow the directions over on the page for the Plugin that will get you the basics as far as adding the sentry code to your site.

Adding SourceMaps for Better Errors

Next we are going to configure sentry to upload source maps for your Gridsome site for better errors.

Install the sentry webpack-plugin

npm install the npm i @sentry/webpack-plugin plugin

In your gridsome.config.js be sure to now import the new npm package you installed so add const SentryPlugin = require('@sentry/webpack-plugin'); to the top of that file and configure webpack to create source maps.

const SentryPlugin = require('@sentry/webpack-plugin');

module.exports = {
  siteName: "Gridsome Site Name",
  configureWebpack: {
    devtool: "hidden-source-map",
    plugins: [
      new SentryPlugin({
        release: process.env.VUE_APP_SENTRY_RELEASE,
        include: './dist',
        ignore: ['node_modules', 'webpack.config.js'],
      }),
    ]
  },
  plugins: [
    // more stuff here
  ],
};

Create Releases for Sentry

Modify your package.json so that the git commit hash is exported as an environment variable before the gridsome commands are executed. Now Sentry will be able to track what git commit introduced errors.

"scripts": {
    "build": "export VUE_APP_SENTRY_RELEASE=$(git rev-parse HEAD) && gridsome build",
    "develop": "export VUE_APP_SENTRY_RELEASE=$(git rev-parse HEAD) && gridsome develop",
    "explore": "gridsome explore"
  },

Create a Configuration dot file

Then in the root of your project create a .sentryclirc and add the following so the server can upload the source maps to the right sentry account.

• token: Get a token from https://sentry.io/api/, with the scope “project:write”
• org: Get this from the URL when logged into sentry after the /organizations/ example https://sentry.io/organizations/sit-j4
• project: this is the human readable name of the project at https://sentry.io/organizations/sit-j4/projects/

Fill in the .sentryclirc file in your root, you will need to update all the values below.

Now the next time you build your gridsome project you should see the source maps uploaded to Sentry, and you can confirm that by visiting the Release Artifacts page and have much better error reports.

Further Resources

https://medium.com/inturn-eng/uploading-source-maps-to-sentry-with-webpack-ed29cc82b01d

https://medium.com/@suixo/configure-sentry-for-vue-js-project-6aa07efe2c80