How to use NavigationStack and WithPerceptionTracking on iOS 17?

[mycroftcanner]

In iOS 17, when WithPerceptionTracking is enabled, we're noticing an issue where the child task isn't properly canceled upon the user hitting the back button. This leads to a navigation back to the previously dismissed view. Intriguingly, this wasn't apparent in debug mode with .printChanges, but it's consistently occurring in the release version. Conversely, if we disable WithPerceptionTracking, this problem doesn't seem to arise.

 @ViewAction(for: Patrons.self)
public struct PatronsFeatureView: View {
  @BindableStore public var store: StoreOf<Patrons>
  @State private var settingsDetent = PresentationDetent.medium
  
  public init(store: StoreOf<Patrons>) {
    self.store = store
  }
  
  public var body: some View {
    WithPerceptionTracking {
      NavigationStack(path: $store.scope(state: \.path, action: \.path)) {
        CollectionsView(store: store.scope(state: \.home, action: \.home))
      } destination: { store in
        WithPerceptionTracking {
          switch store.state {
          case .area:
            if let store = store.scope(state: \.area, action: \.area) {
              AreaView(store: store)
            }
          case .collections:
            if let store = store.scope(state: \.collections, action: \.collections) {
              CollectionsView(store: store)
            }
          case .profiles:
            if let store = store.scope(state: \.profiles, action: \.profiles) {
              VGridProfiles(store: store)
            }
          case .profile:
            if let store = store.scope(state: \.profile, action: \.profile) {
              ProfileView(store: store)
            }
          case .subscriptions:
            if let store = store.scope(state: \.subscriptions, action: \.subscriptions) {
              SubscriptionsView(store: store)
            }
          }
        }
      }
      .alert($store.scope(state: \.alert, action: \.alert))
      .task { await send(.task).finish() }
      .introspect(.navigationStack, on: .iOS(.v16), .iOS(.v17)) { controller in
        let appearance = UINavigationBarAppearance()
        appearance.configureWithOpaqueBackground()
        appearance.backgroundColor = .black
        controller.navigationBar.standardAppearance = appearance;
        controller.navigationBar.scrollEdgeAppearance = controller.navigationBar.standardAppearance
      }
    }
  }
}

[mbrandonw]

Hi @mycroftcanner, can you provide a minimal project that demonstrates the behavior you are seeing? There isn't enough in this code for us to understand what is going on.

And are you saying that it works on iOS 16 but doesn't work on iOS 17?

[zboralski]

The problem persists with or without perception tracking on iOS 17. It seems like that the effect are not probably canceled when the view is dismissed.

With perception tracking... if I dismiss the view right away ... it navigates back to it.

Without perception tracking.. if I dismiss the view it navigates back to it and it dismisses it again.

Removing the .animation() doesn't help.

This was working fine before the observation beta. @stephencelis aren't the effect supposed to be canceled automatically when using a navigation stack or navigation stack store?

[mbrandonw]

Hi @zboralski, there really isn't much we can do without a minimal project that reproduces the problem. Can you provide one?

[zboralski]

Thanks @mbrandonw,

I created a minimal project but can't reproduce it even though the code is mostly the same apart from all the dependencies and most of the data not being used.

To trigger the bug I have to dismiss the view as soon as it appears.. the view gets dismissed but the application navigates right back to it.

When it happens I see the following error in the logs:

<decode: bad range for [%@] got [offs:306 len:1060 within:0]>

and I also get a purple warning saying:

A "forEach" at "PatronsFeature/Patrons.swift:165" received an action for a missing element. …
Action: Patrons.Path.Action.profile(.view(.task))

    .forEach(\.path, action: \.path) {
      Path()
    }

but I can't figure out from where in the TCA code this decode error is being logged

[zboralski]

Maybe I can try to explain what happens...

I have a Collection.State (home) which contains an identified array of Profiles.State for each area.

Each Profiles.State has an identified array of Profile.State.

When I tap on a profile:

received action: XXX.Action.root(.patrons(.home(.profiles(.element(id:, action: .items(.element(id:, action: .view(.profileCellTapped))))))))
received action: XXX.Action.root(.patrons(.home(.profiles(.element(id:, action: .items(.element(id:, action: .delegate(.select))))))))
received action: XXX.Action.root(.patrons(.path(.element(id:, action: .profile(.view(.task))))))

the profile state is appended to the path:

      case let .home(.profiles(.element(_, .items(.element(_, .delegate(.select(profile))))))):
        state.path.append(.profile(profile))
        return .none

when I dismiss the profile... .task is called for each of the Profiles.State to check if Profiles.State needs to be updated:

received action: XXX.Action.root(.patrons(.home(.profiles(.element(id:, action: .view(.task))))))
received action: XXX.Action.root(.patrons(.home(.view(.task))))
received action: XXX.Action.root(.patrons(.path(.popFrom(id:))))
received action: XXX.Action.root(.patrons(.home(.profiles(.element(id:, action: .response(.success))))))
received action: XXX.Action.root(.patrons(.home(.profiles(.element(id:, action: .response(.success))))))
received action: XXX.Action.root(.patrons(.home(.profiles(.element(id:, action: .response(.success))))))
received action: XXX.Action.root(.patrons(.home(.profiles(.element(id:, action: .response(.success))))))
received action: XXX.Action.root(.patrons(.home(.profiles(.element(id:, action: .response(.success))))))
Update NavigationAuthority bound path tried to update multiple times per frame.
received action: XXX.Action.root(.patrons(.home(.profiles(.element(id:, action: .response(.success))))))
received action: XXX.Action.root(.patrons(.home(.profiles(.element(id:, action: .response(.success))))))
received action: XXX.Action.root(.patrons(.home(.profiles(.element(id:, action: .response(.success))))))

