feat: added sentry to app

.github/scripts/eas-build-pre-install.sh

@@ -0,0 +1,2 @@
+#!/bin/bash
+set-env APP_VERSION $APP_VERSION

.github/workflows/upload-release-apk.yaml

@@ -5,36 +5,41 @@ on:
     types:
       - created
 
+env:
+  SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
 
+      - name: Setup Java
+        uses: actions/setup-java@v2
+        with:
+          java-version: 17
+          distribution: 'temurin'
+
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '20'
-          registry-url: 'https://npm.pkg.github.com'
-          scope: '@cp23pl1'
+          node-version: 20
           cache: yarn
 
       - name: Setup EAS
         uses: expo/expo-github-action@v8
         with:
           eas-version: latest
           token: ${{ secrets.EXPO_TOKEN }}
+          packager: yarn
 
       - name: Install dependencies
         run: yarn install --frozen-lockfile
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.GH_NPM_TOKEN }}
 
       - name: Build app
         run: |
-          touch .env.local
-          echo "APP_VERSION=${{ github.ref_name }}" >> .env.local
+          export APP_VERSION=${{ github.ref_name }}
           eas build --platform android --local --output ./winwin_driver_${{ github.ref_name }}.apk
 
       - name: Upload Release Asset

app.config.js → app.config.ts

