About this Course

The Value of Building Real-World Apps in React Native

Storyboarding a React Native App's Components and Flow

Bootstrapping a React Native App With Boilerplate

How to Start Building a React Native iOS and Android App

Getting Started

Getting Started With React Native Navigation

Set App Logos, Launch Screens, and Icons in React Native

Optimize Perceived Performance With React Native Lifecycle

Navigation and Screens

Intro to Atomic Design Patterns [with examples]

Building a Typography Design System in React Native

How to Set Global Styles in React Native

SVG vs PNG: Which Image Format to Use in a React Native App

Customizing React Native Elements With Global Style

Combining React Elements Into Widgets

How to Build a Design System for Optimal User Experience

Design System

How State Management Works in React Native vs React

Using React Context API to Pass Data to React Components

Intro to Managing React Application State With Flux and Redux

State Management

Making API Calls in a React Native App With fetch and Axios

Using Middleware to Run React API Calls in the Background

How to Store User Login Data With React Native Async Storage

API calls and Middlewares

Intro to Debugging React Native With iOS and Android DevTools

Using React Native Debugger to Optimize an App

How to Test React Native Apps on iOS and Android Devices

Debugging

How to Improve JavaScript Performance and Boost Frame Rates

Use List Virtualization to Optimize React Native Rendering

Performance

How to Deploy React Native Apps With Microsoft CodePush

How to Get React Native Error Logs With Sentry

Conclusion

CodePush and Error Reporting

Intro to Building React Native Animations With Lottie

Using React Native SVG to Support SVG on iOS and Android

React Native Cheat Sheet

Bonus Content

react-native

node.js

react

With React Native, the most important thing is to understand the ecosystem and how it comes together to create an app. By understanding the overall architecture, we will be able to take the full of advantage the platform.

The course will start by covering the fundamentals like setting up the navigation, setting up the screens, styles, and the UI elements, before moving on to more advanced topics such as state management, crash/error reporting, setting up analytics and middlewares, debugging, and performance optimizations. We will also learn how to avoid/fix frame drops - possibly the most watched parameter of any UI application.