Often I will get this error:

<decode: bad range for [%@] got [offs:310 len:1060 within:0]>

I've just noticed that this shows up too:

Update NavigationAuthority bound path tried to update multiple times per frame.

When the decode error happen, the app will navigate right back to the profile. Sometimes it doesn't happen.

The Profiles' task action doesn't do anything with the navigation stack and path. but if I disable it then the bug doesn't happen.

Here is the Profiles' .task:

      case .view(.task):
        guard state.shouldFetchProfiles else { return .none }
        
        if state.taskCancelID == nil {
          state.taskCancelID = self.uuid()
        }
        
        if state.skipFirstTask {
          state.skipFirstTask.toggle()
          return .none
        }
        
        let title = state.title
        logger.info("\(title, privacy: .private): Fetching profiles")
        
        return .run { [id=state.id, request=state.request] send in
          await send(
            .response(
              TaskResult {
                try await self.profiles(request)
              }
            )
          )
        }
        .cancellable(id: state.taskCancelID, cancelInFlight: true)
        .animation()

and the response is handled this way:

      case let .response(.success(response)):
        let target = response.profiles
          .filter { $0.location.name != "" }
          .sorted { $0.updatedTime.seconds > $1.updatedTime.seconds }
          .map { Profile.State(message: $0) }
        
        let stagedChangeset = StagedChangeset(source: state.items.elements, target: target)
        for changeset in stagedChangeset {
          
          if !changeset.elementDeleted.isEmpty {
            let deleteOffsets = IndexSet(changeset.elementDeleted.map { $0.element })
            state.items.remove(atOffsets: deleteOffsets)
          }
          
          if !changeset.elementInserted.isEmpty {
            let insertedPaths = changeset.elementInserted.map(\.element)
            zip(insertedPaths.map { changeset.data[$0] }, insertedPaths)
              .forEach { state.items.insert($0, at: $1) }
          }
          
          if !changeset.elementUpdated.isEmpty {
              changeset.elementUpdated.map(\.element)
                .map { changeset.data[$0] }
                .forEach {
                  guard state.items[id: $0.id] != nil else {
                    let id = $0.id
                    let title = state.title
                    logger.warning("missing \(id, privacy: .private) for \(title) ")
                    return
                  }
                  state.items[id: $0.id]! = $0
                }
            }
        
          if !changeset.elementMoved.isEmpty {
            changeset.elementMoved
              .forEach {
                state.items.move(
                  fromOffsets: IndexSet(integer: $0.element),
                  toOffset: $1.element
                )
              }
          }
        }
        return .none

[mbrandonw]

Hi @zboralski, I'm sorry but none of this is actionable for us without a minimal reproducing project. Also, are you working with @mycroftcanner, the original poster in this discussion? If not, then it might be best to start a new discussion so to not overtake theirs.

[bitsarat]

@mbrandonw I am nervous about adopting TCA in a large scale enterprise app because of reasons like this. It might not be possible to create a minimal project with tough deadlines looming. Also, the issue might not even happen in the minimal project because of the sequence of events in the real app. Can you please advice if TCA is "production ready" (just like everyone said about Swift UI a couple of ears ago :) )?

[mbrandonw]

Hi @bitsarat, I'm sorry you feel that way, but a reproducing project is the minimum required for anyone in the community to take a serious look into the issue. It's respectful to the person who is taking the time out of their day to look into the issue, and (more often than not!) the act of reproducing the problem in a minimal project reveals a simple problem with the code or vanilla SwiftUI, not the library. So we do not think it is that big of an ask for the person reporting a problem to do a bit of upfront work to help out the person looking into the issue.

And we personally feel TCA is certainly as "production ready" as SwiftUI is, and plenty of large scale enterprise apps use TCA in production. Note that even vanilla SwiftUI has plenty of quirks and bugs when it comes to features like navigation, and it is up to us as engineers outside of Apple to work around them. Luckily TCA is built in the open with more transparency, so you don't even need to figure out workarounds. Instead you can contribute fixes directly back to the project so that everyone benefits. This does mean taking the time to distill the problem to something reproducible, though. Otherwise there's no telling if you've found a bug in our library, your own code base, or Swift/SwiftUI.

[zboralski]

@mbrandonw I finally managed to create a minimal repro project and I will email it to you. I have been helping @mycroftcanner with this.

In the repro when the bug is triggered we also get a runtime warning that a store was scoped on a non-main thread. this doesn't happen every time and when I put a breakpoint in the .scope case of the threadCheck... it shows that we are inside com.apple.SwiftUI.AsyncRenderer... I have no idea why this is happening.

[mbrandonw]

Hi @zboralski, glad you could reproduce it, and it would be best to post the project in this discussion rather than email so that others can see it too.

That is a bummer that SwiftUI is accessing the ForEach data on a background thread. I look froward to the project so that I can take a closer look.

[zboralski]

I would have to clean it up a bit more. That project is a mess :) I sent it to support at point free.