How to Debug React Native Apps in Development and Production

Introduction

Welcome! Throughout this course we'll be covering some debugging tips, techniques, and tactics for debugging your React Native app in both development and production.

Thanks to Instabug for sponsoring this class! Instabug allows you to gather feedback in-app, capture bug reports, detect app crashes, and more! I've been really happy with the performance and insights of their service.

Getting Started

The server we'll be using is hosted on glitch.com - you can view the source here, though you won't really need it.

Due to the requirements of the production error reporting tool we'll be using, you'll need an ios/ and android/ directory in your project. This allows us to get native insights into our app as well.

With that in mind, create a new react native project.

react-native init DebuggingClass
cd DebuggingClass

Then replace App.js with the following and you'll be all set to follow along!

App.js

import React from 'react';
import { Button, View, Text, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
  text: {
    fontSize: 30,
    fontWeight: 'bold',
  },
});

class App extends React.Component {
  state = { number: null };

  componentDidMount() {
    this.getNumber();
  }

  getNumber = () => {
    fetch('https://debugging-class-server.glitch.me/number')
      .then(res => res.json())
      .then(res => {
        this.setState({
          number: res.number,
        });
      })
      .catch(err => {
        alert('an error occurred!');
      });
  };

  incrementNumber = () => {};

  decrementNumber = () => {};

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>{this.state.number}</Text>
        <Button title="Increment Number" onPress={this.incrementNumber} />
        <Button title="Decrement Number" onPress={this.decrementNumber} />
        <Button title="Get New Number" onPress={this.getNumber} />
      </View>
    );
  }
}

export default App;

Let's start!

Join the email list to be notified of all new lessons and classes!