Nuxt project access Sentry monitoring

1. Create a new project on Sentry platform

Steps: Projects→ Create Project→ Select platform (Vue) → Set reminder rules (optional) → set Project name and Team→ Click Create Project to obtain DSN of the Project, useful laterCopy the code

2. Download the sentry – module

npm install @nuxtjs/sentry
Copy the code

3. Add @nuxtjs/sentry to modules array in nuxt.config.js to inject $sentry into nuxt instance

// nuxt.config.js
{
  // ...
  modules: [
    '@nuxtjs/sentry',
  ],
  // ...
}
Copy the code

4. Continue to add the Sentry field in nuxt.config.js to add the configuration for sentry

Available configuration documents: github.com/nuxt-commun…

// oneos
// nuxt.config.js
{
    // ...
    sentry: {
      dsn: 'http://[email protected]:9000/1'.tracing: {
        tracesSampleRate: 1.0.vueOptions: {
        tracing: true.tracingOptions: {
          hooks: ['mount'.'update'].timeout: 2000.trackComponents: true,}},browserOptions: {},},clientIntegrations: {
      Vue: {
        attachProps: true.// Allow Sentry to report Vue component Props
        logErrors: true.// After the Sentry SDK is introduced, errors are not printed to the console by default. Setting logErrors to true forces errors to be printed to the console}},config: {
      environment: process.env.NODE_ENV === 'prod'? 'production' : 'development',}},// ...
}
Copy the code

DSN (Data Source Name)

• When a new project is created on the Sentry platform, Sentry automatically assigns a DSN to the project
• DSN is used to tell Sentry where to send events
• If DSN is not set, Sentry will not send events
• DSN follows the following format

{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}{PATH}/{PROJECT_ID}
Copy the code

DSN: Settings→ Projects→ Select your project → Client Keys (DSN)

tracing

• Used to enable performance monitoring
• Detailed configuration: github.com/nuxt-commun…

config

• Used to declare other Sentry configurations
• Detailed configuration is introduced: the docs. Sentry. IO/platforms/j…

5. Download the Sentry Webpack Plugin to upload sourceMap to the Sentry platform during the build process

npm install @sentry/webpack-plugin --save-dev
Copy the code

*sourceMap is used to restore compressed code to source code, making it easier to locate errors

6. Enable sourceMap in nuxt.config.js and generate the sourceMap file during the build process

// nuxt.config.js
{
  // ...
  build: {
    // ...
    extend(config, { isClient }) {
      if (isClient) {
      	config.devtool = 'hidden-source-map'.// Avoid adding sourcemap references at the end of generated JS files}},// ...
  }
  // ...
}
Copy the code

7. Add the Sentry Webpack Plugin configuration to nuxt.config.js

// nuxt.config.js { // ... build: { // ... plugins: [ // ... new SentryWebpackPlugin({ url: 'http://x.x.x.x:9000/', authToken: 'xxxxxxxxxxxxxxxxxxxx', org: 'Organization name ', project:' project name ', include: '.nuxt/dist/client', urlPrefix: '~/_nuxt/', ignore: ['node_modules', 'webpack.config.js'], }), ], // ... } / /... }Copy the code

Detailed configuration documents: github.com/getsentry/s…

url

• Sentry service base URL

authToken

• The token is used for Sentry platform authentication. The token must contain the operation rights on the corresponding resources
• Creation steps: Settings→ Account→ API→ Auth Tokens→ Create New Tokens→ Usually select Project: Read and Project: Write → Create

Token

org

• Organizaiton Slug of Project in Sentry platform
• Query steps: Click the dropdown menu in the upper left corner of Sentry platform → Origanization Settings → Organization Slug

project

• Project name in Sentry platform

include

• Path to upload

urlPrefix

• Url prefix of online JS files
• Sentry needs the correct URL prefix to find the map file that corresponds to the JS file on the line
• For example, the URL of the online JS file is x.com/_nuxt/d954f… ‘

ignore

• The path or file to be ignored when uploading the file
• If the include field contains a detailed path, you can ignore it

8. Adjust the build command in package.json and delete the sourceMap file after the build to prevent sourceMap from being exposed online

For example,

"scripts": {
  "build": "nuxt build && rimraf .nuxt/dist/**/*.js.map"
}
Copy the code