[Examples] chore:with-sentry-update-dependencies

[chaiwattsw]

Bug

• Fixes Upgrade with-sentry example to NextJs v12 and sentry-javascript V7  #37870

[balazsorban44]

Could you verify that you have tested this? Since this is a major upgrade, I wonder if the breaking changes should be addressed: https://github.com/getsentry/sentry-javascript/releases/tag/7.0.0

[chaiwattsw]

Could you verify that you have tested this? Since this is a major upgrade, I wonder if the breaking changes should be addressed: https://github.com/getsentry/sentry-javascript/releases/tag/7.0.0

As I read from releases 7.0.0 note there is no affect from this breaking changes to examples/with-sentry since we didn't use BrowerTracing api?

Removed Integrations.BrowserTracing export from @sentry/nextjs. Please import BrowserTracing from @sentry/nextjs directly. from https://github.com/getsentry/sentry-javascript/releases/tag/7.0.0

However this is result of my tests! So first I config my personal SENTRY_DSN from .env.local then use
pnpm build to test production

PS F:\next.js\examples\with-sentry> pnpm build

@ build F:\next.js\examples\with-sentry
next build

info  - Loaded env from F:\next.js\examples\with-sentry\.env.local
info  - Checking validity of types
warn  - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data ..This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason:
    at doAsyncWork (F:\next.js\examples\with-sentry\.next\server\pages\client\test1.js:18:40)
    at Object.5142 (F:\next.js\examples\with-sentry\.next\server\pages\client\test1.js:20:1)
    at __webpack_require__ (F:\next.js\examples\with-sentry\.next\server\webpack-runtime.js:25:42)
    at __webpack_exec__ (F:\next.js\examples\with-sentry\.next\server\pages\client\test1.js:43:39)
    at F:\next.js\examples\with-sentry\.next\server\pages\client\test1.js:44:28
    at Object.<anonymous> (F:\next.js\examples\with-sentry\.next\server\pages\client\test1.js:47:3)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
info  - Collecting page data
[    ] info  - Generating static pages (0/7)This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason:  
Error: Client Test 1
    at doAsyncWork (F:\next.js\examples\with-sentry\.next\server\pages\client\test1.js:18:40)
    at Object.5142 (F:\next.js\examples\with-sentry\.next\server\pages\client\test1.js:20:1)
    at __webpack_require__ (F:\next.js\examples\with-sentry\.next\server\webpack-runtime.js:25:42)
    at __webpack_exec__ (F:\next.js\examples\with-sentry\.next\server\pages\client\test1.js:43:39)
    at F:\next.js\examples\with-sentry\.next\server\pages\client\test1.js:44:28
    at Object.<anonymous> (F:\next.js\examples\with-sentry\.next\server\pages\client\test1.js:47:3)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
info  - Generating static pages (7/7)
info  - Finalizing page optimization

Page                                       Size     First Load JS
┌ ○ /                                      4.06 kB         107 kB
├   /_app                                  0 B             103 kB
├ ○ /404                                   286 B           103 kB
├ λ /api/test1                             0 B             103 kB
├ λ /api/test2                             0 B             103 kB
├ λ /api/test3                             0 B             103 kB
├ λ /api/test4                             0 B             103 kB
├ ○ /client/test1                          285 B           103 kB
├ ○ /client/test2                          312 B           103 kB
├ ○ /client/test3                          305 B           103 kB
├ ○ /client/test4                          577 B           103 kB
├ ○ /client/test5                          425 B           103 kB
├ λ /ssr/test1                             285 B           103 kB
├ λ /ssr/test2                             283 B           103 kB
├ λ /ssr/test3                             285 B           103 kB
└ λ /ssr/test4                             284 B           103 kB
+ First Load JS shared by all              103 kB
  ├ chunks/framework-e7c5d3df9e4c3a47.js   42 kB
  ├ chunks/main-a20af9dac47ec8e8.js        28.6 kB
  ├ chunks/pages/_app-6218892f6a47a9a8.js  31 kB
  └ chunks/webpack-8eba2abae80223bc.js     971 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)

and test with pnpm start
API test

• test1.js https://sentry.io/share/issue/84a927e377de44fba5c803e50b1745fa/
• test2.js https://sentry.io/share/issue/d1efbc2d6388452dad52a98145a9391e/
• test3.js https://sentry.io/share/issue/37d360e44e7f4837ba31df3435742d35/
• test4.js https://sentry.io/share/issue/61fb4f6dfe4d40faa33fa9be22aa9847/

Client test

• test1.js https://sentry.io/share/issue/055516af36e44101995511a531b1b9a6/
• test2.js https://sentry.io/share/issue/4f5b649e0a2c42c598d916578578e621/
• test3.js https://sentry.io/share/issue/a901256e258a48e4abe4380385aebef4/
• test4.js https://sentry.io/share/issue/8b49a3a5dd884fe594c65ed56dcf28c9/
• test5.js https://sentry.io/share/issue/2f07fbd22aec42a2b1adeed68743fa4c/

SSR test

• test1.js https://sentry.io/share/issue/6ddfc8712c424178bda294f95462b310/
• test2.js https://sentry.io/share/issue/3f4d0150a1864f11b5b0fb1dd955588f/
• test3.js https://sentry.io/share/issue/ef9d489f2ed9443fb86069f4a3da020c/
• test4.js https://sentry.io/share/issue/750c5396dc3243ca926ec1aea3654b26/

[chaiwattsw]

Let me know if you need anything else @balazsorban44

[lobsterkatie]

@chaiwattsw - Thanks for doing this! I need to do the package.json bit in #37866. Would you like me to just do the rest while I'm at it, or would you rather keep those changes in this PR? I'm fine with either.

[chaiwattsw]

@chaiwattsw - Thanks for doing this! I need to do the package.json bit in #37866. Would you like me to just do the rest while I'm at it, or would you rather keep those changes in this PR? I'm fine with either.

@lobsterkatie You're welcome! I'm fine with it, Would be better if you do the rest anyway.
So I just need to close this PR right?

[lobsterkatie]

So I just need to close this PR right?

Yes, please.

In porting over your changes, I took a closer look and realized that not all of them actually should come over. As far as next.config.js goes, switching it back to the docs version undoes the change in #28726. (If anything, we might consider making the docs match the example here, rather than vice-versa, though in that case I like the clarity of giving sentryWebpackPluginOptions a name, so will probably leave that one be.) And I'm leaving the note off of tracesSampleRate because we're currently doing some work on improving sampling and the advice may or may not apply anymore after we do. But I'm keeping the typo fix! 🙂