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.

Sign up for GitHub

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

Jump to bottom

Sentry.init() with @sentry/[email protected] causes application to hang and not render #634

Closed
TheQueenIsDead opened this issue Apr 26, 2024 · 5 comments
Closed

Sentry.init() with @sentry/[email protected] causes application to hang and not render #634

TheQueenIsDead opened this issue Apr 26, 2024 · 5 comments
Labels
Package: react Platform: Capacitor Status: Stale

Comments

@TheQueenIsDead
Copy link

TheQueenIsDead commented Apr 26, 2024 •
edited
Loading

Environment

I have loaded my app in a vite dev server, as well as deploying a preview app using a prod build (web) and have had the same bug in Chrome (124.0.6367.91) and Firefox (125.0.2).

I am using ionic with capacitor, backed by react and vite in typescript. The dependecies are as follows, and the package.json at the time of writing this bug can be found on a feature branch of a side-project I'm developing:
https://github.com/TheQueenIsDead/loot-logger/tree/4e66af464d53f43f5ca0a6283d15a603630d77be

package.json

  "dependencies": {
    "@capacitor/core": "5.7.4",
    "@ionic/react": "^7.0.0",
    "@ionic/react-router": "^7.0.0",
    "@sentry/capacitor": "^0.17.0",
    "@sentry/react": "7.93.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "^5.3.4",
    "react-router-dom": "^5.3.4",
  },
  "devDependencies": {
    "@capacitor/cli": "5.7.4",
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^4.0.1",
    "typescript": "^5.1.6",
    "vite": "^5.0.0",
    "vitest": "^0.34.6"
  },

Steps to Reproduce

  1. Clone my repository at this commit
  2. Note that the app/src/main.tsx file has the following contents:
import * as Sentry from "@sentry/capacitor";
import * as SentryReact from "@sentry/react";
import {BrowserTracing} from "@sentry/react";

Sentry.init({
  dsn: "https://8fe32e4624f58f6e753fe034b5022d81@o4507146805772288.ingest.de.sentry.io/4507146808655952",
  // release: "",
  // dist: "",
  tracesSampleRate: 1,
  integrations: [ new BrowserTracing() ],
  debug: true
}, SentryReact.init);
  1. Run cd app && npm ci
  2. Run a vite dev server with npm run dev

Expected Result

The main login page would render in sub-second time. This screenshot was generated after commenting out the sentry and sentry-react imports, as well as the init
image

Actual Result

The sentry debug logs look ok, nothing renders immediately, some components pop up after waiting 30s or so.
image

Here's a Firefox performance capture of the long delay in page load, it seems to indicate that there's deep recursion of some sort when calling visit:
image

Potentially related issues

Any help appreciated! Thanks in advance
TheQueenIsDead added a commit to TheQueenIsDead/loot-logger that referenced this issue Apr 26, 2024
@TheQueenIsDead
deps: downgrade @sentry/capacitor to 0.15.0 and @sentry/react to 7.81…
684634d 
….1 to mitigate bug

 - ref: getsentry/sentry-capacitor#634
@lucas-zimerman
Copy link
Collaborator

Hi @TheQueenIsDead and thank you for the repro!, we'll investigate this and give you an awnser shortly!
By the way, is version 0.15.0 working well for you?

@TheQueenIsDead
Copy link
Author

Thanks for the speedy response! Interestingly I tried downgrading, and managed to get my dev instance working, but I think I had mismatched packages versions between capcitor and react, such that my project couldn't build via CI

<html><body>
<!--StartFragment--><pre class="c_ku c_bv c_jc c_np c_ja c_jb c_dd c_lb c_rd c_re c_rf c_fo c_fp c_qr c_bx c_rg">
14:06:11.530 | Installing project dependencies: npm clean-install --progress=false
-- | --
14:06:13.476 | npm ERR! code ERESOLVE
14:06:13.478 | npm ERR! ERESOLVE could not resolve
14:06:13.478 | npm ERR!
14:06:13.479 | npm ERR! While resolving: @sentry/[email protected]
14:06:13.479 | npm ERR! Found: @sentry/[email protected]
14:06:13.479 | npm ERR! node_modules/@sentry/react
14:06:13.479 | npm ERR!   @sentry/react@"7.93.0" from the root project
14:06:13.479 | npm ERR!
14:06:13.479 | npm ERR! Could not resolve dependency:
14:06:13.480 | npm ERR! peerOptional @sentry/react@"7.81.1" from @sentry/[email protected]
14:06:13.480 | npm ERR! node_modules/@sentry/capacitor
14:06:13.480 | npm ERR!   @sentry/capacitor@"0.15.0" from the root project
14:06:13.480 | npm ERR!
14:06:13.480 | npm ERR! Conflicting peer dependency: @sentry/[email protected]
14:06:13.480 | npm ERR! node_modules/@sentry/react
14:06:13.480 | npm ERR!   peerOptional @sentry/react@"7.81.1" from @sentry/[email protected]
14:06:13.481 | npm ERR!   node_modules/@sentry/capacitor
14:06:13.481 | npm ERR!     @sentry/capacitor@"0.15.0" from the root project
14:06:13.481 | npm ERR!
14:06:13.481 | npm ERR! Fix the upstream dependency conflict, or retry
14:06:13.481 | npm ERR! this command with --force or --legacy-peer-deps
14:06:13.482 | npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

</pre><!--EndFragment-->
</body>
</html>

I think this was due to me not changing the react version to the exact peer dependency version specified by capacitor, however it did allow my project to build momentarily after vite hot-reloaded my dev server.

I haven't quite been able to figure out exactly what was in my node_modules folder (or loaded via the browser) at the time when it did work 😅

Commiting 0.15.0 and the proper peer dependency version yielded the same inability to load unfortunately

@github-actions GitHub Actions
Copy link
Contributor

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

@TheQueenIsDead
Copy link
Author

Not stale :-)

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jun 9, 2024

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Jun 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Package: react Platform: Capacitor Status: Stale
Projects
Mobile & Cross Platform SDK
Archived in project
Milestone
No milestone
Development

No branches or pull requests
2 participants
@lucas-zimerman @TheQueenIsDead