Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(TransactionFeedV2): Add error handling to Transaction Feed V2 #6151

Merged
merged 4 commits into from
Oct 16, 2024
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/redux/apiReducersList.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,5 @@ export const apiReducersList = {
} as const

export const apiMiddlewares = [transactionFeedV2Api.middleware]

export const apiReducersKeys = Object.keys(apiReducersList)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Do we need this in more than one location? I couldn't quite see it from this PR.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jeanregisser Not really, just thought it might be a little more convenient to have api-related stuff exported from this file but I am totally fine with both approaches. I'll revert this one.

Copy link
Member

@jeanregisser jeanregisser Oct 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can keep it I guess, I was just wondering why it needed to change now in this PR.

Copy link
Contributor Author

@sviderock sviderock Oct 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jeanregisser initially I was also using apiReducersKeys in the error logger to provide more precise info on what specific endpoint caused the error, but as I've figured that I can just pass the whole arg - I removed the usage but kept apiReducersKeys at the new place.

3 changes: 1 addition & 2 deletions src/redux/store.test.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import Ajv from 'ajv'
import { spawn, takeEvery } from 'redux-saga/effects'
import { ApiReducersKeys, apiReducersList } from 'src/redux/apiReducersList'
import { apiReducersKeys, ApiReducersKeys } from 'src/redux/apiReducersList'
import * as createMigrateModule from 'src/redux/createMigrate'
import { migrations } from 'src/redux/migrations'
import { RootState } from 'src/redux/reducers'
Expand Down Expand Up @@ -28,7 +28,6 @@ const resetStateOnInvalidStoredAccount = jest.spyOn(
const loggerErrorSpy = jest.spyOn(Logger, 'error')

function getNonApiReducers<R = Omit<RootState, ApiReducersKeys>>(state: RootState): R {
const apiReducersKeys = Object.keys(apiReducersList)
const nonApiReducers = {} as R

for (const [key, value] of Object.entries(state)) {
Expand Down
17 changes: 16 additions & 1 deletion src/transactions/feed/TransactionFeedV2.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import React, { useEffect, useMemo, useState } from 'react'
import { ActivityIndicator, SectionList, StyleSheet, View } from 'react-native'
import { showError } from 'src/alert/actions'
import { ErrorMessages } from 'src/app/ErrorMessages'
import SectionHead from 'src/components/SectionHead'
import GetStarted from 'src/home/GetStarted'
import { useSelector } from 'src/redux/hooks'
import { useDispatch, useSelector } from 'src/redux/hooks'
import { getFeatureGate, getMultichainFeatures } from 'src/statsig'
import { StatsigFeatureGates } from 'src/statsig/types'
import colors from 'src/styles/colors'
Expand Down Expand Up @@ -30,6 +32,7 @@ import {
groupFeedItemsInSections,
standByTransactionToTokenTransaction,
} from 'src/transactions/utils'
import Logger from 'src/utils/Logger'
import { walletAddressSelector } from 'src/web3/selectors'

type PaginatedData = {
Expand All @@ -39,6 +42,7 @@ type PaginatedData = {
// Query poll interval
const POLL_INTERVAL_MS = 10000 // 10 sec
const FIRST_PAGE_TIMESTAMP = 0
const LOGGER_TAG = 'transactions/feed/TransactionFeedV2'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: can just call this TAG, since it's only ever used for logging purposes anyways (and matches the naming convention we typically use)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jophish sure! I'll address this in the follow-up PR.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: what's the problem with doing it here, since it's this PR that introduces it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jeanregisser no problem with doing it here. I thought this should be a small enough change that it can be addressed within the next PR that I was already working on so there's less potential back-and-forth with rebasing all the follow-up PRs. But you're right, it makes sense to make the change here if this change is purely related to this PRs goal.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jeanregisser updated


function getAllowedNetworksForTransfers() {
return getMultichainFeatures().showTransfers
Expand Down Expand Up @@ -175,6 +179,7 @@ function renderItem({ item: tx }: { item: TokenTransaction }) {
}

export default function TransactionFeedV2() {
const dispatch = useDispatch()
const address = useSelector(walletAddressSelector)
const standByTransactions = useStandByTransactions()
const [endCursor, setEndCursor] = useState(FIRST_PAGE_TIMESTAMP)
Expand Down Expand Up @@ -262,6 +267,16 @@ export default function TransactionFeedV2() {
[isFetching, data?.transactions, originalArgs?.endCursor, standByTransactions.confirmed]
)

useEffect(
function handleError() {
if (error === undefined) return

Logger.error(LOGGER_TAG, 'Error while fetching transactions', error)
dispatch(showError(ErrorMessages.FETCH_FAILED))
},
[error]
)

const confirmedTransactions = useMemo(() => {
const flattenedPages = Object.values(paginatedData).flat()
const deduplicatedTransactions = deduplicateTransactions(flattenedPages)
Expand Down
Loading