Docs Pricing Blog

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!

Support for React Minified Errors

Minified React Errors in Sentry

As React developers, we know how frustrating it is when an error occurs in your React app and all you have is the following:

Minified exception occurred; use the non-minified dev environment for the full error message

Not very helpful. You’re seeing this because React strips error messages from production builds in order to reduce filesize. But as of version 15.2, React now produces the following:

Uncaught Invariant Violation: Minified React error #31; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Bfoo%7D&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

This is much more helpful because it’s possible to see the original error message by manually visiting the URL provided. But even better is that Sentry automatically fetches the original error message for you. You’ll see the original unminified error in the Sentry UI, in notification emails – everywhere.

To use this feature, just make sure you’re running React 15.2 or later (and of course the latest version of the Sentry JavaScript SDK). We’ll take care of the rest.

Happy debugging!

User Feedback in Laravel

Sentry + Laravel

Feedback is a feature that allows you to interact with your customers when they hit an issue. While most of Sentry will just work out of the box, Feedback requires a bit more work on your end. Today we’re going to try to help you get started so you can get back to shipping.

Getting Started

The first step to getting Feedback working is to configure a custom 500 error page, and ensure that page has context available from Sentry. To do this, we open up our error handler in App/Exceptions/Handler.php. From there, we just need to ensure that we’re rendering an error response, and then we pass in the context:

<?php

class Handler extends ExceptionHandler
{
    private $sentryID;

    public function report(Exception $e)
    {
        if ($this->shouldReport($e)) {
            // bind the event ID for Feedback
            $this->sentryID = app('sentry')->captureException($e);
        }
        parent::report($e);
    }

    public function render($request, Exception $e)
    {
        return response()->view('errors.500', [
            'sentryID' => $this->sentryID,
        ], 500);
    }
}

Next up we need to add in the Feedback widget to our error template. In our example above this is at resources/views/errors/500.blade.php:

<div class="content">
    <div class="title">Something went wrong.</div>
    @unless(empty($sentryID))
        <!-- Sentry JS SDK 2.1.+ required -->
        <script src="https://cdn.ravenjs.com/3.3.0/raven.min.js"></script>

        <script>
        Raven.showReportDialog({
            eventId: '{{ $sentryID }}',

            // use the public DSN (dont include your secret!)
            dsn: '___PUBLIC_DSN___'
        });
        </script>
    @endunless
</div>

That’s it! We’ll automatically pull up the Feedback dialog when an error happens:

Sentry Dialog

Learn More

Take a look at the sentry-laravel project on GitHub to learn more about how things are implemented, as well as additional details on using it with Sentry.

If you’re not yet a Sentry user, you can try Sentry free for 14 days. If that’s not your cup of tea, it’s all open source on GitHub.