[JavaScript] Next.js

[matejminar]

[matejminar]

Ben's Notes

https://sentry.rewatch.com/video/esejtf00uv6j4a54-instrumenting-next-js-sdk

[constantinius]

Steps done:

• in Sentry: "Create Project" -> Next.js
• followed instructions on the onboarding for automatic setup (wizard)
  • npx create-next-app@latest
  • npx @sentry/wizard@latest -i nextjs --saas --org dogfooding --project javascript-nextjs
  • npm run dev
  • add <GlobalError error={new Error("This is a test error")} /> to page.tsx
  • http://localhost:3000/ -> Triggers error
  • http://localhost:3000/sentry-example-page -> Click on "Trigger Error"
  • http://localhost:3000/api/sentry-example-api -> Triggers Error
• in Sentry: "Profiles" -> Button "Set Up Profiling"
• in Sentry: "Replays"

Findings:

• using wizard UI to set up:
  • a lot of warnings for deprecated/experimental stuff
  • "fatal" error message when not in a git repository (even if it states it as optional)
  • <GlobalError error={new Error("This is a test error")} /> is not added automatically
  • Unexplained "Hydration Error"
    
• Set up Profiling opens tab with Wizard call, which does not allow me to configure profiling
• Seems like nextjs does not support profiling
• The copy button of this rather long line is hard to see:
  

[HazAT]

Unactionable Error:

We should default ignore any errors trigger by/originating from app:///userscript.html since it comes from a browser extension

