vercel / next.js

The React Framework
https://nextjs.org
MIT License
126.81k stars 26.95k forks source link

Unhandled Cancel rendering route Error Occur only in IOS webview #47105

Open p-iknow opened 1 year ago

p-iknow commented 1 year ago

Verify canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.6.0: Sun Nov  6 23:31:13 PST 2022; root:xnu-8020.240.14~1/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.16.0
      npm: 8.11.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.2.3
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

no-link

To Reproduce

It's only reproducing in production, and when I try to reproduce it, I can't figure out how to do it.

This webpage is run on ios webview. This error does not occur in Android WebView.

image

Before this error occurs, navigation to the same route occurs multiple times. It is sentry capture

image

In code we don't use NextLink tag, In our code, we don't use the next link tag, we get router from useRouter and use it in the form of router.push.

image

I tried applying e.preventDefault() based on this issue, but it didn't have any effect.

Describe the Bug

Cancel rendering route

image

Expected Behavior

Don't occur this error.

Which browser are you using? (if relevant)

mobile safari 16.0 webview

How are you deploying your application? (if relevant)

No response

package I use

"dependencies": {
    "@banksalad/bpl-web": "15.7.1",
    "@banksalad/idl": "^2023.3.7-173433-e11e18a",
    "@banksalad/js-banksalad": "^13.1.0",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@godaddy/terminus": "^4.11.2",
    "@next/bundle-analyzer": "^13.2.3",
    "@radix-ui/react-slider": "^1.1.0",
    "@react-hookz/web": "^22.0.0",
    "@sentry/nextjs": "^7.41.0",
    "@tanstack/react-query": "^4.26.1",
    "@tanstack/react-query-devtools": "^4.26.1",
    "axios": "^1.3.4",
    "copy-to-clipboard": "^3.3.3",
    "core-js": "^3.29.0",
    "date-fns": "^2.29.3",
    "date-fns-tz": "^2.0.0",
    "humps": "^2.0.1",
    "jsbi": "^4.3.0",
    "lodash": "^4.17.21",
    "next": "^13.2.3",
    "query-string": "^8.1.0",
    "raw-body": "^2.5.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-error-boundary": "^3.1.4",
    "react-intersection-observer": "^9.4.3",
    "react-router-dom": "^6.8.2",
    "react-use": "^17.4.0",
    "recoil": "^0.7.7",
    "remeda": "^1.8.1",
    "rmc-picker": "^5.0.10",
    "semver": "^7.3.8",
    "sharp": "^0.31.3",
    "smoothscroll-polyfill": "0.4.4",
    "vconsole": "^3.15.0"
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "@emotion/babel-preset-css-prop": "^11.10.0",
    "@faker-js/faker": "^7.6.0",
    "@testing-library/dom": "^9.0.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/humps": "^2.0.2",
    "@types/jest": "^29.4.0",
    "@types/jest-plugin-context": "^2.9.5",
    "@types/lodash": "^4.14.191",
    "@types/lodash-es": "^4.17.6",
    "@types/node": "^18.14.6",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@types/react-router-dom": "^5.3.3",
    "@types/semver": "^7.3.13",
    "@types/smoothscroll-polyfill": "0.3.1",
    "@typescript-eslint/eslint-plugin": "^5.54.1",
    "@typescript-eslint/parser": "^5.54.1",
    "babel-jest": "^29.5.0",
    "babel-plugin-direct-import": "^1.0.0",
    "babel-plugin-lodash": "^3.3.4",
    "concurrently": "^7.6.0",
    "eslint": "^8.35.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.7.0",
    "eslint-import-resolver-typescript": "^3.5.3",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "factory.ts": "^1.3.0",
    "jest": "^29.5.0",
    "jest-canvas-mock": "^2.4.0",
    "jest-environment-jsdom": "^29.5.0",
    "jest-plugin-context": "^2.9.0",
    "msw": "1.1.0",
    "prettier": "^2.8.4",
    "string-replace-loader": "^3.1.0",
    "tailwindcss": "^3.2.7",
    "tailwindcss-gradients": "^3.0.0",
    "tailwindcss-pseudo-elements": "^2.0.0",
    "twin.macro": "^3.1.0",
    "typescript": "^4.9.5"
  },
p-iknow commented 1 year ago

@ijjk

I saw that you recently posted a PR about the router, and I didn't know who to tag, so I tagged you based on that PR. Could you please take a look at this issue?

renatoruk commented 1 year ago

Hey @p-iknow , did you find a way to reproduce it or a way to fix it? I'm also seeing the errors in sentry, 100% iPhone, Mac and iPad.

But, I don't have any idea how to reproduce it. I tried it on real device, opening the nextjs webpage via email (and thus implying the webview to open), but I did not get the error.

How do you know it's webview?

ebrahimiaval commented 11 months ago

But I get this error in two ways (in page router - "next": "^13.4.19") screencapture-sentry-learnit-ir-organizations-learnit-on-issues-17018-events-2023-11-21-10_19_06

in IOS routes are nested dynamic Routes. like: /pages/lessons/[lessonId]/[storyId]/[itemId]

but in android web view routes are static! (Some parts of our web app are displayed in the our Android application with web view and these errors are created in this way)

renatoruk commented 9 months ago

@p-iknow Please see this issue https://github.com/vercel/next.js/issues/61152 if it's of any help. I can consistently replicate the error in OSX Safari 16. In iOS Safari 16 the issue can be replicated on the same way, but it's a bit trickier to show the console, that's why I supplied only the steps for OSX in the issue.

If you want to ignore the error for Sentry until it's fixed, you can try with this code. See the comments for replication on iOS.

Sentry.init({
  beforeSend(event, hint) {
    const isNextRouteCancellationError = hint?.originalException?.message === 'Cancel rendering route';

    if (isNextRouteCancellationError) {
      // uncomment line below if you want to verify the bug in iOS without the console
      // alert('route cancel error');
      return null;
    }
    return event;
  }
}};