Sentry new project

Create a new VUE project

Click the installation guide

Add the sentry.js file to plugins

Installation depends on YARN Add Raven-js

  • Copy the code above into this file
import Vue from 'vue';
import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';

export default function({ app, isDev }) {
  if(! isDev){ Raven .config('https://e81ca568b8f24db6992d89f5f332f2b5@sentry.****.com/76') .addPlugin(RavenVue, Vue) .install(); }}Copy the code

Nuxt.config introduces plug-ins

  plugins: [
    { src: '@/plugins/sentry'.ssr: false},].Copy the code
  • So any errors are reported to the system, but there is no source-map.

Build to add the source – the map

Nuxt. Config. Js added

  build: {
    extend (config, { isDev, isClient }) {
      if(isClient && ! isDev) { config.devtool ='source-map'   / / client processing}}Copy the code

Common configuration for source-map development and production mode

  • Dev modecheap-module-eval-source-map

You can set breakpoints to debug without displaying column information, and add map information as Base64 at the end of the merged code

  • Pro modesource-map

Can set breakpoint debugging, do not display column information, generate the corresponding. //# sourceMappingURL=**.js.map, you can see that the module code is not wrapped in eval(). This mode does not put debugging information into the packaged code, keeping the packaged code concise

The map is generated successfully, and then the file is uploaded to sentry

Configure the Sentry plug-in

  • Install @sentry/webpack-plugin github.com/getsentry/s…
yarn add @sentry/webpack-plugin
Copy the code
  • The root directory for creating the. Sentryclirc file
[defaults] url = https://sentry. Dotcom = sentry project = gp-blog [auth] token = 467ea6d5ab3842918c816a825f5beef341e70f7a68264293acaecbc85d29b5faCopy the code

The token generation method is shown in the following figure

Add the build extend parameter to the nuxt.config.js file

    
build: {
    extend (config, { isDev, isClient }) {
      if(isClient && ! isDev) { config.devtool ='source-map'

        const release = 'demo-test008'; // You can name it according to the package.json version number or Git tag

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

        config.plugins.push(new SentryPlugin({
          include: '.nuxt/dist/client'.// The folder to upload
          release,
          configFile: 'sentry.properties'.urlPrefix: '~/_nuxt/' // ~/ is the root directory of the website. The subsequent paths must correspond to source}}})),Copy the code

The build operation succeeded. Procedure

Write a bug to see what happens