React App not reporting errors

SDKs
1

Hi,

So i’ve been trying to implement Raven for both AWS and React applications, I’m none too bothered at the moment about AWS but certainly the react app isn’t reporting unhandled exceptions, my App.js looks like the below, note I’ve included everything I’m importing and the general setup on the off chance something else is blocking it.

If required we have a private repo you can checkout and a deployed version of the app. I should point out we’re using create react app to produce the build.

import Raven from 'raven-js';
import React, { Component } from 'react'
import logger from 'redux-logger'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'

import { createStore, combineReducers, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'

import createHistory from 'history/createBrowserHistory'
import { Route } from 'react-router'

import { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux'
//eslint-disable-next-line
import * as MDL from 'material-design-lite'
import './App.css'
import reducers from './reducers'

import LoginForm from './components/loginForm/loginForm'
import Searches from './components/Searches/Searches'

// Create a history of your choosing (we're using a browser history in this case)
const history = createHistory()
Raven.config('SOME_CONFIG').install();
// Build the middleware for intercepting and dispatching navigation actions
const middlewareRouter = routerMiddleware(history)

// Add the reducer to your store on the `router` key
// Also apply our middleware for navigating
const store = createStore(
combineReducers({
	...reducers,
	router: routerReducer,
}),
composeWithDevTools(applyMiddleware(middlewareRouter, thunk, logger)),
)

class App extends Component {

	render() {
		return (
        <Provider store={store}>
            <ConnectedRouter history={history}>
                <div className="App">
                    <Route exact path="/" component={LoginForm}/>
                    <Route exact path="/searches" component={Searches}/>
                </div>
            </ConnectedRouter>
        </Provider>
		)
	}

}
export default App

I wanted to test the error reporting so I have a component which does this…

class Searches extends Component {

    static defaultProps = {
        searches: []
    }

    componentWillMount() {

        this.props.actions.getSearches()
    }

    componentDidUpdate() {

        var foobar
        // THIS IS MEANT TO CAUSE AN ERROR(SEE BELOW)
        console.log(foobar.test)
    }
  .....

I don’t seem to be getting any error reports but if I visit the app I get this in the console…

40
Screen Shot 2017-09-13 at 01.08.40.png2880×1170 652 KB

Any pointers?

Cheers

Marc

2

So actually I’ve found the issue, in my actions had a try catch that dispatched the errors if they occured, I had intended that the errors only related to API calls there, but it seems this:

    try {


        dispatch({ type: 'GET_NOTIFICATIONS_STARTED' })

        const response = await axios.post('URL', { searchId })

        dispatch({ type: 'GET_NOTIFICATIONS_DONE', payload: response.data })

    } catch (error) {

        dispatch({ type: 'GET_NOTIFICATIONS_ERROR', payload: error })
        Raven.captureException(error)
    }

Will actually catch errors that occur in components from either the previous or next state - so with that pattern you need to add in Raven.captureExeception to your try/catch. :slight_smile:

One problem is that when deployed bundled using create-react-app Sentry doesn’t report errors, any ideas how I resolve that?

3

Hey @marcfielding1, unfortunately it’s not enough information to find out what’s causing this behaviour.
Do errors themselves are caught by Raven? (you can verify that using dataCallback config method)
Are you able to provide reproducible environment that could be used to debug this issue?

4

Sure, I can provide you access to the deployed version of the app and the repo if needed? I’ve just added this package https://www.npmjs.com/package/react-transform-sentry to see if that fixes it.

If possible I’d like to do that privately rather than posting our demo logins etc?

Thanks

Marc

5

In actual fact that solved the issue totally and now works great in production, I’d be interested to know what was stopping it previously, maybe the way create-react-app bundles for production as it worked fine on localhost?

6

Good to hear that.

Out of curiosity, what version of React are you using? In v16, Error Boundaries may require some additional work from us to get everything working nicely, see https://facebook.github.io/react/blog/2017/07/26/error-handling-in-react-16.html

7

I’m using 15.61 at the moment, I will do a bit more investigation later on and see if I can track it down to exactly whats required, I do think though it’s something to do with the build for create react app.

1 Like