Catching errors on the client-side is just as important as catching them on your server. I strongly recommend to use an error reporting system like Sentry to catch errors before your users find them. Unfortunately we can not depend and of course should never rely on users to report occurring errors. Especially when you wanna ship high fidelity products you don't wanna annoy your users with bugs that could have been prevented. Good error management is key.

One approach that I like is to let them report to Sentry. Fortunately the Nuxt.js community has our back and already provides us with a useful Nuxt.js module.

As you can see in the readme the setup is pretty easy although I find, that the documentation is lacking some information on how to use source mapping and release management. I will cover this in this tutorial.

Setup

You can start by running npm install @nuxtjs/sentry to install the required dependency.

In the next step you have to add the module in your nuxt.config.js like this:

// nuxt.config.js
{
  modules: [
    '@nuxtjs/sentry',
  ],
  sentry: {
    dsn: process.env.SENTRY_DSN,
    publishRelease: true,
    sourceMapStyle: 'hidden-source-map',
    config: {
      release: process.env.GIT_COMMIT_SHA,
    },
  },
  // ***
}

As you can see we will use two environment variables to configure the integration. As you probably already guessed should you provide the project DSN via SENTRY_DSN.

What you use in the release option is up to you. You can use the version string of your package.json or whatever you want. In my opinion it makes sense to use something like the Git commit SHA, so you exactly know in which commit this error occurred. In most continues integration tools you will be provided with environment variables give you the needed information to do this.

What took me quite some time to figure out and is the reason why I wrote this little tutorial is that you have to include a .sentryclirc file in your root directory of your project.

It's contents should look something like this:

# .sentryclirc

[defaults]
org = <your_sentry_org>
project = <your_sentry_project>
url = <your_sentry_url>

When you are done with all this you are good to go. The module will upload the source maps to Sentry and create new releases at build-time. This behavior is especially helpful when using Nuxt.js because all the Javascript assets usually get minified which means that debugging is almost impossible and stack traces would otherwise be totally unreadable.