Cannot get raygun4js working in react

k.art

Posted on
Oct 13 2016

Attempt #1

npm install raygun

var raygun = require('raygun');
var raygunClient = new raygun.Client().init({ apiKey: 'Ooecvy/YDa/ZMQQ365C7Vg==' });
raygunClient.send('Test Error');

Throws the following errors:

./~/raygun/lib/raygun.offline.js
Module not found: Error: Cannot resolve module 'fs' in /Users/[..]/node_modules/raygun/lib

./~/raygun/package.json
Module parse failed: /Users/[..]/node_modules/raygun/package.json Unexpected token (2:9)

k.art

Posted on
Oct 13 2016

Attempt #2

npm install raygun4js

In my main.js file:

import { rg4js, raygun4js, Raygun, raygun } from 'raygun4js';
console.log(rg4js);
console.log(raygun4js);
console.log(Raygun);
console.log(raygun);

Output:

undefined
undefined
undefined
undefined

What is the correct way to import it?

k.art

Posted on
Oct 13 2016

Attempt #3

var raygun4js = require('raygun4js');
console.log(raygun4js);

Gives me an empty object! :-)

Object {}

k.art

Posted on
Oct 13 2016

Attempt #4

index.html

<html>
    <head>
        <meta charset="utf-8">
        <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");
</script>
    </head>
    <body>
        <div id="app"></div>
        <script src="/static/bundle.js"></script>
        <script type="text/javascript">
            rg4js('apiKey', '<my api key>');
            rg4js('enableCrashReporting', true);

            Raygun.init('<my api key>');

            try {
              throw new Error("Test Error");
            } catch (e) {
              Raygun.send(e);
            }

        </script>
    </body>
</html>

Console:

Uncaught ReferenceError: Raygun is not defined

k.art

Posted on
Oct 13 2016

https://raygun.com/docs/languages/javascript

The document mentions two ways of including raygun.min.js. When to use which?

<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");
</script>

<script type="text/javascript" src="//cdn.raygun.io/raygun4js/raygun.min.js"></script>

Callum

Posted on
Oct 13 2016

Hi,

Raygun4JS is not currently a ES6 module (Attempt #2 ) or a CommonJS/AMD (UMD for both) module either (Attempt #1 and #3). We have it on the roadmap to refactor the provider to support these module formats but as this is non-standard tech still (no browser support without transpilation/polyfill) and the provider needs to be asynchronously loaded before the app code is loaded/executed support for these approaches is still a while away.

Attempt 4 is the correct approach and fully supports the way the provider is designed (the same approach as Google Analytics for instance). The only change you'll need to make is to remove the Raygun.init() line, and replace Raygun.send(e) with rg4js('send', e). This is due to the async loading as the Raygun object is not immediately available if the browser needs to download the script first.

You will also want to reference the full loader snippet (the first script block in your post above), and not the second one.

k.art

Posted on
Oct 13 2016

+10 Quick and precise reply!

Got it working, thanks heaps!

Reply