New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

I get undefined on my server log when accessing $raven from app context #19

Closed
pauldariye opened this Issue Mar 22, 2018 · 10 comments

Comments

Projects
None yet
4 participants
@pauldariye
Copy link
Contributor

pauldariye commented Mar 22, 2018

screen shot 2018-03-22 at 02 38 54

This question is available on Nuxt.js community (#c7)
@DiederikvandenB

This comment has been minimized.

Copy link
Collaborator

DiederikvandenB commented Mar 22, 2018

This is probably because you're trying to access $raven from the asyncData function, is that correct?

The following code works perfectly:

fetch({ $raven }) {
  console.log($raven);
}

This loads raven-js. If you want serverside reporting (in asyncData), just import Raven from 'raven';

@pauldariye

This comment has been minimized.

Copy link
Contributor

pauldariye commented Mar 22, 2018

Hey @DiederikvandenB, yeah that's exactly it. Would you consider exploring options to support asyncData for SSR? pretty much like the $axios module

@DiederikvandenB

This comment has been minimized.

Copy link
Collaborator

DiederikvandenB commented Mar 23, 2018

I would if you can convince me why importing Raven as usual is not sufficient :). As far as I am aware (have not been using Nuxt/this module for a while now, just maintaining it), this approach will not result in your environment loading a new instance of Raven, and therefore I don't think it's necessary to inject it in to an SSR context.

Of course I can be wrong, and in that case I'm more than happy to help you out here!

@pauldariye

This comment has been minimized.

Copy link
Contributor

pauldariye commented Mar 27, 2018

I get your point and I think I may have been calling it in the wrong place.

@developius

This comment has been minimized.

Copy link

developius commented Apr 26, 2018

Does anyone have an example of using sentry to handle errors returned from asyncData?

Example page:

export default {
  asyncData({ params, $api }) {
    // 404 thrown by backend service (uses axios underneath)
    return $api.getSomething(params.id).then(something => {
      // make `something` available to the page
      return { something }
    })
  }
}
// plugins/api.js
import Vue from 'vue'
import ApiService from '@/services/ApiService'

export default (ctx, inject) => {
  const api = new ApiService({ $axios: ctx.app.$axios })
  ctx.$api = api
  inject('api', api)
}
// services/ApiService.js
export default class ApiService {
  constructor(ctx) {
    this.$axios = ctx.$axios
  }

  getSomething(id){
    return this.$axios.get('/api/something/' + id)
  }
}

If a 404 is thrown by the API, I'd like nuxt to handle the error normally (which it does - it shows the NuxtServerError page) and an error to be logged in Sentry (not working 😢). Any ideas?

Note that I've tried using import Raven from 'raven'; but it fails with these errors:

These dependencies were not found:

* console in ./node_modules/raven/lib/instrumentation/instrumentor.js
* fs in ./node_modules/raven/lib/utils.js, ./node_modules/raven/vendor/node-lsmod.js
* module in ./node_modules/raven/lib/instrumentation/instrumentor.js
@pauldariye

This comment has been minimized.

Copy link
Contributor

pauldariye commented Apr 27, 2018

@developius, you can wrap your api calls in a try/catch block or use .catch like so:

export default {
  asyncData({ params, $api, app: { $raven } }) {
    // 404 thrown by backend service (uses axios underneath)
    return $api.getSomething(params.id).then(something => {
      // make `something` available to the page
      return { something }
    }).catch(err => {
       console.log(err)
       $raven.captureException(err)
    })
  }
}
@SAGV

This comment has been minimized.

Copy link

SAGV commented Oct 12, 2018

@pauldariye but how would you access $raven from nuxtServerInit? Unfortunately, app.$raven is undefined there…

In the same time, if I add @nuxtjs/axios, it is visible in nuxtServerInit as app.$axios. But I cannot spot the difference in module initialisation between these two modules…

@pauldariye

This comment has been minimized.

Copy link
Contributor

pauldariye commented Oct 12, 2018

hey @SAGV... So what I did I, I utilized the error template to capture errors.

This is my error.vue template:

export default {
  props: ['error'],
  mounted() {
    this.$raven.captureException(this.error)
  }
}

and the nuxtServerInit looks like:

    actions: {
      async nuxtServerInit ({ state, commit, dispatch },
        { app: { $prismic }, error, store }) {
        try {
          const something =  await $api.getSomething()
        } catch (err) {
          error({ message: err, statusCode: 404 })
        }
      }
    }

Let me know if this helps

@SAGV

This comment has been minimized.

Copy link

SAGV commented Oct 28, 2018

@pauldariye sorry for the late answer. On one side, it does help. On the other, it requires a custom error page (while I'm happy with the default one) and it doesn't cover cases where I'd like to send a error/message to Sentry but still continue executing the code (aka send error to Sentry if error is in try-catch block)

@SAGV

This comment has been minimized.

Copy link

SAGV commented Oct 28, 2018

But anyway, if someone wants to use the method proposed by @pauldariye and the default error page, you'd need to copy-paste the default error page from here (might require you to remove/alter some templating)

And then you can pass error to sentry like:

mounted() {
    this.$raven.captureException(new Error(this.error.message))
  }

If you just pass the error object (which is not the actual JS error), you risk getting Non-Error exception captured with keys: message, statusCode error by Sentry.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment