IE11 - Raygun is undefined

Im evaluating Raygun for our company. Im following V2 instructions. This is a React + Webpack application but I've chosen to load it using the async script and depending on the Global raygun object. By the way, the docs show a V2 for Crash Reports but not for Pulse. It is rather confusing.

Chrome

In Chrome, within any module, if I try to access Raygun it exists. I can use Raygun.trackEvent without any problem

IE11

In IE11, it fails 'Raygun is undefined'. When debugging I can see the rg4js object and the RaygunObject. That's it. I've tried getting an instance doing

var raygun = rg4js('getRaygunInstance');"

but it just returns undefined.

Setup

Please help. Below you can find my setup

Before closing Head

<script type="text/javascript">
!function(a,b,c,d,e,f,g,h){a.RaygunObject=e,a[e]=a[e]||function(){
(a[e].o=a[e].o||[]).push(arguments)},f=b.createElement(c),g=b.getElementsByTagName(c)[0],
f.async=1,f.src=d,g.parentNode.insertBefore(f,g),h=a.onerror,a.onerror=function(b,c,d,f,g){
h&&h(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push({
e:g})}}(window,document,"script","//cdn.raygun.io/raygun4js/raygun.min.js","rg4js");

Before closing Body

<script type="text/javascript">
rg4js('apiKey', 'myKey');
rg4js('enablePulse', true);
rg4js('enableCrashReporting', true);
rg4js('setUser', {
  isAnonymous: true,
});

Hello, Santiago! I just wanted to let you know that I am taking a look at this now and working to replicate the issue. As soon as I have more information I will reach out to you.

Good morning, Santiago!

Can you let me know if you're using Babel? I tested this in IE 11 with a basic JS app, a basic React app, and while using Webpack and was only able to reproduce the issue if I tried to enabled ES6 features or if I used babel.

As soon as I have that information I can dig a little deeper on my end.

Thank you!

Yes. Im using Babel. Es6 is the standard across all our teams

Great, thank you for letting us know! I'm working with Callum on our Engineering Team to track down the source of the issue. I'll keep you up to date as soon as I have more information.

Thank you again for your response and patience!

Hi Santiago,

An update on this - I have created a minimal sample using the details supplied about your stack, and have it loading correctly and sending Pulse events from both Chrome and IE11. This doesn't mean there isn't an issue (there most likely is), but we're on the right track to get React, Babel, Webpack and Raygun4JS working together.

Just wondering if you could confirm a couple of things:

Are you are seeing the IE11 error when attempting to use/see data from Crash Reporting, Pulse or both?

Are you attempting to get an instance of Raygun in order to use Raygun.send() from within a jsx component or module that's bundled up with Webpack (or otherwise)? Or are you seeing this error while expecting automatic Pulse data to be sent on a static page load, or virtual page transition.

If you could provide your precise Babel/Webpack/React/ReactDOM versions in your package.config that would help too.

Hi Callum, It happens when I try to get an instance of the api object so I can send a new event to Pulse. If you look at the first comment, I've added what is the syntax Im using to get an instance. Could you publish your repo to github so I can understand how you set it up? I'll get the versions as soon as I can. Thanks - Santiago

Hi Callum,

Please find below the Babel/Webpack/React/ReactDOM versions:

"babel-core": "^6.7.7"
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",

"webpack": "^1.13.0",

"react": "^15.0.2",

"react-dom": "^15.0.2"

Hi Santiago,

Thanks for providing that extra info. I'm pleased to report I have reproduced the issue and have created a candidate fix for Raygun4JS. There was an outstanding bug in the way the script handled asychronously loaded itself. Essentially, the global Raygun object could not ever be present in some circumstances (such as the one you saw in IE11), leading the API to track virtual page events or manually send errors be an impossibility until the browser triggered the onload event.

The upshot of this is twofold:

1. We have a new candidate release of Raygun4JS for you, v2.4.0, which according to our testing fixes the issue
2. A new API is available for the public trackEvent()/send() functions, which now correctly supports your use case

Naturally point 2 will necessitate some code changes, but we've managed to keep backwards compatibility for the old way when it works, and for your use case the code changes should hopefully be minimal.

The changes you need to make are:

1. Reference the new v2.4.0 version on the CDN while it's in alpha, and
2. Update your old rg4js() statements to move them away from the end of < /body> to the same script block as your loader snippet
3. Use the new API to send your events

For 1 and 2, in your HTML just above the script tag should now look like this:

<script type="text/javascript">
!function(a,b,c,d,e,f,g,h){a.RaygunObject=e,a[e]=a[e]||function(){
(a[e].o=a[e].o||[]).push(arguments)},f=b.createElement(c),g=b.getElementsByTagName(c)[0],
f.async=1,f.src=d,g.parentNode.insertBefore(f,g),h=a.onerror,a.onerror=function(b,c,d,f,g){
h&&h(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push({
e:g})}}(window,document,"script","//cdn.raygun.io/raygun4js/2.4.0/raygun.min.js","rg4js");

rg4js('apiKey', 'yourApiKey');
rg4js('enablePulse', true);
rg4js('enableCrashReporting', true);
rg4js('setUser', {
  isAnonymous: true,
});
</script>

v2.4.0 is referenced above, and you can delete the old snippets from the end of the < /body>. You'll of course need to add your API key too.

Finally, for point 3 above, to use the new API to call trackEvent, replace any code that calls:

var raygun = rg4js('getRaygunInstance');
raygun.trackEvent('pageView', { path: '/yourpath' });

with the new API:

rg4js('trackEvent', {
  type: 'pageView',
  path: '/yourpath'
});

and if you want to send errors manually:

rg4js('send', {
  error: new Error('Your error'),
  tags: ['Your tag'],
  customData: {  foo: 'bar' }
});

The effect of the last two examples is that they'll be cached and sent once the browser is finished loading, no matter what state the browser or provider is in (and whether it has loaded, which was the cause of the issue). As mentioned this is an alpha and won't be deployed to master or the package managers until QA and feedback has been finished. Please let us know if you continue to see issues or if the changes don't work for you.

Regards,

Callum Gavin
Raygun Limited