@@ -1,4 +1,7 @@
-module.exports = {
+import { ExpoConfig } from 'expo/config'
+import { withSentry } from '@sentry/react-native/expo'
+
+const config: ExpoConfig = {
   name: process.env.APP_NAME || 'WinWin Driver',
   slug: 'winwin-driver',
   scheme: 'winwin-driver',
@@ -17,7 +20,6 @@ module.exports = {
     bundleIdentifier: 'com.cp23pl1.winwin.driver',
   },
   android: {
-    versionName: process.env.APP_VERSION || '1.0.0',
     adaptiveIcon: {
       foregroundImage: './assets/adaptive-icon.png',
       backgroundColor: '#FDA84B',
@@ -53,6 +55,13 @@ module.exports = {
       },
     ],
     'expo-image-picker',
+    [
+      '@sentry/react-native/expo',
+      {
+        organization: 'cp23pl1',
+        project: 'winwin-driver-app',
+      },
+    ],
   ],
   extra: {
     router: {
@@ -65,3 +74,9 @@ module.exports = {
   sdkVersion: '50.0.0',
   owner: 'cp23pl1',
 }
+
+export default withSentry(config, {
+  url: 'https://sentry.io/',
+  project: 'winwin-driver-app',
+  organization: 'cp23pl1',
+})

eas.json

@@ -18,19 +18,6 @@
         "EXPO_PUBLIC_AUTH0_SCOPE": "openid phone offline_access"
       }
     },
-    "preview": {
-      "distribution": "internal",
-      "env": {
-        "APP_NAME": "WinWin Driver (Preview)",
-        "EXPO_PUBLIC_API_URL": "https://capstone23.sit.kmutt.ac.th/pl1/v1",
-        "EXPO_PUBLIC_SOCKET_URL": "https://capstone23.sit.kmutt.ac.th",
-        "EXPO_PUBLIC_SOCKET_PATH": "/pl1-socket",
-        "EXPO_PUBLIC_AUTH0_DOMAIN": "cp23pl1-kmutt.jp.auth0.com",
-        "EXPO_PUBLIC_AUTH0_CLIENT_ID": "Ga1wuCxlw5PlXkYU4DcC8V8WwBRYvE9E",
-        "EXPO_PUBLIC_AUTH0_AUDIENCE": "https://cp23pl1.sit.kmutt.ac.th/",
-        "EXPO_PUBLIC_AUTH0_SCOPE": "openid phone offline_access"
-      }
-    },
     "production": {
       "env": {
         "APP_NAME": "WinWin Driver",

metro.config.js

@@ -1,7 +1,7 @@
-const { getDefaultConfig } = require('expo/metro-config')
+const { getSentryExpoConfig } = require('@sentry/react-native/metro')
 
 module.exports = (() => {
-  const config = getDefaultConfig(__dirname)
+  const config = getSentryExpoConfig(__dirname)
 
   const { transformer, resolver } = config
 

package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "main": "expo-router/entry",
   "scripts": {
+    "eas-build-pre-install": ".github/scripts/eas-build-pre-install.sh",
     "start": "expo start",
     "android": "expo run:android",
     "ios": "expo run:ios",
@@ -13,6 +14,7 @@
     "@gorhom/bottom-sheet": "^4.6.1",
     "@hookform/resolvers": "^3.3.2",
     "@react-native-community/netinfo": "11.1.0",
+    "@sentry/react-native": "5.19.1",
     "@shopify/flash-list": "1.6.3",
     "@tanstack/react-query": "^5.22.2",
     "axios": "^1.6.2",
@@ -59,5 +61,8 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
+  },
+  "release": {
+    "tagFormat": "${version}"
   }
 }

src/app/_layout.tsx

@@ -2,17 +2,20 @@ import React, { useCallback, useEffect } from 'react'
 import { useFonts } from 'expo-font'
 import { Slot, SplashScreen } from 'expo-router'
 import { DesignSystem } from '@/utils/design-system'
-import { Auth0Provider } from 'react-native-auth0'
-import { QueryClientProvider } from '@/providers/query-client'
-
-import 'moment/src/locale/th'
 import JobContextProvider from '@/contexts/JobContext'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
+import AppProviders from '@/providers'
+import * as Sentry from '@sentry/react-native'
 
 DesignSystem.setup()
 SplashScreen.preventAutoHideAsync()
 
-export default function RootLayout() {
+Sentry.init({
+  dsn: 'https://8b04138a8dbc17addc422ed9f7501170@o4507040207994880.ingest.us.sentry.io/4507051657003008',
+  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.7 : 1.0,
+})
+
+function RootLayout() {
   const [fontsLoaded, error] = useFonts({
     NotoSansThai: require('../../assets/fonts/NotoSansThai-Regular.ttf'),
     NotoSansThaiBold: require('../../assets/fonts/NotoSansThai-Bold.ttf'),
@@ -26,7 +29,7 @@ export default function RootLayout() {
 
   useEffect(() => {
     if (error) {
-      console.error(error)
+      throw error
     }
   }, [error])
 
@@ -35,17 +38,14 @@ export default function RootLayout() {
   }
 
   return (
-    <QueryClientProvider>
-      <Auth0Provider
-        domain={process.env.EXPO_PUBLIC_AUTH0_DOMAIN!}
-        clientId={process.env.EXPO_PUBLIC_AUTH0_CLIENT_ID!}
-      >
-        <GestureHandlerRootView style={{ flex: 1 }} onLayout={onLayoutRootView}>
-          <JobContextProvider>
-            <Slot />
-          </JobContextProvider>
-        </GestureHandlerRootView>
-      </Auth0Provider>
-    </QueryClientProvider>
+    <GestureHandlerRootView style={{ flex: 1 }} onLayout={onLayoutRootView}>
+      <AppProviders>
+        <JobContextProvider>
+          <Slot />
+        </JobContextProvider>
+      </AppProviders>
+    </GestureHandlerRootView>
   )
 }
+
+export default Sentry.wrap(RootLayout)

src/providers/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { QueryClientProvider } from './query-client'
+import { Auth0Provider } from 'react-native-auth0'
+
+type Props = {
+  readonly children: React.ReactNode
+}
+
+export default function AppProviders({ children }: Props) {
+  return (
+    <QueryClientProvider>
+      <Auth0Provider
+        domain={process.env.EXPO_PUBLIC_AUTH0_DOMAIN!}
+        clientId={process.env.EXPO_PUBLIC_AUTH0_CLIENT_ID!}
+      >
+        {children}
+      </Auth0Provider>
+    </QueryClientProvider>
+  )
+}