Sentry.init() with @sentry/react@7.93.0 causes application to hang and not render

Question

Sentry.init() with @sentry/react@7.93.0 causes application to hang and not render

TheQueenIsDead opened this issue 2 months ago · comments

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

Clone my repository at this commit
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);

Run cd app && npm ci
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

Actual Result

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

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:

Potentially related issues

getsentry/sentry-javascript#7215

Any help appreciated! Thanks in advance

LucasZF · Answer 1 · Fri Apr 26 2024 19:45:30 GMT+0800 (China Standard Time)

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 · Answer 2 · Sat Apr 27 2024 04:07:14 GMT+0800 (China Standard Time)

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/capacitor@0.15.0
14:06:13.479 | npm ERR! Found: @sentry/react@7.93.0
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/capacitor@0.15.0
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/react@7.81.1
14:06:13.480 | npm ERR! node_modules/@sentry/react
14:06:13.480 | npm ERR!   peerOptional @sentry/react@"7.81.1" from @sentry/capacitor@0.15.0
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 · Answer 3 · Sat May 18 2024 08:11:31 GMT+0800 (China Standard Time)

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 · Answer 4 · Sat May 18 2024 18:27:36 GMT+0800 (China Standard Time)

Not stale :-)

github-actions · Answer 5 · Sun Jun 09 2024 08:13:57 GMT+0800 (China Standard Time)

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 🥀