Sentry-javascript: Raven-js not working with create-react-app

[rbndg]

Hello, I built an app using create-react-app (https://github.com/facebookincubator/create-react-app), however Raven-js isn't able to pick up errors.
I'm however able to log errors with Raven.captureException.

I'm using the latest version of sentry and i followed the instructions on the Sentry website.

[benvinegar]

Hey @rbndg – could you clone your repo and put it up on GitHub so I can inspect what's going on?

[benvinegar]

ping

Any news here – can you provide me with an example repro?

[Yabes]

Same problem here, Raven doesn't send anything. I didn't try to log errors with Raven.captureException.

My code is fairly simple:

App.js

import Raven from 'raven-js';
Raven.config('<my-sentry-url>').install();

However, when I copy/paste the Raven-js code in my console, it catches and sends errors.

[benvinegar]

I need a full repro. I've been using create-react-app internally to demo Sentry and it's worked fine for the past few months.

[fcoury]

Did anyone solve this issue after it being closed? I am having this exact same issue.

[kamilogorek]

What's exactly the issue? Can you provide your config/repro case? Without it, I cannot tell much.

[joshmreesjones]

I'm also having this issue.

[kamilogorek]

@joshmreesjones what's the issue exactly? What's your setup? Your config? Can you provide reproducible repository? It's very hard to debug without knowing any of those things :)

[jamesmanning]

@benvinegar what's the Right Way to add raven to an app that's been created with create-react-app? Because of the need to load before bundles, I'm kind of assuming the public/index.html is the right place, but knowing how you're doing it successfully would be great!

[benvinegar]

I'm kind of assuming the public/index.html is the right place, but knowing how you're doing it successfully would be great!

That's what I've done. I add a <script> link to the public CDN build of Raven.js, and also add a <script> with the .config() and .install() calls below.

[jamesmanning]

@benvinegar perfect, thanks! Does it Just Work even with react 16 or would someone need to add specific support for the error boundaries?

[kamilogorek]

Hey @jamesmanning, it'll work just fine out of the box. You can read how to use error boundaries here though - https://blog.sentry.io/2017/09/28/react-16-error-boundaries

One thing to keep in mind is that React does bubble all the errors in development mode, even those caught by error boundaries (here's more context you can read about https://github.com/getsentry/raven-js/issues/1249#issuecomment-372344133)

[yann-yinn]

edit : This is a way to include raven only in production mode :)
In your index.html :

  <% if (process.env.NODE_ENV == 'production') { %>
    <script src="https://cdn.ravenjs.com/3.26.2/raven.min.js" crossorigin="anonymous"></script>
    <script>Raven.config('https://[email protected]/1230983', {
        environment: "%NODE_ENV%",
      }).install();
    </script>
    <% } %>