We will also build a Design System and will follow the [Atomic Design Pattern](https://atomicdesign.bradfrost.com/chapter-2/) of building layouts. A Design System primarily consists of three parts:
- UI Inventory and Patterns
- Typography
- Spacing and Styles

We will cover these in detail through the modules of the course. We will also learn about the React Native best practices, how to avoid rabbit holes, and focus on building a performant app.

**This is an opinionated way of building apps with React Native**. The fundamentals discussed in the course, like Atomic Design Pattern and Design System, can be applied to building any UI application, not just ones using React Native.

## One Complete App

The course comes with one complete eCommerce sample app that is discussed through the modules of the course.

## Up-to-date

The course builds on an open-source boilerplate template and is kept up to date with React, React Native and dependent library versions. It is also updated with the latest APIs and libraries that are introduced, like Hooks, hermes, flipper etc.

## Why this course

React Native for JavaScript Developers using TypeScript is based on years of experience in building React Native apps on production. The open-source boilerplate code discussed in the course is the platform for multiple apps on App Store and Play Store today. One of them being a Unicorn.

We will take a **Product** based development approach to building apps. React Native abstracts out a lot of platform specific nuances, so wouldn't focusing on building the app as an experience make the most sense. The design pattern will help us exactly with that, and we will put together a structure that is both scalable and extensible. This architecture also helps keep the design separate from the development.

At the end of this course, you will not only be able to build real-world apps with React Native, but also have the fundamentals of building any enterprise UI application.

Discord [channel](https://discord.gg/fz43pNnh)

Code along, and learn to build scalable and performant apps with React Native, from a Product perspective.

The newline Guide to React Native for JavaScript Developers using TypeScript

How to build real world apps. Code along.

How to do state management in React Native

Storyboarding - Build apps from a Product perspective

Understand the React Native ecosystem, the right way

Jumpstart using a template that has ~200 github stars

Architecture that separates design and development

Learn UX best practices and troubleshoot performance bottlenecks

Monitoring the production app is as critical as releasing one. There are a lot of tools in the market that help to do that. Custom logging by developers to monitor the app has become an outdated practice, and integrating a monitoring tool is a must.

React Native is mostly JavaScript. As we noticed earlier that a lot of the tools used for debugging come from the JavaScript world, so it is with error reporting too. Most of the popular web solutions already provide some kind of integration to React Native.

Based on my experience, we will look at integrating and using Sentry, though feel free to try others like Bugsnag, etc - they are equally good.

Sentry's React Native SDK enables automatic reporting of errors and exceptions, and identifies performance issues in your application. The SDK includes performance monitoring by default.

In the JavaScript world, Sentry is a popular tool used for error and performance monitoring. It is used quite widely in web applications, and with its JavaScript expertise, it makes for a good choice in React Native too.

It has a free version that developers can use (there is a limit to the number of events per month), which is a good place to start.

I am not affiliated with, or make any money, if students of this course use Sentry. After vetting a few options, it has been my preferred choice and hence the recommendation.

yarn sentry-wizard -i reactNative -p ios android

cd ios
pod install

This will run a few steps and open the browser for some auth. Follow the steps to complete the installation.

Sentry needs to be initialized as early as possible in the app lifecycle. Configure this at the entry point of the app - 

import * as Sentry from "@sentry/react-native";

Sentry.init(
  __DEV__
  ? {}
  : {
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0", // get this from sentry dashboard
  maxBreadcrumbs: 50,
  debug: true, // for dev-mode only
  release: "my-project-name@" + process.env.npm_package_version
});

---
title: How to Get React Native Error Logs With Sentry
slug: error-reporting
# privateVideoUrl: https://fullstack.wistia.com/medias/iia8vbkf13
isPublicLesson: false
playerCode: #1D5C72
role: LESSON
description: Error reporting in JavaScript and native code
---

## Error reporting

Monitoring the production app is as critical as releasing one. There are a lot of tools in the market that help to do that. Custom logging by developers to monitor the app has become an outdated practice, and integrating a monitoring tool is a must.

React Native is mostly JavaScript. As we noticed earlier that a lot of the tools used for debugging come from the JavaScript world, so it is with error reporting too. Most of the popular web solutions already provide some kind of integration to React Native.

Based on my experience, we will look at integrating and using Sentry, though feel free to try others like Bugsnag, etc - they are equally good.

## Sentry

> Sentry's React Native SDK enables automatic reporting of errors and exceptions, and identifies performance issues in your application. The SDK includes performance monitoring by default.

In the JavaScript world, Sentry is a popular tool used for error and performance monitoring. It is used quite widely in web applications, and with its JavaScript expertise, it makes for a good choice in React Native too.

It has a free version that developers can use (there is a limit to the number of events per month), which is a good place to start.

:::caution
I am not affiliated with, or make any money, if students of this course use Sentry. After vetting a few options, it has been my preferred choice and hence the recommendation.
:::

### Installation

```shell
yarn add @sentry/react-native
```

or

```shell
npm install --save @sentry/react-native
```

Next, we need to run the Sentry wizard:

```shell
yarn sentry-wizard -i reactNative -p ios android

cd ios
pod install
```

This will run a few steps and open the browser for some auth. Follow the steps to complete the installation.

### Setup

Sentry needs to be initialized as early as possible in the app lifecycle. Configure this at the entry point of the app - `./index.js`:

```javascript { actualFilename=./protected/src/sentry.js endLine=12 startLine=2 statedFilename=./index.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-react-native-for-javascript-developers/module_08/lesson_01.01/protected/src/sentry.js#L2 }
import * as Sentry from "@sentry/react-native";

Sentry.init(
  __DEV__
  ? {}
  : {
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0", // get this from sentry dashboard
  maxBreadcrumbs: 50,
  debug: true, // for dev-mode only
  release: "my-project-name@" + process.env.npm_package_version
});
```

To test the setup, add the following line anywhere in the code and launch the app.

Error reporting in JavaScript and native code

I thought it meant this was meant to be a course based on TypeScript, where are all the Interfaces, Type definitions? There is nothing related to TypeScript other than .tsx file extensions

React Native Guru

Hi, thanks for react out. The interfaces are defined along with where they are required, e.g. "/src/view/elements/buttons.tsx". I'll progressively be adding more as I upload the videos for subsequent modules. The state management and api call lessons will have quite a few of them. Is there any specific implementation that you are interested in?The code for this course is under the branch "newline" here:github.com/AmitM30/react-native-typescript-boilerplate/tree/newline

Amit Mangal

Hi @ReactNativeGuru, the modules for state management and api calls have been uploaded. You can find the type definitions used here:https://github.com/AmitM30/react-native-typescript-boilerplate/tree/newline/shared/redux/types

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

The newline Guide to React Native for JavaScript Developers using TypeScript

WELCOMEIntroduction

Introduction:

Start Here

Module 1: Getting Started

Introduction: (3:40)

About this Course

Introduction: (12:08)

The Value of Building Real-World Apps in React Native

Lesson 1: (8:19)

Storyboarding a React Native App's Components and Flow

Lesson 2: (15:42)

Bootstrapping a React Native App With Boilerplate

Lesson 3: (13:08)

How to Start Building a React Native iOS and Android App

Module 2: Navigation and Screens

Lesson 1: (28:25)

Getting Started With React Native Navigation

Lesson 2: (21:45)

Set App Logos, Launch Screens, and Icons in React Native

Lesson 3: (24:09)

Optimize Perceived Performance With React Native Lifecycle

Module 3: Design System

Lesson 1: (14:35)

Intro to Atomic Design Patterns [with examples]

Lesson 2: (13:22)

Building a Typography Design System in React Native

Lesson 3: (8:36)

How to Set Global Styles in React Native

Lesson 4: (13:32)

SVG vs PNG: Which Image Format to Use in a React Native App

Lesson 5: (16:14)

Customizing React Native Elements With Global Style

Lesson 6: (38:08)

Combining React Elements Into Widgets

Lesson 7: (14:25)

How to Build a Design System for Optimal User Experience

Module 4: State Management

Lesson 1: (31:21)

How State Management Works in React Native vs React

Lesson 2: (12:18)

Using React Context API to Pass Data to React Components

Lesson 3: (30:38)

Intro to Managing React Application State With Flux and Redux

Module 5: API calls and Middlewares

Lesson 1: (39:13)

Making API Calls in a React Native App With fetch and Axios

Lesson 2: (17:56)

Using Middleware to Run React API Calls in the Background

Lesson 3: (22:58)

How to Store User Login Data With React Native Async Storage

Module 6: Debugging

Lesson 1:

Intro to Debugging React Native With iOS and Android DevTools

Lesson 2:

Using React Native Debugger to Optimize an App

Lesson 3:

How to Test React Native Apps on iOS and Android Devices

Module 7: Performance

Lesson 1:

How to Improve JavaScript Performance and Boost Frame Rates

Lesson 2:

Use List Virtualization to Optimize React Native Rendering

Module 8: CodePush and Error Reporting

Lesson 1:

How to Deploy React Native Apps With Microsoft CodePush

Lesson 2:

How to Get React Native Error Logs With Sentry

Lesson 3:

Conclusion

Module 9: Bonus Content

Lesson 1:

Intro to Building React Native Animations With Lottie

Lesson 2: (1:27)