nuxt.plugin('renderer',..) is deprecated. Please use new hooks system.

please see https://github.com/nuxt/nuxt.js/releases Breaking changes section

I'm using this package https://github.com/samtgarson/nuxt-env to inject my environment variable on runtime; and avoid having keys on the buildtime. Would sentry-module play nicely with it; to avoid the issues mentioned in the README of nuxt-env ?

What problem does this feature solve?

right now $sentry is not available in the context or in a component. therefore no typescript definition is associated when using this.$sentry or in any other context.

What does the proposed changes look like?

To solve this a proper typescript defintion is needed, right now to workaround this issue you simple can do:
1.) create a new "index.d.ts" file
2.) paste:

declare module 'vue/types/vue' {
interface Vue {
$sentry: any;
}
}
see also // https://vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins

but the correct solution would be not using "any", but the correct type. I tried it with:
import { NodeClient } from '@sentry/node';

but this collides with some other things, and actually it would be wrong on the client side too.

Could be the right way to provide a "unified" interface for both client&server and wrap the actual sentry calls behind it?

Hello ! Thank you for the nice module

I understood how to transmit user information with this question.
(https://cmty.app/nuxt/sentry-module/issues/c30)

But the way to write the user information in one point and send the user information together at the time of error occurrence isn't understood.

The way which thought of only one and put it into effect was a way using middleware, but this didn't go well by the following reason.
and nuxt is being used in SSR, not SPA.

serverMiddleware vs middleware!

(https://nuxtjs.org/api/configuration-servermiddleware/)
Don't confuse it with routes middleware which are being called before each route by Vue in Client Side or SSR. serverMiddleware are just running in server side before vue-server-renderer and can be used for server specific tasks like handling API requests or serving assets.

Even the way mentioned in ※code1 experimented on a project, but you didn't send one in case of the error which occurred by a different component to the user information.
Project/layouts/default.vue is a layout file, so it'll be a parent of all templates.

I'm sorry, could you inform me about the way to send the user information together at the time of error occurrence?

Thank You!

(※code1 ) (Project/layouts/default.vue)

export default {
head () {
const viewport = this.$device.isMobile
? 'width=device-width, initial-scale=1'
: 'width=1336'
return {
meta: [
{ hid: 'viewport', name: 'viewport', content: viewport },
{ hid: 'author', name: 'author', content: this.base_info.meta_author },
{ hid: 'description', name: 'description', content: this.base_info.meta_description },
{ hid: 'keywords', name: 'keywords', content: this.base_info.meta_keyword },
{ hid: 'options', name: 'options', content: this.base_info.meta_options }
]
}
},
mixins: [HandleAfterLogin],
components: {
GeneralHeader,
GeneralFooter,
GeneralLoading,
MobileHeader
},
mounted () {
this.$sentry.configureScope(scope => {
scope.setUser({id: 1, username: 'test', email: '[email protected]'})
});
},
computed: {
...mapState('global', ['base_info'])
}
}

I'd like to not load this for my local env, is there any way i can dynamically load the module and/or specify a config option that disables it and then decide based on an ENV variable?

This module works well, but one issue I ran into is that I had to have SENTRY_PRIVATE_KEY defined for this to work... even though SENTRY_DSN was defined.

It looks like the culprit is here:
https://github.com/nuxt-community/sentry-module/blob/master/lib/sentry.js#L22

I'm happy to fix, just wanted to make sure there wasn't more to this before doing so. Thanks!

The Errors will not be logged because the disable option has been set console log that triggers on starting nuxt app doesn't indicate what module it's coming from so it looks like it's a message triggered by nuxt itself. I think it would be nice to indicate that it's sentry module saying that.

What problem does this feature solve?

Currently release config option is only used when reporting errors, but is ignored when publishRelease is active. The specified release should be taken into account when uploading sources instead of always relying on commit hash.

I'm getting error on nuxt starting

node_modules/@nuxtjs/sentry/lib/sentry.js:4
module.exports = async function sentry (options) {
                       ^^^^^^^^

SyntaxError: Unexpected token function

nuxt 1.0.0-rc11

• Server side plugin support
• Drop support for Nuxt 1.x
• Improve default webpack config
• Upgrade to sentry@5

Version

v2.0.0

Reproduction link

https://github.com/tanakaworld/nuxt-vue-error-handling-demo

Steps to reproduce

Nuxt is v2.2.0.

1. Clone source code from reproduction link
2. Check out 'verify' branch
3. Setup according to README, and run 'npm run dev'
4. The error will happen at here

What is expected ?

We can use a method 'this.$sentry.setUserContext'.

What is actually happening?

We can use a method 'this.$sentry.setUserContext'.

Hi,

in my nuxt.config.js i have

...
sentry: {
    public_dsn: 'xxx',
    project_id: 'xxx',
  }
...

but when i run build, i got the message "nuxt:sentry disabled because no (private) key was found

Where can i get the private key? (and public key). i have read their docs only see document about "dsn"

Thanks

Version

v3.0.0

Reproduction link

http://nuxt.js

Steps to reproduce

router.base that is by default set to / and can be overridden, isn't taken into account in:

What is expected ?

webpackConfig.urlPrefix matches ~path.join(router.base, build.publicPath).

What is actually happening?

If base is overridden to, let's say /foo/ then client resources will be served from /foo/_nuxt/ but uploaded release artifacts on Sentry will have prefix ~/_nuxt/ so won't be matched against actual files.

At Nuxt release 1.0.0 they did braking changes to their hook system which included a rewrite of how they use their errorMiddleware.

The errorMiddleware is no longer a part of the Renderer class, which results in errorMiddleware being undefined and the custom sentry middleware is not called at any point because of this.

Please refer to how it was done prior to the release here:
https://github.com/nuxt/nuxt.js/blob/v1.0.0-rc11/lib/core/renderer.js#L323

And after 1.0.0 here:
https://github.com/nuxt/nuxt.js/blob/v1.0.0/lib/core/renderer.js#L17

Version

2.3.2

Reproduction link

https://codesandbox.io/s/zwnoxjj21p?fontsize=14

Steps to reproduce

Install module
Setup module
Access sentry in the nuxtServerInit function from the store returns undefined.

  nuxtServerInit({ commit }, ctx) {
    console.log("HI SENTRY", ctx.$sentry); // here $sentry is undefined
  }

What is expected ?

Being able to access the $sentry object in the nuxtServerinit method from the store.

What is actually happening?

object does not exist in context

Additional comments?

I had a look to the different issues ( #19, #33 ), and releases ( #72 ) but I still cannot access the sentry methods (also sorry in advance if I'm using the module the wrong way).
Thanks for this module it really made my day on multiple occasions !

What problem does this feature solve?

Node integration and allow using $sentry in server side code

Related issues: #19, #33
Related PRs: #61

If you leave any Sentry information out of your .env file, this module still tries to send a HTTP request to sentry.io but (of course) with a wrong URL: POST https://sentry.io/api//store/?sentry_version=7&sentry_client=raven-js%2F3.23.1&sentry_key=null 400 (BAD REQUEST).

It would be nice if this module would check if all required Sentry info was empty, the plugin simply does not initialize. Otherwise I have to resort to polluting my nuxt.config.js with a bunch of process.env checks 😄 .

Version

3.0.0

Reproduction link

https://codesandbox.io/embed/codesandbox-nuxt-m0vmy

Steps to reproduce

• Add the '@nuxtjs/sentry' v 3.0.0 to the app
• Add the package in nuxt config
• Add sentry configuration in nuxt config
• Do not add DSN (or let it be null)
• Call one of the sentry methods, eg this.$sentry.setContext(params)

What is expected ?

Calling sentry methods should not trigger any errors, if DSN is empty (or if sentry is disabled for the environment), this.$sentry should not be undefined, it should, instead, implement mock methods that don't really do anything

What is actually happening?

Sentry object is available on window, but not within the components. Calling this.$sentry.foo, where foo is one of the sentry methods, results in an error (cannot call 'foo' of undefined)

Additional comments?

If @nuxtjs/sentry is added as a nuxt module, then this.$sentry should be available in the components regardless of the configuration as it's quite common to not define DSN for development / testing, or to use disabled: true in the module for the development / testing environment. In this case, this.$sentry should just be a mock object that just implements the methods but doesn't do anything with them.

What problem does this feature solve?

Currently this module will completely avoid creating this.$sentry when there is no DSN specified or the disabled option is flagged - this causes any this.$sentry.xxx functions to error and completely prevents offline debugging without sentry reporting.

For local testing no error reporting is necessary as the console log is accessible to us and will end up clogging issues being reporting from real users

What does the proposed changes look like?

serverless-sentry-lib achieves this by deleting the DSN and installing nonetheless (although this uses the deprecated Raven package).

Hi, I trying to use $sentry from a vuex action but it's undefined when action is called from asyncData

store/index.js

async foo({ commit, state }) {
   const response = await this.$axios.$get('/foo/')
   this.$sentry.captureMessage('Test foo', { extra: { response }})
}

package.json

"@nuxtjs/sentry": "^2.0.0",
"nuxt": "^2.2.0",

nuxt.config.js

  // read dsn from process.env.SENTR_DSN
  sentry: {
    disabled: false,
    config: {
      debug: true
    }
  }

Hello ! Thank you for the nice module

An error occurs when trying to invoke a method on an instance
Notifications are sent to sentry when an error occurs.

@ sentry / browser module' method can not be used because it can not be sent with user information etc., I am in trouble

Would you please help me?

Thank you

(example)
this.$sentry.setUserContext({{
id: 1,
username: 'test',
email: '[email protected]'
}})

this.$sentry.captureException(new Error('error test'))

Exception

TypeError: this.$sentry.setUserContext is not a function
at VueComponent.mounted (/_nuxt/pages/product/_id.js:1740:18)
at callHook (/_nuxt/commons.app.js:13354:21)
at Object.insert (/_nuxt/commons.app.js:14587:7)
at invokeInsertHook (/_nuxt/commons.app.js:16382:28)
at Vue.patch [as patch] (/_nuxt/commons.app.js:16530:15)
...
(13 additional frame(s) were not displayed)
Exception

TypeError: Cannot read property 'captureException' of undefined
at VueComponent.mounted (/_nuxt/pages/product/_id.fa1f7c3d171eb5ab5250.hot-update.js:160:17)
at callHook (/_nuxt/commons.app.js:13354:21)
at insert (/_nuxt/commons.app.js:14587:7)
at Object.invoker [as insert] (/_nuxt/commons.app.js:12456:19)
at invokeInsertHook (/_nuxt/commons.app.js:16382:28)
...
(8 additional frame(s) were not displayed)
package.json

"@nuxtjs/sentry": "^2.0.0",
"nuxt": "^2.2.0",
nuxt.config.js

Version

2.2.1

Reproduction link

https://jsfiddle.net/dg37h4wa/

Steps to reproduce

Create a config in nuxt.config.js

{
  sentry: {
    dsn: 'my_dsn',
    config: {
      environment: 'staging'
    }
  }
}

Sentry will not initialize because it checks for both options.dsn AND options.config.dsn (https://github.com/nuxt-community/sentry-module/blob/master/lib/sentry.js#L26) so to make it work, we must add the dsn twice, like so:

{
  sentry: {
    dsn: 'some_dsn',
    config: {
      environment: 'staging',
      dsn: 'my_dsn'
    }
  }
}

What is expected ?

Sentry is initialized when dsn is set in options

What is actually happening?

Sentry gets initialized only when the dsn prop is set in the top level options AND the additional config options

Additional comments?

Your issue reporting is very involved and cumbersome (why is reproduction required even in simple cases such as this one?). It deters from even reporting a bug. If you insist on such a model, at least make sure that everything works then. For example, fetching the version of this module doesn't work and it lists no versions for sentry-module (https://cmty.app/api/communities/nuxt/repos/sentry-module/releases/search)

Version

2

Steps to reproduce

1. Create a new nuxt 2 project.
2. Add @sentry module 2.0.0
3. Add error
4. Capture error

What is expected ?

Sentry should

• Show user agent information
• Show breadcrumbs

What is actually happening?

Sentry is not

• Showing user agent information
• Showing breadcrumbs

Additional comments?

https://github.com/nuxt-community/sentry-module/blob/master/lib/templates/sentry-client.js#L6

This is passing default integrations from the node version: https://github.com/getsentry/sentry-javascript/blob/master/packages/node/src/sdk.ts#L8-L21, but should be pulling from the browser version: https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/sdk.ts#L6-L19

What problem does this feature solve?

The Errors will not be logged because the disable option has been set console log that triggers on starting nuxt app doesn't indicate what module it's coming from so it looks like it's a message triggered by nuxt itself. I think it would be nice to indicate that it's sentry module saying that.

What does the proposed changes look like?

Prefix strings (two instances) with [sentry-module] maybe.

What problem does this feature solve?

It would be useful to have an option to automatically delete the sourcemaps after they have been uploaded to sentry.

Error while mounting app

when use sentry-module，it has a error，

app.js:519 Error: [nuxt] Error while mounting app: TypeError: _sentry_browser__WEBPACK_IMPORTED_MODULE_5__.Integrations.Dedupe is not a constructor

nuxt.config.js

modules:[
        '@nuxtjs/axios',
        '@nuxtjs/sentry',
        'cookie-universal-nuxt'
    ],
    axios: {
        proxy: true
    },
    sentry: {
        dsn: 'https://[email protected]/2', // Enter your project's DSN here
        config: {}, // Additional config
    },

Version

v2.2.1

Reproduction link

https://jsfiddle.net/y5sa4ht8/

Steps to reproduce

Set the following sentry config in nuxt.config.js.

{
  sentry: {
    dsn: 'dsn',
    disabled: true,
    config: {
      environment: process.env.NODE_ENV // 'development'
    }
  }
}

What is expected ?

I expect that sentry-module does not send error reports because disabled option is true.

What is actually happening?

Though I set disabled: true, sentry-module sends error reports.

Additional comments?

This works well on v2.1.0. I met this on v2.2.1.

What problem does this feature solve?

To everyone using this package:

If anyone could help out to write a few basic tests that would be great. I'd be willing to maintain the package although I do not use Vue/Nuxt myself anymore, and having tests would make this much easier. I unfortunately do not have enough spare time available to write the tests myself.

Cheers!

If you do this in the env file ...

SENTRY_DISABLE_CLIENT_SIDE=false

... the script will still think that the sentry client should be disabled. The reason is that "false" is a string and not a boolean.

So please add a check if the string "false" or "0" is set to support the above environment variable as a normal user would expect it.

Hi, thanks for this nice module. I'd like to ask if you could give an example on how/where to call

this.$raven.setUserContext( { email: '[email protected]' } );

It probably should be called as soon as possible, but there is no such thing as nuxtClientInit right now and I can't access the app context in nuxtServerInit. I don't even know if it's necessary to call it on the server side already. Sure, I could add it to a middleware, but then it would be called/evaluated with every route change ...

Help is much appreciated! :)

Best,
Daniel

Version

2.3.1

Reproduction link

#31

Steps to reproduce

Add publishRelease like so

sentry: {
    dsn: 'https://[email protected]/xxxxxxx',
    publishRelease: true,
    options: {
      environment: env.SENTRY_ENV
    }
  },

What is expected ?

Publish a release on push

What is actually happening?

 [1m [31mERROR in Sentry CLI Plugin: Command failed: /home/forge/xxxxxx/node_modules/@sentry/cli/sentry-cli releases new xxxxxxd55334f3f4xxxxxxxxxxxxx
error: An organization slug is required (provide with --org)

Add --log-level=[info|debug] or export SENTRY_LOG_LEVEL=[info|debug] to see more output.
Please attach the full debug log to all bug reports.
 [39m [22m

10:01:22  FATAL  Nuxt Build Error

  at WebpackBundler.webpackCompile (node_modules/@nuxt/webpack/dist/webpack.js:5262:15)
  at process._tickCallback (internal/process/next_tick.js:68:7)

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Version

master

Reproduction link

https://cmty.app/SorryIDontHaveOne

Steps to reproduce

Node.js 10.7.0
"nuxt": "2.6.3"
"@nuxtjs/sentry": "git://github.com/nuxt-community/sentry-module.git"

Deploying on Zeit Now v1 produce an error see "What is actually happening?"

What is expected ?

A successful build

What is actually happening?

> npm run build
> nuxt:sentry 13:58:09 ✔ Started logging errors to Sentry
> 13:58:10 ℹ Production build
> 13:58:10  FATAL  Could not compile template /home/nowuser/src/node_modules/@nuxtjs/sentry/lib/sentry.client.js: Unexpected token if
>   at Promise.all.templateFiles.map (node_modules/@nuxt/builder/dist/builder.js:5959:17)
>    ╰──────────────────────────────────────────��─────────────────────────────────────────╯

Additional comments?

It could be related to merging #75

I am trying to automatically track network errors.

export default function({ $axios, store, error, $raven }) {
  $axios.onError(e => {
    if (process.client) {
      $raven.captureException(e.response.data);
    }
    return Promise.reject(e);
  });
}

But $raven is undefined.

Any ideas ? I have read #19 but I don't find the solution.

Thanks

Version

2.1.0

Reproduction link

https://google.com

Steps to reproduce

I cannot use it, this.$sentry is undefined,

What is expected ?

able to capture log

What is actually happening?

error

I'm trying to run @nuxt/sentry with nuxt v.2 but got the following error:

 FATAL  Cannot read property 'config' of undefined

  at ModuleContainer.sentry (node_modules/@nuxtjs/sentry/lib/sentry.js:28:75)
  at ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:177:34)
  at promise.then (node_modules/@nuxt/utils/dist/utils.js:1664:43)
  at processTicksAndRejections (internal/process/next_tick.js:81:5)
  at process.runNextTicks [as _tickCallback] (internal/process/next_tick.js:51:3)
  at Function.Module.runMain (internal/modules/cjs/loader.js:865:11)
  at internal/main/run_main_module.js:21:11

Script fails at the following line https://github.com/nuxt-community/sentry-module/blob/master/lib/sentry.js#L51

It seems to be that config variable not defined

Installed the current version.
Added it to modules and config with dsn.

After yarn build && yarn start I am getting

[email protected] alert: failed to send exception to sentry: HTTP Error (401): Invalid api key

If I run yarn dev

[email protected] alert: failed to send exception to sentry: HTTP Error (413): undefined
[email protected] alert: failed to send exception to sentry: Socket timed out on request to sentry.io

nuxt 1.3.0

btw. if I console.log(this.$raven) I get

_dsn:"https://[email protected]/"

warning " > @nuxtjs/[email protected]" has unmet peer dependency "nuxt@<1.0.0 || >1.2.1".

I have seen this warning with yarn while using nuxt-edge.
So my question is: Is this project prepared for nuxt 2 or are there some changes needed for a full support of nuxt 2?

How can I deactivate Sentry on development and keep it active on production?

See https://github.com/40thieves/webpack-sentry-plugin

Would be great if this module does this also.

What problem does this feature solve?

We would be able to have specific monitoring and alerting on client side errors differently from server side errors.

With a fresh nuxt starter package with google analytics module, sentry installed, and the DSN configured in the env, I can't get client side error reporting in Sentry to work.

To reproduce, I used the google analytics test setup with a bad UA. This raises an error and should report to Sentry, but doesn't seem to.

Hello,

I have a Nuxt v1.4.0 application which I build once with npm run build, to be able to ship it in a Docker container. In the container, the application is started using npm start.
The container is deployed in multiple environments (development, staging, production...) and we use environment variables to have distinct configurations between environments. So I have a distinct SENTRY_DSN environment variable between staging and production.

When I start the application with the environment variable, Sentry configuration is OK for node (raven) but not for client (raven-js). It seems that the raven-js client configuration is only filled during build phase, from the nuxt-config variables.

Would it be possible to build without that information but to start the application with it?
For example: npm run build && SENTRY_DSN=xyz npm start
In other words, would it be possible for the generated code be updated with the environment variable during application start?

If not, I can't build once and run everywhere the application, because I have SENTRY_DSN values depending on the environment on which the application is started.

Thanks!

right now $sentry is not available in the context or in a component. To solve this a proper typescript defintion is needed, right now to workaround this issue you simple can do:
1.) create a new "index.d.ts" file
2.) paste:

declare module 'vue/types/vue' {
    interface Vue {
        $sentry: any;
}
}

see also // https://vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins

but the correct solution would be not using "any", but the correct type. I tried it with:
import { NodeClient } from '@sentry/node';

but this collides with some other things, and actually it would be wrong on the client side too.

Could be the right way to provide a "unified" interface for both client&server and wrap the actual sentry calls behind it?

Regards
Gexxxn 3000