Sentry - Deploy Early; Deploy Often

Posted May 13, 2016

Guest post by Eric Feng at Sentry, an Angular Attack service sponsor

Having attended and judged many hackathons, I can confidently say winning a hackathon requires you focus on perfecting your demo. In Angular Attack, you don’t have the luxury of handwaving over errors with Sketch prototypes. Nothing is more important than making sure your app actually works.

For this, I have just one bit of advice: don’t wait until the last minute to deploy.

Deploy early; deploy often. At Sentry, we deploy as many as 20 times a day. Some integrations, like webhooks, only work well in production, and some errors are most easily found in production. Enlist friends and family who aren’t familiar with your “golden path” and can discover the potholes before the judges.

Of course, the worst part of responding to errors that users have emailed you is the back-and-forth while you pinpoint the problem.

Sentry not only helps you catch application errors—it helps you diagnose and resolve them. Our user feedback feature allows users to submit a description of what they were trying to do alongside the the crash report.

Sentry User Feedback

We even capture breadcrumbs, which are the trail of user events leading up to the error. These can be invaluable for reproducing and triaging what’s triggering the error.

Sentry Breadcrumbs

Best of all, installing Sentry takes only a few minutes. Signup for Sentry, create a project, and grab your data source name (DSN). If you’re using Angular 2, use the instructions below. If you’d prefer to use Angular 1, check out our Angular plugin docs.

Install

Load the Sentry client SDK, Raven.js: ​ html <script src="http://cdn.ravenjs.com/3.0.4/raven.js"></script> <script> Raven.config('<YOUR DSN>'); </script> Alternatively, Raven.js can also be installed via npm and loaded as a module: ​ npm install --save [email protected] javascript var Raven = require('raven-js'); Raven.config('<YOUR DSN>');

Configure

In your main.js / application bootstrap: ​ javascript (function(app) { document.addEventListener('DOMContentLoaded', function() { class RavenExceptionHandler { call(err) { Raven.captureException(err.originalException); } } ​ ng.platformBrowserDynamic.bootstrap( app.AppComponent, [ng.core.provide(ng.core.ExceptionHandler, {useClass: RavenExceptionHandler})]); }); })(window.app || (window.app = {}));

That’s it! Best of luck and if you have any questions, feel free to email us at [email protected]