How to add Sentry to your {N}ativeScript app
Tags: errors, sentry, logging, nativescript
Published: 2019-12-03 07:02:21

---
title: How to add Sentry to your {N}ativeScript app
published: true
tags: error,sentry,logging,nativescript
canonical_url: 
---

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](https://sentry.io)

> 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](https://github.com/NativeScript/sample-Groceries) from {N} that already well built, so we can focus on how to implement Sentry.

[NativeScript/sample-Groceries](https://github.com/NativeScript/sample-Groceries)

Let’s start coding:

```
\> git clone [git@github.com](mailto:git@github.com):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](https://docs.nativescript.org/) on how to install {N} in your machine.

[NativeScript Documentation](https://docs.nativescript.org/)

![](https://cdn-images-1.medium.com/max/400/1*Pf2g7HDIOFQzZGEp_sZXAw.jpeg)<figcaption>screenshot#1</figcaption>

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](https://github.com/danielgek/nativescript-sentry/pull/17)

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](https://drive.google.com/open?id=1WPZT29TXJYow8WsiWWaIjcD3D9bgHOQA)

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:

{% gist https://gist.github.com/cendekia/4754ffbc4068c08068a652eeca2a2457 %}

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:

{% gist https://gist.github.com/cendekia/6c5ae0ef3a78ba33473d9fd100ba973f %}

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:

![](https://cdn-images-1.medium.com/max/1024/1*J6jwnx3j_fjQBkkRay_6Pw.png)

#### 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.