Docs Pricing Blog

Welcome Lewis Ellis

We’re excited to announce that Lewis Ellis is joining the engineering team at Sentry.

He joins us from Shape Security where he caught evil robots and wrote JavaScript trivia questions. He also claims that he likes Redis and Lua.

At Sentry, Lewis will be working on infrastructure and helping out with the JavaScript and Node clients. Outside work, he likes to play Ultimate, look at penguins, and read about obscure statistics.

Help us welcome Lewis by giving him a shout on Twitter or following him on GitHub.

Rich Error Reports with Redux Middleware

Sentry + Redux

If you’re a client-side developer, you’ve probably heard of Redux, a JavaScript library that helps manage application state in complex applications. It has become increasingly popular since its introduction in 2015, especially among React developers.

Redux can be pretty tricky to understand, but it works something like this:

  • your entire application state is saved in a single object called a store
  • you dispatch actions on the store to describe state changes (e.g. ADD_ROW)
  • you implement functions called reducers to transform the state of your store as a result of an action
  • your views render the current state of the store

Redux itself provides utility objects and functions to implement this architecture. It’s a surprisingly simple library, totaling just 6.7 kb minified.

Want to learn more about Redux? We recommend watching the free “Learn Redux” video series.

Redux and Logging

Architecting your application this way has a handful of benefits, but what makes it particularly nice is how it impacts logging and crash reporting. Specifically, Redux makes it easy to know:

  1. the state of your app at the time of the crash (via the store)
  2. the action(s) that preceded the crash

If you are working on a Redux app, it’s possible to write middleware to automatically capture these values from your application at crash-time. “Middleware” sounds intimidating, but it’s just a function that is registered with Redux to be invoked as an action is dispatched.

Below is an example middleware function, crashReporter. When registered with Redux, it is invoked every time an action is triggered.

import Raven from 'raven-js';

const crashReporter = store => next => action => {
  try {
    return next(action); // dispatch
  } catch (err) {
    console.error('Caught an exception!', err);
    Raven.captureException(err, { // send to crash reporting tool
      extra: {
        action,
        state: store.getState() // dump application state
      }
    });
    throw err; // re-throw error
  }
}

If an error is thrown during dispatch, it is caught and passed to our crash reporting service, including a dump of the current application state and the action that was being triggered.

To register crashReporter in your application, use Redux’s applyMiddleware utility function when first initializing your store:

import {createStore, applyMiddleware} from 'redux';

let store = createStore(
  myApp,  // initial reducer
  applyMiddleware(crashReporter)
);

Redux and Sentry

If you are a Redux and Sentry user, this middleware already exists via a project named redux-raven-middleware, available via npm:

npm install --save redux-raven-middleware

Like the example from earlier, it is initialized via applyMiddleware when creating your store:

import {createStore, applyMiddleware} from 'redux';
import RavenMiddleware from 'redux-raven-middleware';

const store = createStore(
  myApp,
  applyMiddleware(RavenMiddleware('your-sentry-dsn')),
);

NOTE: RavenMiddleware should be the first argument passed to applyMiddleware, ahead of other middleware like Redux Thunk.

Besides just capturing errors, redux-raven-middleware does two powerful things:

  • logs actions as Sentry breadcrumbs
  • attaches the contents of your Redux store as extra data

An example of extra data as it appears in Sentry:

Wrapping up

If you’re using Redux, you owe it to yourself to start logging rich application errors using middleware. If you’re a Sentry user, this is really easy via redux-raven-middleware. However you choose to track errors, there’s no better time than now to get started.

Vue.js Error Reporting with Sentry

Sentry + Vue.js

In anticipation of the upcoming release of Vue.js 2, we’ve updated Sentry to officially support Vue.js 2.x through our browser JavaScript SDK.

Getting Started

Add the following snippet to your application’s HTML file. It should go after where you have loaded the Vue library file.

<script src="https://cdn.ravenjs.com/3.5.0/vue/raven.min.js"></script>
<script>
Raven.config('your dsn').install();
</script>

For instructions using npm or Bower, please see our official Vue plugin docs.

After these two steps, Sentry will start capturing both native JavaScript errors and errors occurring deep inside your Vue.js application.

See component metadata in Sentry

Vue 2 introduces a new errorHandler config option that can be used to capture Vue-specific debugging information. The Sentry Vue plugin uses this callback to add valuable metadata about the state of your application to crash reports, including affected component names and the values of props.

Combine with Laravel reporting

Earlier in 2016, Vue became the default client-side framework for Laravel projects. If you’re using Vue with Laravel, you can additionally use our sentry-laravel package for end-to-end reporting of your application.

That’s it! As always, feedback, comments, or pull requests are greatly appreciated.

Ten Thousand Stars

Open Source has always been the heart of Sentry, and it’s something that continues to separate us from other products and services in our category. This week we hit 10,000 stars on GitHub. While GitHub stars are by no means the definitive metric, it illustrates how much importance developers place on Open Source when choosing software.

From everyone here at Sentry, thanks for helping us get to where we are today. ⭐ 🎉️

Welcome Katie Lundsgaard

We’re excited to announce that Katie Lundsgaard is joining the engineering team.

Katie will be working on Sentry after recently graduating from Hackbright Academy. She previously spent her time staring at JSON and playing endlessly with regex and CSS selectors at Kimono Labs. When not writing code, Katie likes to knit hats and tell people that her favorite Game of Thrones character is Cersei Lannister.

Welcome!