Sentry setting in Nuxt.js

Hi, I’m Lovefield.

Logging errors while running a service is never easy. So many people are using Sentry. So people are using the Sentry service, which makes error logging easier. In this article, we will learn how to set up Sentry in Nuxt.js.

Install sentry to using next command:

npm i @nuxtjs/sentry or yarn add @nuxtjs/sentry

Add plugin and module innuxt.config.js. If you add only the module part, options such as setTag and setUser provided by sentry will not be available.

modules: ["@nuxtjs/sentry"],
plugins: ["~/plugins/sentry"],

And you added module, add next setting code in 'nuxt.config.js' :

sentry: {
       dsn: “your sentry DSN address”,
       config: {
           environment: process.env.NODE_ENV, // app mode (dev,stage,prod)
           beforeBreadcrumb(breadcrumb, hint) { // hook - add http request payload
               if (breadcrumb.category === "xhr") {
                   const data = {
                       statusCode: hint.xhr.status,
                       requestBody: hint.xhr.__sentry_xhr__.body,
                       response: hint.xhr.response,
                       responseUrl: hint.xhr.responseURL,
                   };
                   return { ...breadcrumb, data };
               }
               return breadcrumb;
           },
       },
   },

Sets DSN, the address to which information can be sent. In the 'config' part, set 'environment' to display the hook and application modes. Environment mainly indicates whether the application is in development mode or operation mode. And set 'beforeBreadcrumb' to hook. This function is executed before generating the breadcrumb specified by the sentry. The breadcrumb is an entry that indicates the user's behavior or path to movement before an error occurs in the sentiment. In this topic, 'xhr' means communication between servers, which is a function that states additional information requested by the user and information answered by the server when communication between servers is made.

plugins/sentry.js

export default function ({ $sentry }) {
   $sentry.setTag("useremail", "userEmail");
}

Finally, set the tag to send to the sentry. The reason why setUser is not used is that if you specify an email or user id separately, the existing ip information will be lost. However, when I wrote down the ip directly, there were cases where req argument did not exist in the plugin, so it was difficult to process.