Merge pull request #26 from sp-engineering/feature/crash-reports

feat(#25) Crash reports, wrong credentials communicated better

.gitignore

@@ -64,3 +64,5 @@ yarn-error.log
 
 # testing
 /coverage
+
+google-services.json

README.md

@@ -1,13 +1,15 @@
-# Frigate Viewer
-
-This is mobile application which has been written using React Native to easily browse camera events of Frigate NVR. This is not official app.
-
-## Android developing
-
-Follow the instructions of React Native docs to install Android Studio and the emulator.
-
-Run `npm install` to install dependencies and `npm run android` to start the emulator, compile the app and install it on the emulator or a connected device.
-
-## iOS developing
-
-I've never run this application on iOS. It should work in theory, but probably needs some enhancements.
+# Frigate Viewer
+
+This is mobile application which has been written using React Native to easily browse camera events of Frigate NVR. This is not official app.
+
+## Android developing
+
+Follow the instructions of React Native docs to install Android Studio and the emulator.
+
+Run `npm install` to install dependencies and `npm run android` to start the emulator, compile the app and install it on the emulator or a connected device.
+
+`google-services.json` file should be placed in `./android/app` folder - it should contain credentials to Firebase for Crashlytics service.
+
+## iOS developing
+
+I've never run this application on iOS. It should work in theory, but probably needs some enhancements.

android/app/build.gradle

@@ -1,6 +1,8 @@
 apply plugin: "com.android.application"
 apply plugin: "org.jetbrains.kotlin.android"
 apply plugin: "com.facebook.react"
+apply plugin: "com.google.gms.google-services"
+apply plugin: "com.google.firebase.crashlytics"
 
 /**
  * This is the configuration block to customize your React Native Android app.

android/build.gradle

@@ -22,6 +22,8 @@ buildscript {
         classpath("com.android.tools.build:gradle")
         classpath("com.facebook.react:react-native-gradle-plugin")
         classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
+        classpath("com.google.gms:google-services:4.4.2")
+        classpath("com.google.firebase:firebase-crashlytics-gradle:3.0.2")
     }
 }
 

firebase.json

@@ -0,0 +1,5 @@
+{
+    "react-native": {
+        "crashlytics_debug_enabled": true
+    }
+}

helpers/rest.ts

@@ -1,5 +1,6 @@
 import {Buffer} from 'buffer';
 import {ToastAndroid} from 'react-native';
+import crashlytics from '@react-native-firebase/crashlytics';
 import {Credentials} from '../store/settings';
 
 export const authorizationHeader: (credentials: Credentials | null) => {
@@ -20,15 +21,21 @@ export const get = async <T>(
   json?: boolean,
 ): Promise<T> => {
   try {
-    return await fetch(
+    crashlytics().log(`GET ${endpoint}`);
+    const response = await fetch(
       `${endpoint}${queryParams ? `?${new URLSearchParams(queryParams)}` : ''}`,
       {
         headers: {
           ...authorizationHeader(credentials),
         },
       },
-    ).then(res => (json === false ? res.text() : res.json()));
+    );
+    if (response.status === 401) {
+      throw new Error(`Wrong credentials when tried to reach ${endpoint}`);
+    }
+    return response[json === false ? 'text' : 'json']();
   } catch (error) {
+    crashlytics().recordError(error as Error);
     const e = error as {message: string};
     ToastAndroid.show(e.message, ToastAndroid.LONG);
     return Promise.reject();
@@ -42,16 +49,22 @@ export const post = async <T>(
   json?: boolean,
 ): Promise<T> => {
   try {
-    return await fetch(
+    crashlytics().log(`POST ${endpoint}`);
+    const response = await fetch(
       `${endpoint}${queryParams ? `?${new URLSearchParams(queryParams)}` : ''}`,
       {
         method: 'post',
         headers: {
           ...authorizationHeader(credentials),
         },
       },
-    ).then(res => (json === false ? res.text() : res.json()));
+    );
+    if (response.status === 401) {
+      throw new Error(`Wrong credentials when tried to reach ${endpoint}`);
+    }
+    return response[json === false ? 'text' : 'json']();
   } catch (error) {
+    crashlytics().recordError(error as Error);
     const e = error as {message: string};
     ToastAndroid.show(e.message, ToastAndroid.LONG);
     return Promise.reject();
@@ -65,16 +78,22 @@ export const del = async <T>(
   json?: boolean,
 ): Promise<T> => {
   try {
-    return await fetch(
+    crashlytics().log(`DELETE ${endpoint}`);
+    const response = await fetch(
       `${endpoint}${queryParams ? `?${new URLSearchParams(queryParams)}` : ''}`,
       {
         method: 'delete',
         headers: {
           ...authorizationHeader(credentials),
         },
       },
-    ).then(res => (json === false ? res.text() : res.json()));
+    );
+    if (response.status === 401) {
+      throw new Error(`Wrong credentials when tried to reach ${endpoint}`);
+    }
+    return response[json === false ? 'text' : 'json']();
   } catch (error) {
+    crashlytics().recordError(error as Error);
     const e = error as {message: string};
     ToastAndroid.show(e.message, ToastAndroid.LONG);
     return Promise.reject();

i18n/de.ts

@@ -41,6 +41,15 @@ export default {
   'menu.item.logs.label': 'Protokolle',
   'menu.item.settings.label': 'Einstellungen',
   'menu.item.author.label': 'Autor',
+  'report.topBar.title': 'Problem melden',
+  'report.introduction.info':
+    'Der Bericht wird einige Protokolle darüber enthalten, wie Sie die Anwendung genutzt haben. Er wird keine Authentifizierungsinformationen enthalten.',
+  'report.issue.header': 'Problem',
+  'report.issue.description.label': 'Beschreiben Sie das Problem',
+  'report.action.send': 'Senden',
+  'report.toast.success': 'Das Problem wurde erfolgreich gemeldet',
+  'report.error.crash-report-disabled':
+    'Das Melden von Abstürzen ist deaktiviert. Gehen Sie zu den Einstellungen und aktivieren Sie es, um ein Problem zu melden. Es wird mir helfen, das Problem besser zu verstehen. Sie können es auch auf GitHub melden.',
   'settings.topBar.title': 'Einstellungen',
   'settings.error.required': 'Dieses Feld muss ausgefüllt sein.',
   'settings.error.min': 'Der Mindestwert ist {min}.',
@@ -51,7 +60,7 @@ export default {
   'settings.server.protocol.label': 'Protokoll',
   'settings.server.host.label': 'Host-Adresse',
   'settings.server.port.label': 'Port',
-  'settings.server.path.label': 'Pfed',
+  'settings.server.path.label': 'Pfad',
   'settings.server.username.label': 'Benutzername',
   'settings.server.password.label': 'Passwort',
   'settings.server.useDemoServerButton': 'Nutzen den Demo Server',
@@ -103,6 +112,7 @@ export default {
   'settings.app.colorScheme.option.auto': 'Auto',
   'settings.app.colorScheme.option.light': 'Hell',
   'settings.app.colorScheme.option.dark': 'Dunkel',
+  'settings.app.sendCrashReports.label': 'Absturzberichte senden',
   'settings.cameras.header': 'Kameras',
   'settings.cameras.imageRefreshFrequency.label':
     'Grafik ausgetauscht (sekunden)',

i18n/en.ts

@@ -40,6 +40,16 @@ export default {
   'menu.item.logs.label': 'Logs',
   'menu.item.settings.label': 'Settings',
   'menu.item.author.label': 'Author',
+  'menu.item.problem.label': 'Report problem',
+  'report.topBar.title': 'Report problem',
+  'report.introduction.info':
+    'The report will contain some logs of how you used the application. It will not contain your authentication info.',
+  'report.issue.header': 'Issue',
+  'report.issue.description.label': 'Describe the problem',
+  'report.action.send': 'Send',
+  'report.toast.success': 'The issue was reported successfully',
+  'report.error.crash-report-disabled':
+    'Reporting crashes is disabled. Go to settings and enable it to report an issue. It will help me to better understand the matter of the issue. You can also report it on GitHub.',
   'settings.topBar.title': 'Settings',
   'settings.error.required': 'This field is required.',
   'settings.error.min': 'Minimum value is {min}.',
@@ -102,6 +112,7 @@ export default {
   'settings.app.colorScheme.option.auto': 'Auto',
   'settings.app.colorScheme.option.light': 'Light',
   'settings.app.colorScheme.option.dark': 'Dark',
+  'settings.app.sendCrashReports.label': 'Send crash reports',
   'settings.cameras.header': 'Cameras',
   'settings.cameras.imageRefreshFrequency.label':
     'Image refresh frequency (seconds)',

i18n/es.ts

@@ -41,6 +41,15 @@ export default {
   'menu.item.logs.label': 'Registros',
   'menu.item.settings.label': 'Configuración',
   'menu.item.author.label': 'Autor',
+  'report.topBar.title': 'Reportar problema',
+  'report.introduction.info':
+    'El informe contendrá algunos registros de cómo utilizaste la aplicación. No contendrá tu información de autenticación.',
+  'report.issue.header': 'Problema',
+  'report.issue.description.label': 'Describe el problema',
+  'report.action.send': 'Enviar',
+  'report.toast.success': 'El problema fue reportado con éxito',
+  'report.error.crash-report-disabled':
+    'La notificación de fallos está deshabilitada. Ve a la configuración y habilítala para reportar un problema. Me ayudará a comprender mejor el problema. También puedes reportarlo en GitHub.',
   'settings.topBar.title': 'Configuración',
   'settings.error.required': 'Este campo es obligatorio.',
   'settings.error.min': 'El valor mínimo es {min}.',
@@ -103,6 +112,7 @@ export default {
   'settings.app.colorScheme.option.auto': 'Automático',
   'settings.app.colorScheme.option.light': 'Claro',
   'settings.app.colorScheme.option.dark': 'Oscuro',
+  'settings.app.sendCrashReports.label': 'Enviar informes de fallos',
   'settings.cameras.header': 'Cámaras',
   'settings.cameras.imageRefreshFrequency.label':
     'Frecuencia de actualización de la imagen (segundos)',

i18n/fr.ts

@@ -41,6 +41,15 @@ export default {
   'menu.item.logs.label': 'Journaux',
   'menu.item.settings.label': 'Paramètres',
   'menu.item.author.label': 'Auteur',
+  'report.topBar.title': 'Signaler un problème',
+  'report.introduction.info':
+    "Le rapport contiendra certains journaux de la manière dont vous avez utilisé l'application. Il ne contiendra pas vos informations d'authentification.",
+  'report.issue.header': 'Problème',
+  'report.issue.description.label': 'Décrire le problème',
+  'report.action.send': 'Envoyer',
+  'report.toast.success': 'Le problème a été signalé avec succès',
+  'report.error.crash-report-disabled':
+    "Le rapport d’erreurs est désactivé. Allez dans les paramètres et activez-le pour signaler un problème. Cela m'aidera à mieux comprendre la nature du problème. Vous pouvez également le signaler sur GitHub.",
   'settings.topBar.title': 'Paramètres',
   'settings.error.required': 'Ce champ est obligatoire.',
   'settings.error.min': 'La valeur minimale est {min}.',
@@ -103,6 +112,7 @@ export default {
   'settings.app.colorScheme.option.auto': 'Auto',
   'settings.app.colorScheme.option.light': 'Clair',
   'settings.app.colorScheme.option.dark': 'Sombre',
+  'settings.app.sendCrashReports.label': 'Envoyer les rapports de plantage',
   'settings.cameras.header': 'Caméras',
   'settings.cameras.imageRefreshFrequency.label':
     'Fréquence d’actualisation des images (secondes)',

i18n/it.ts

@@ -41,6 +41,15 @@ export default {
   'menu.item.logs.label': 'Registri',
   'menu.item.settings.label': 'Impostazioni',
   'menu.item.author.label': 'Autore',
+  'report.topBar.title': 'Segnala un problema',
+  'report.introduction.info':
+    "Il rapporto conterrà alcuni registri di come hai utilizzato l'applicazione. Non conterrà le tue informazioni di autenticazione.",
+  'report.issue.header': 'Problema',
+  'report.issue.description.label': 'Descrivi il problema',
+  'report.action.send': 'Invia',
+  'report.toast.success': 'Il problema è stato segnalato con successo',
+  'report.error.crash-report-disabled':
+    'La segnalazione degli arresti anomali è disabilitata. Vai alle impostazioni e abilitalo per segnalare un problema. Mi aiuterà a capire meglio la natura del problema. Puoi anche segnalarlo su GitHub.',
   'settings.topBar.title': 'Impostazioni',
   'settings.error.required': 'Questo campo è obbligatorio.',
   'settings.error.min': 'Il valore minimo è {min}.',
@@ -103,6 +112,7 @@ export default {
   'settings.app.colorScheme.option.auto': 'Auto',
   'settings.app.colorScheme.option.light': 'Chiaro',
   'settings.app.colorScheme.option.dark': 'Scuro',
+  'settings.app.sendCrashReports.label': 'Invia rapporti sugli arresti anomali',
   'settings.cameras.header': 'Telecamere',
   'settings.cameras.imageRefreshFrequency.label':
     "Frequenza di aggiornamento dell'immagine (secondi)",

i18n/pl.ts

@@ -41,6 +41,15 @@ export default {
   'menu.item.logs.label': 'Dzienniki',
   'menu.item.settings.label': 'Ustawienia',
   'menu.item.author.label': 'Autor',
+  'report.topBar.title': 'Zgłoś problem',
+  'report.introduction.info':
+    'Zgłoszenie będzie zawierało pewne logi dotyczące tego, jak korzystałeś z aplikacji. Nie będzie zawierał informacji uwierzytelniających.',
+  'report.issue.header': 'Problem',
+  'report.issue.description.label': 'Opisz problem',
+  'report.action.send': 'Wyślij',
+  'report.toast.success': 'Problem został zgłoszony pomyślnie',
+  'report.error.crash-report-disabled':
+    'Zgłaszanie awarii jest wyłączone. Przejdź do ustawień i włącz to, aby zgłosić problem. Pomoże mi to lepiej zrozumieć naturę problemu. Możesz również zgłosić to na GitHubie.',
   'settings.topBar.title': 'Ustawienia',
   'settings.error.required': 'To pole jest wymagane.',
   'settings.error.min': 'Minimalną wartością jest {min}.',
@@ -103,6 +112,7 @@ export default {
   'settings.app.colorScheme.option.auto': 'Automatyczny',
   'settings.app.colorScheme.option.light': 'Jasny',
   'settings.app.colorScheme.option.dark': 'Ciemny',
+  'settings.app.sendCrashReports.label': 'Wysyłaj raporty o awariach',
   'settings.cameras.header': 'Kamery',
   'settings.cameras.imageRefreshFrequency.label':
     'Częstotliwość odświeżania obrazu (sekundy)',

i18n/pt.ts

@@ -41,6 +41,15 @@ export default {
   'menu.item.logs.label': 'Registros',
   'menu.item.settings.label': 'Configurações',
   'menu.item.author.label': 'Autor',
+  'report.topBar.title': 'Reportar problema',
+  'report.introduction.info':
+    'O relatório conterá alguns logs de como você utilizou o aplicativo. Ele não conterá suas informações de autenticação.',
+  'report.issue.header': 'Problema',
+  'report.issue.description.label': 'Descreva o problema',
+  'report.action.send': 'Enviar',
+  'report.toast.success': 'O problema foi reportado com sucesso',
+  'report.error.crash-report-disabled':
+    'O relatório de falhas está desativado. Vá para as configurações e ative-o para reportar um problema. Isso me ajudará a entender melhor a questão. Você também pode reportá-lo no GitHub.',
   'settings.topBar.title': 'Configurações',
   'settings.error.required': 'Este campo é obrigatório.',
   'settings.error.min': 'O valor mínimo é {min}.',
@@ -103,6 +112,7 @@ export default {
   'settings.app.colorScheme.option.auto': 'Auto',
   'settings.app.colorScheme.option.light': 'Luz',
   'settings.app.colorScheme.option.dark': 'Escuro',
+  'settings.app.sendCrashReports.label': 'Enviar relatórios de falhas',
   'settings.cameras.header': 'Câmeras',
   'settings.cameras.imageRefreshFrequency.label':
     'Frequência de atualização da imagem (segundos)',

i18n/sv.ts

@@ -41,6 +41,15 @@ export default {
   'menu.item.logs.label': 'Loggar',
   'menu.item.settings.label': 'Inställningar',
   'menu.item.author.label': 'Författare',
+  'report.topBar.title': 'Rapportera problem',
+  'report.introduction.info':
+    'Rapporten kommer att innehålla vissa loggar om hur du använde applikationen. Den kommer inte att innehålla din autentiseringsinformation.',
+  'report.issue.header': 'Problem',
+  'report.issue.description.label': 'Beskriv problemet',
+  'report.action.send': 'Skicka',
+  'report.toast.success': 'Problemet har rapporterats framgångsrikt',
+  'report.error.crash-report-disabled':
+    'Rapportering av krascher är inaktiverat. Gå till inställningarna och aktivera det för att rapportera ett problem. Det hjälper mig att bättre förstå problemet. Du kan också rapportera det på GitHub.',
   'settings.topBar.title': 'Inställningar',
   'settings.error.required': 'Det här fältet är obligatoriskt.',
   'settings.error.min': 'Minimivärdet är {min}.',
@@ -103,6 +112,7 @@ export default {
   'settings.app.colorScheme.option.auto': 'Bil',
   'settings.app.colorScheme.option.light': 'Ljus',
   'settings.app.colorScheme.option.dark': 'Mörk',
+  'settings.app.sendCrashReports.label': 'Skicka kraschanmälningar',
   'settings.cameras.header': 'Kameror',
   'settings.cameras.imageRefreshFrequency.label':
     'Uppdateringsfrekvens för bilder (sekunder)',

i18n/uk.ts

@@ -41,6 +41,15 @@ export default {
   'menu.item.logs.label': 'Журнали',
   'menu.item.settings.label': 'Налаштування',
   'menu.item.author.label': 'Автор',
+  'report.topBar.title': 'Повідомити про проблему',
+  'report.introduction.info':
+    'Звіт міститиме деякі журнали про те, як ви використовували додаток. Він не міститиме інформації про вашу автентифікацію.',
+  'report.issue.header': 'Проблема',
+  'report.issue.description.label': 'Опишіть проблему',
+  'report.action.send': 'Відправити',
+  'report.toast.success': 'Проблему успішно повідомлено',
+  'report.error.crash-report-disabled':
+    'Повідомлення про збої вимкнено. Перейдіть до налаштувань і ввімкніть його, щоб повідомити про проблему. Це допоможе мені краще зрозуміти суть проблеми. Ви також можете повідомити про це на GitHub.',
   'settings.topBar.title': 'Налаштування',
   'settings.error.required': "Це поле обов'язкове.",
   'settings.error.min': 'Мінімальне значення до {min}.',
@@ -103,6 +112,7 @@ export default {
   'settings.app.colorScheme.option.auto': 'Авто',
   'settings.app.colorScheme.option.light': 'світло',
   'settings.app.colorScheme.option.dark': 'Темний',
+  'settings.app.sendCrashReports.label': 'Надсилати звіти про збої',
   'settings.cameras.header': 'Камери',
   'settings.cameras.imageRefreshFrequency.label':
     'Частота оновлення зображення (секунди)',

index.js

@@ -2,6 +2,7 @@ import {Navigation} from 'react-native-navigation';
 import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 import {TopBarButton} from './components/icons/TopBarButton';
 import {Author} from './views/author/Author';
+import {Report} from './views/report/Report';
 import {CameraEventClip} from './views/camera-event-clip/CameraEventClip';
 import {CameraPreview} from './views/camera-preview/CameraPreview';
 import {CameraEvents} from './views/camera-events/CameraEvents';
@@ -38,6 +39,7 @@ registerComponent('System', System, viewDecorators);
 registerComponent('Logs', Logs, viewDecorators);
 registerComponent('Settings', Settings, viewDecorators);
 registerComponent('Author', Author, viewDecorators);
+registerComponent('Report', Report, viewDecorators);
 
 registerComponent('Menu', Menu, [
   gestureHandlerRootHOC,