How to add Sentry to your {N}ativeScript app

In this post, I’ll try to show how to add Sentry to your {N}ativeScript application. As some of you might know that how important we put an error tracking to our apps especially for the app that ready to deploy to production.

Unlike the web apps that We as developers can easily track the issues or errors by “inspect it” from the browser, once the mobile app IOS/Android released to the market, it will hard to track if any crash or error happened to the user unless they reporting it.

Sentry is one of the best error tracking out there, as said in their website:

Sentry | Error Tracking Software - JavaScript, Python, PHP, Ruby, more

Sentry is an open-source error tracking platform that provides complete app logic, deep context, and visibility across the entire stack in real time.

Okay, enough for the intro, let’s do the technical things. I’ll use the Groceries sample app from {N} that already well built, so we can focus on how to implement Sentry.

NativeScript/sample-Groceries

Let’s start coding:

\> git clone [[e-mail]](mailto:[e-mail]):NativeScript/sample-Groceries.git
\> cd sample-Groceries

In this repo, they already provide both javascript core or angular js codes, I would prefer the angular js though, but it’s up to you which one is the best for you.

\> git checkout angular-end

Please follow the instructions on how to install {N} in your machine.

NativeScript Documentation

screenshot#1

Before you run the app, please make sure connect your pc/laptop to your Android phone or you can also use the emulator.

Then, run the application using {N} CLI command, like so:

\> tns run android

… grab the coffee, while waiting for the building process.

And you should see the login screen of Groceries app like the screenshot#1.

In order to use Sentry, I am using the awesome nativescript-sentry plugin by danielgek.

BUT, Sentry just release new update couple months ago, and turns out it makes the package seems deprecated, and luckily someone already PR the fixes

Update android dependencies and common configuration to use latest sentry version by kvnvelasco · Pull Request #17 · danielgek/nativescript-sentry

Unfortunately, the author of the package seems busy right now, (by the time of this post published, he is still not merge the fixes). So I’ve manual bundle it for you, you can download it to your local machine:

nativescript-sentry-1.5.0.tgz

Add the package to the approot project:

\> tns plugin add \<directory\_path\>/nativescript-sentry-1.5.0.tgz

When the original repository is updated with the fixes, you should run this command instead:

\> tns plugin add nativescript-sentry

The next step, please sign up to sentry.io in order to get the token for accessing their services, it’ll be like so:

https://\<your-token\>@sentry.io/\<your\_project\_id\>

Add the following code in your app.module.ts

**...  
import { SentryModule } from 'nativescript-sentry/angular';**  
...

@NgModule({
...
 imports: [
**SentryModule.forRoot({dsn: 'https://\<your-token\>@sentry.io/\<your\_project\_id\>'}),**
 ...
...

Like so:

Okay, let’s put Sentry tracker which will tracking user who login with invalid email address format. So you need to add this code to login.component.ts :

...
**import { Sentry } from "nativescript-sentry";**...
submit() {
 if(!this.user.isValidEmail()) {
**Sentry.captureMessage("Enter a valid email address.", {});**...

Like so:

All set!! By trying to fill in an invalid email address, Sentry should be able to track and sent it to Sentry dashboard like so:

Conclusion

Again, It’s very importance to be able to trace what could possible make our app crash in production so that we immediately know what to fix or roll back.

I hope this post will help for those who wants to build the {N}ativeScript application and deploy it to production without worries about tracing bugs.