ReferenceError: $ is not defined
  at addReviewingPullRequestsHint(app:///userscript.html:16:24)
  at Navigation.<anonymous>(app:///userscript.html:51:2)

same for app:///js/script.js

TypeError: Failed to fetch
  at <anonymous>(./node_modules/@sentry/browser/node_modules/@sentry/core/build/esm/utils-hoist/instrument/fetch.js:75:1)
  at i(app:///js/script.js:1:772)
  at p(app:///js/script.js:1:1092)
  at ? (app:///js/script.js:1:1387)
  at ? (app:///js/script.js:1:1391)

another example:

TypeError: Failed to fetch
  at ? (app:///_next/static/chunks/1298-45ebacbee721baf5.js:19:6380)
  at i(app:///js/script.js:1:772)
  at ? (app:///_next/static/chunks/7921-806c72706ef98f30.js:1:26472)
  at t(app:///_next/static/chunks/4744-4eef31a07d6470a8.js:1:36651)
  at ? (app:///_next/static/chunks/4744-4eef31a07d6470a8.js:1:37042)
  at ? (app:///_next/static/chunks/4744-4eef31a07d6470a8.js:1:40392)
  at r(app:///_next/static/chunks/1298-45ebacbee721baf5.js:19:3898)

TypeError: Load failed
  at i(app:///js/script.js:1:777)
  at p(app:///js/script.js:1:1093)
  at ? (app:///js/script.js:1:1388)
  at global code(app:///js/script.js:1:1391)

What is inpage?
https://github.com/zupreme/Inpage
we should ignore

TypeError: Cannot read properties of null (reading 'type')
  at ui.<anonymous>(app:///inpage.js:259:38987)
  at Generator.next(<anonymous>)
  at se(app:///inpage.js:259:37875)

Kill this garbage error, this comes up often
see: https://docs.google.com/spreadsheets/d/1mRKoBaWU8IDBtgj8lZgZcUJ448gKIRZOAcDoBocNwlc/edit?gid=0#gid=0

TypeError: undefined is not an object (evaluating 'a.K')
  at ? (undefined:45:27)

What and why global code?

ReferenceError: Can't find variable: gmo
  at global code(app:///product/sentry-basics/:1:4)

Failed load, originated from script.js

TypeError: Load failed
  at i(app:///js/script.js:1:777)
  at p(app:///js/script.js:1:1093)
  at w(app:///js/script.js:1:1121)
  at ? (app:///js/script.js:1:1223)
  at ? (app:///_next/static/chunks/1298-45ebacbee721baf5.js:1:14048)
  at o_(app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:82540)
  at o2(app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:91626)
  at o0(app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:91467)
  at o2(app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:91589)
  at o0(app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:91467)
  at o2(app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:91665)
  at o0(app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:91467)
  at o2(app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:91589)
  at o0(app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:91467)
  at o2(app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:91589)
  at o0(app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:91467)
  at o2(app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:91589)
  at o0(app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:91467)
  at o2(app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:91589)
  at o0(app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:91467)
  at o2(app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:94788)
  at o0(app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:91467)
  at o2(app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:94788)
  at o0(app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:91467)
  at o2(app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:94434)
  at ? (app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:124284)
  at up(app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:126022)
  at i9(app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:111133)
  at i8(app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:110455)
  at uD(app:///_next/static/chunks/4bd1b696-18a3d423c1334870.js:1:129762)
  at j(app:///_next/static/chunks/1298-45ebacbee721baf5.js:1:141883)

What is at UtilityScript.<anonymous>??

TypeError: Cannot read properties of null (reading 'shadowRoot')
  at eval(:197:30)
  at eval(<anonymous>)
  at predicate(:197:30)
  at eval(:197:30)
  at next(<anonymous>:4533:27)
  at ? (<anonymous>:4543:7)
  at Object.run(<anonymous>:4587:22)
  at eval(:197:30)
  at UtilityScript.evaluate(<anonymous>:199:17)
  at UtilityScript.<anonymous>(<anonymous>:1:44)

TypeError: Load failed with one frame that originated ??

TypeError: Load failed
  at ? (app:///_next/static/chunks/7586-47157c91ac4116ee.js:1:69414)

[chargome]

Random thoughts:

• nextjs 3rd party script is fixed, looks ugly in product bc origin missing in stackframe (but visible on hover)
  • feat(frames): Display third party urls in stackframes #85877
• we can log in event per stackframe whether is is on a different origin, then in product we can use that information to display content differently e.g. say in debugger maybe you do not want to unminify this
  • probably sync with sebastian on this
    • EDIT: Recommendation was to either leverage the inApp flag (probably not what we want bc we want to differentiate between different origins regardless of inApp)
    • No fundamental doubts on storing e.g. "is_external" on the frame, symbolicator would probably just ignore that
• we can log in the event payload when a stackframe is js in html e.g. to not show the debugger
  • probably sync with sebastian on this
    • Recommendation is to set platform to html instead of js so it will get ignored by symbolicator
• re: TypeError: undefined is not an object
  • we can adapt the inbound filters logic to drop these errors if:
    • there are only stackframes with undefined urls
    • should probably limit this to the error message undefined is not an object
    • feat(core): Default filter unactionable error sentry-javascript#15527
• unminify button shows on 3rd party stack frames – maybe we can default block some providers like plausible?
• re: userscript most likely 3rd party options we could take:
  • always drop
  • group all of them
  • need to check how these stackframes with experimental flag look like
• inpage: most likely from browser extension metamask, we could drop these on the client if the url does not match the current url (but this would mean inpage.js errors would get dropped even if users want to use it direcly)
• maybe we can drop issues containing Lanxin
• set a tag to determine in-app browsers like IG so we gather insights on unactionable errors
• re UtilityScript.: couldn't find any issues with this origin

[shellmayr]

• Created a new project using v0 & added sentry afterwards using the wizard.
• The example page creates two different errors: Sentry Example API Route Error and Sentry Example Frontend Error - why?
• Why does the wizard add so many files? sentry.client.config.ts, sentry.edge.config.ts, sentry.server.config.ts
• The wizard tells me that what the wizard added is deprecated? Why are we even adding it?
• The Sentry issue tells me that I don't have source maps setup, but the Vercel build logs tell me that they were created and sent to Sentry successfully?
• Nextjs wizard seems to not set up source maps for me automatically? I have to run the wizard with the sourcemaps parameter to make it work - seems like this should work out of the box?
• I get an error Error Multiple Sentry Session Replay instances are not supported - happens because I had both instrumentation-client.ts AND sentry.client.config.ts in my repo, but both were added by the wizard?
• Now that I removed sentry.client.config.ts, I still don't have sourcemaps? Experience: This is very frustrating.