ionic-team / ionic-team/ionic-framework

bug: angular swipe-back gesture crashes in StackController.startBackTransition when the stack is popped before the gesture is captured

Đang mở Phù hợp với người mới
#31,291 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
triage
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v8.x

### Current Behavior

In production we consistently see this unhandled error coming from the iOS swipe-back gesture (Angular + Capacitor app, `mode: 'ios'`):

```
TypeError: Cannot read properties of undefined (reading 'animationBuilder')
at StackController.startBackTransition (@ionic/angular/fesm2022/ionic-angular-common.mjs)
```

Stack trace (from Sentry, @ionic/angular 8.7.17):

```
node_modules/@ionic/core/components/index3.js (pointerMove)
node_modules/@ionic/core/components/index3.js (tryToCapturePan)
node_modules/@ionic/core/components/index3.js (fireOnStart)
node_modules/@ionic/core/components/ion-router-outlet.js (onStart)
node_modules/@ionic/angular/fesm2022/ionic-angular-common.mjs (StackController.startBackTransition)
const customAnimation = enteringView.animationBuilder;
```

The root cause is a race between `canStart` and `onStart` of the swipe-back gesture:

- `canStart` runs at pointer-down and checks `this.stackCtrl.canGoBack(1) && !this.stackCtrl.hasRunningTask()` (https://github.com/ionic-team/ionic-framework/blob/b716c1cdacdd10a98c03f0c7fe6355182913be1d/packages/angular/common/src/directives/navigation/router-outlet.ts#L104-L108)
- `onStart` runs later, only once the pan gesture passes the capture threshold (pointerMove -> tryToCapturePan -> fireOnStart)

If a navigation pops the stack in that window (for example a programmatic `navCtrl.back()` finishing, a guard redirect, or a route replace), by the time `onStart` fires the stack contains a single view, so in `startBackTransition` `views[views.length - 2]` is `undefined` and the next line throws:

https://github.com/ionic-team/ionic-framework/blob/b716c1cdacdd10a98c03f0c7fe6355182913be1d/packages/angular/common/src/directives/navigation/stack-controller.ts#L180-L185

```ts
startBackTransition(): Promise | Promise {
const leavingView = this.activeView;
if (leavingView) {
const views = this.getStack(leavingView.stackId);
const enteringView = views[views.length - 2]; // undefined when the stack has 1 view
const customAnimation = enteringView.animationBuilder; // TypeError
```

Because it is a narrow timing window it is rare per user (almost always 1 event per user), but at our traffic volume it produces a steady stream of unhandled errors: roughly 200 events from about 200 users in the last 90 days, on both WebKit ("undefined is not an object (evaluating 'enteringView.animationBuilder')") and V8 ("Cannot read properties of undefined") engines. We have been seeing it continuously from Ionic 7 through 8.7.17, and the unguarded line is still present on current `main`.

### Expected Behavior

When the entering view no longer exists at gesture-capture time, the swipe-back should be a no-op (same as when `canStart` returns false), not an unhandled TypeError, e.g.:

```ts
const enteringView = views[views.length - 2];
if (!enteringView) {
return Promise.resolve();
}
```

This would match every other consumer of the stack (`canGoBack`, `pop`, `getLastUrl`), all of which check the stack length before indexing into it.

### Steps to Reproduce

The bug is a race, so it does not reproduce on every attempt, but the window can be hit with the standard Angular starter (blank template plus one pushed page) on an iOS device or simulator:

1. Navigate from page A to page B (stack now has 2 views).
2. Tap a button that calls `navCtrl.back()` (or any navigation that pops/replaces the stack).
3. Immediately, before the back navigation completes, start a left-edge swipe and keep the finger moving.
4. When the pan gesture is captured after the threshold, `onStart` calls `startBackTransition()` on a stack that now has a single view and it throws.

The defect is also visible statically: `startBackTransition` guards `leavingView` but not `enteringView`.

### Code Reproduction URL

No repository; the race is timing-dependent and fully explained by the linked source lines above (standard Angular starter + the steps from "Steps to Reproduce").

### Ionic Info

Ionic:
@ionic/angular: 8.7.17
@ionic/core: 8.7.17
Angular: 20.3.25
Capacitor:
@capacitor/core: 8.3.3
Platforms: iOS and Android (Capacitor WebView, app runs in ios mode)

### Additional Information

_No response_

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Start in packages/angular/common/src/directives/navigation/stack-controller.ts at StackController.startBackTransition, then compare its stack handling with canStart in router-outlet.ts. Verify the single-view case described in the reproduction steps and ensure a swipe captured after the stack is popped becomes a no-op without an exception.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend, mobile-dev
Loại issue
Lỗi
Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức độ hoạt động
Ít trao đổi
Độ rõ ràng
Đặc tả rõ ràng
Mức phù hợp với người mới
86/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.