Find Nuxt Error In Production

First I want to talk about the problem:

Every Front Developer should write code without bugs for production, but you know THAT IS NOT POSSIBLE.

So what should we do?? Publish a project and leave it to be? Absolutely Not. We/you/any developer should find all bugs in the project and fix them one by one, But how do you know want to find bugs in production mode which runs in many many different devices??? Do you know the way?

“It’s not important that you know there is a bug, It’s important that you understand when the bugs happen”

‘You must understand when a bug normally happens so that you can monitor your product by some tools or platform.’

solution:

At this time have a different way to debug your product (website/app) on the server(Production). So I try to explain one of them for Vue/Nuxt Front Developer.

You know Vue/Nuxt is based on JavaScript So we need to find some tools to access our build code on production for monitoring and check every reaction user in our product(website/app) one of these tools is sentry: https://sentry.io/welcome/.

For maybe you are excited and say stop talking and show Sample code …

Take easy I begin…

First, you need to register in sentry and get your Dsn for your app, and then

Sign up for Sentry to start your free trial.

Fill Register Form and Submitted.

Then you see the welcome page sentry with a URL that looks like this

https://sentry.io/onboarding/yourorgnize/welcome/

click on Im’ready and past to this

for next you see a list of the platform so if you see can't find any item for Nuxt

and this So frustrating.

Now for finding your dashboard sentry you should select Vue js and click create a project.

Then you see some important info for the project configs in Vue, But we want configs for Nuxt.js, So how to do that ….

First, find and save DSN: “https://xxxx.ingest.sentry.io/{d/6}”

Then click to show the first Event at the end of the page.

Yeh this is the first simple event bug in your sentry dashboard

But we need real ones for our project so we should get config for our Nuxt project.

Installation

Add `@nuxtjs/sentry` dependency to your project:

yarn add @nuxtjs/sentry

Go to nuxt.config.js

Add below code

{
  modules: [
    '@nuxtjs/sentry'
  ],
  sentry: {
    dsn: '', // Enter your project's DSN here
    // Additional Module Options go here
    // https://sentry.nuxtjs.org/sentry/options
    config: {
      // Add native Sentry config here
      // https://docs.sentry.io/platforms/javascript/guides/vue/configuration/options/
    },
  }
}

Then Paste your DSN key in the correct link in the config sentry and finish your first step for config in your project then you need to check it works or not. So let's use it

by this code in your script vue template

this.$sentry.captureException(new Error('example'))

Or your asyncData

async asyncData ({ params, $sentry }) {
  try {
    let { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { title: data.title }
  } catch (error) {
    $sentry.captureException(error)
  }
}

Usage in server middleware

async nuxtServerInit({ commit }, { $sentry }) {
  try {
    let { data } = await axios.get(`https://my-api/timestamp`)
    commit('setTimeStamp', data)
  } catch (error) {
    $sentry.captureException(error)
  }
}

Yes Yes, this is a simple test for checking work and seeing your some event in dashboard sentry. so now we need to add this method

$sentry.captureException(error)

to our logger event project.

we should set this method in different states in our project.

The first start in middleware vue logger creates a file by vue-logger in the plugin directory and write this

import Vue from 'vue'

export default function ({ $sentry }) {
  if (process.env.NODE_ENV === 'production') {
    Vue.config.warnHandler = function (msg, vm, trace) {
      console.warn({ error: `[Vue warn]: ${msg}${trace}`, type: 'vue-warn' })
      if (!msg.includes('The client-side rendered virtual DOM tree is not matching')) {
        $sentry.captureException(`[Vue warn]: ${msg}${trace}`)
      }
    }
    Vue.config.errorHandler = (err, vm, info) => {
      console.warn({ error: { error: `Error: ${err.toString()}\nInfo: ${info}`, vm }, type: 'vue-error' })
      $sentry.captureException(`Error: ${err.toString()}\\nInfo: ${info}`)
    }
    if (process.client) {
      window.onerror = function (message, source, lineno, colno, error) {
        console.warn({ error: { message, source, lineno, colno, error }, type: 'window-error' })
        $sentry.captureException(error)
      }
    }
  }
}

yes maybe you don't need check-in

process.env.NODE_ENV === 'production'

So here we access to hook of some event like

“vue warn “ “vue error” “window log” and pass this log to sentry logger.

your can check and pass some errors in the layout page component

errorCaptured(err,vm,info) {
    console.log(`cat EC: ${err.toString()}\ninfo: ${info}`); 
   $sentry.captureException(`cat EC: ${err.toString()}\ninfo: ${info}`)     
return false;
  }

And at the end any try cath your need check it.

.... catch (error) {
  this.$sentry.captureException(error)
} ....

So that all above code maybe you need for log error in your Nuxt project

you can check another way for access in nuxt hook error and set

$sentry.captureException(error)

also can check

Usage

to add outer params to better check your bug level in the dashboard sentry.

Don't forget to set source-map in nuxt config

build :  {
module.exports = {
  extend (config) {
    config.devtool = 'source-map'
  }
 }
}

Consolation

Have a different way and platform for debugging your website or application on production in please check theme and use them a customer and manager prime for you 👏👏👏.