Sentry-javascript: Module 'ngRaven' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Created on 14 Mar 2016  ·  23Comments  ·  Source: getsentry/sentry-javascript

This is my order of files in karma.conf.js for running karma jasmine uint tests..

files: ['app/bower_components/jquery/dist/jquery.min.js',
'app/bower_components/angular/angular.min.js',
'app/bower_components/raven-js/dist/raven.js',
'app/bower_components/raven-js/plugins/angular.js'
]
Event though I included 'app/bower_components/raven-js/plugins/angular.js' I'm getting the error stating the module 'ngRaven' is not available.

Most helpful comment

Oh ok this actually goes against the Angular way where we usually do this kind of configuration in a module that would require ngRaven, but doing this way makes it impossible.

I think you should specify this in the documentation as it is not specified at all.

All 23 comments

+1

Is there something actionable we can do here? I'm a bit confused. :)

Oh, jk, I read the Stackoverflow. It works with the angular-raven package, but not ours.

Per the current documentation, the sentry angular plugin should now work

https://docs.getsentry.com/hosted/clients/javascript/integrations/angular/

Might be the directory 'dist' missing in 'app/bower_components/raven-js/plugins/angular.js'?

According to docs [https://docs.getsentry.com/hosted/clients/javascript/integrations/angular/#bower] it should be:

<script src="/bower_components/raven-js/dist/plugins/angular.js"></script>

Following the documentation angular can't find the module for me. The stack overflow solution works for me though.

Might be the directory 'dist' missing in 'app/bower_components/raven-js/plugins/angular.js'?

That would definitely do it.

If somebody here could provide me with a concrete example, I'd be glad to dig into this.

@benvinegar https://plnkr.co/edit/S1Dk9t?p=preview this is a simple sample of the error,

Based on https://github.com/getsentry/raven-js/blob/master/docs/integrations/angular.rst
It says:
_Note that this CDN build auto-initializes the Angular plugin._

But importing only that as the docs says throws an error, please check the log in the plnkr
[$injector:nomod] Module 'ngRaven' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Maybe this is just a misinterpretation of the docs?

Any news on this? I think the angular plugin only works for CommonJs, since this is actually never called when just including the file. Please fix so we can use the plugin

Here is the simplest example following your integration page that does not work: https://plnkr.co/edit/M5nt6Y?p=preview

@RobertBaron @mebibou – in both examples you need to configure Raven before initializing your app. Plugins aren't initialized until Raven.install() is called.

This is in all the documentation examples, for example:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://cdn.ravenjs.com/3.6.1/angular/raven.min.js"></script>
<script>Raven.config('https://<key>@app.getsentry.com/<project>').install();</script>

Although it could be made more explicit that your application script (e.g. app.js) must come afterwards.

Oh ok this actually goes against the Angular way where we usually do this kind of configuration in a module that would require ngRaven, but doing this way makes it impossible.

I think you should specify this in the documentation as it is not specified at all.

+1

See #413, @benvinegar Is it ready to tackle?

@Sija – given that people keep tripping up on this, I'm fine with merging. Though I'm worried about the case where someone might have declared Raven _before_ Angular. But at least CDN users need to upgrade manually.

Don't forget to add the bit in bold below

Raven
.config('https://@sentry.io/')
.addPlugin(Raven.Plugins.Angular)
.install();

@theatrain besides that you need to add an override on your package.json if using gulp inject or anything similiar that includes packages dependencies onto your html automatically.
The following bellow was my fix since i use gulp-inject

    "overrides": {
        "raven-js" : {
            "main": [
                "dist/raven.js",
                "dist/plugins/angular.js"
            ]
        }
    },

I found a good workaround for grunt as well since everything was uglified and minified:

My app.js looked like:

'use strict';

angular
  .module('sraApp', [
    'ngRaven'
  ]);

I made another file called raven.js

// redacted sensitive info
Raven
  .config('https://<code>@sentry.io/<myapp>')
  .addPlugin(Raven.Plugins.Angular)
  .install();

And in the index.html instead of inline scripts:

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/raven-js/dist/raven.js"></script>
<!-- endbower -->
<!-- Outside of auto-managed bower, but still inside compile -> vender.js -->
<script src="bower_components/raven-js/dist/plugins/angular.js"></script>
<!-- endbuild -->

<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/raven.js"></script>
<script src="scripts/app.js"></script>
<!-- endbuild -->

Now when I grunt build:dist which uglifies/minifies grunt will optimize my script so the plugin can be registered. Doing inline scripts won't cause the optimization so window.angular won't be right for the plugin to autoload itself.

Overall the flow is as follows (documentation is correct)

  • bring in angular
  • bring in raven
  • bring in raven/plugins/angular.js
  • config/addPlugin/install ngRaven but done properly to take into account uglification/minification

Also another thing to note that most configs can happen later (though you miss tags on any issues during bootstrap)

For example a heroku config loaded after the fact.

'use strict';

angular.module('sraApp')
  .run(function (Raven, HEROKU_APP_ID, HEROKU_APP_NAME, HEROKU_RELEASE_CREATED_AT, HEROKU_RELEASE_VERSION, HEROKU_SLUG_COMMIT, HEROKU_SLUG_DESCRIPTION, NODE_ENV) {
    Raven.setRelease(HEROKU_RELEASE_VERSION);
    Raven.setEnvironment(NODE_ENV);
    Raven.setTagsContext({
      release_date: HEROKU_RELEASE_CREATED_AT,
      git_commit: HEROKU_SLUG_COMMIT,
      slug_description: HEROKU_SLUG_DESCRIPTION,
      application: {
        name: HEROKU_APP_NAME,
        id: HEROKU_APP_ID,
      }
    });
  });

Any update on this? Also got problems here with our karma test suite.

@xeroxoid We also had problems with this during karma tests and were able to get around it.

In our case we were skipping the Raven.config().addPlugin().install() routine in the test environment because we didn't want them to be sent to sentry.

The problem with that is raven-js doesn't do things "the angular way" with modules - and instead only registers the ngRaven module if you called Raven.config() with a DSN.

The addPlugin() method only registers the angular module if the config was setup correctly (eg with a defined DSN url).

To fix this, we made it so that Raven.config().addPlugin().install() is always run even on our test suite, we use our normal DSN url and then use the config.shouldSendCallback method to block sending to sentry in the test environment.

This allows raven-js to properly register the angular module.

Hope that helps!

We're doing the same, but we pass a fake DSN in instead (this is for our dev env). Something like https://[email protected]/1 works fine (raven appears to do some amount of enforcement on the properties of the URL, so the username must be present along with the path).

Closing due to long inactivity. This thread also contains few workarounds just in case. Please feel free to reopen this issue if it's still relevant in any way.

Was this page helpful?
0 / 5 - 0 ratings