From b577082c99e8ad75656ae32317030c8d2cd9d5cc Mon Sep 17 00:00:00 2001 From: Philipp Hofmann Date: Thu, 8 Aug 2024 14:35:20 +0200 Subject: [PATCH 01/13] feat(apple): beforeCaptureScreenshot callback (#10913) Adds docs for the beforeCaptureScreenshot callback for the Cocoa SDK; see https://github.com/getsentry/sentry-cocoa/pull/4210. We have to wait until we release Cocoa 8.33.0 to merge this. --- .../attach-viewhierarchy/apple.mdx | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/platform-includes/enriching-events/attach-viewhierarchy/apple.mdx b/platform-includes/enriching-events/attach-viewhierarchy/apple.mdx index b54552ed51e67..308c004975de2 100644 --- a/platform-includes/enriching-events/attach-viewhierarchy/apple.mdx +++ b/platform-includes/enriching-events/attach-viewhierarchy/apple.mdx @@ -13,3 +13,38 @@ SentrySDK.start { options in options.attachViewHierarchy = YES; }]; ``` + +### Customize View Hierarchy Capturing + + + +Requires Cocoa SDK version `8.33.0` or higher. + + + + +The `beforeCaptureViewHierarchy` also allows you to customize the behavior based on event data, so you can decide when to capture a view hierarchy and when not to. The callback doesn't work for crash events. + +```swift {tabTitle:Swift} +import Sentry + +SentrySDK.start { options in + options.dsn = "___PUBLIC_DSN___" + options.beforeCaptureViewHierarchy = { event in + // Return false to not capture a view hierarchy for the event. + return false + } +} +``` + +```objc {tabTitle:Objective-C} +@import Sentry; + +[SentrySDK startWithConfigureOptions:^(SentryOptions *options) { + options.dsn = @"___PUBLIC_DSN___"; + options.beforeCaptureViewHierarchy = ^BOOL(SentryEvent * _Nonnull event) { + // Return NO to not capture a view hierarchy for the event. + return NO; + }; +}]; +``` From e40d52068f1e3355bef93003ea24384dbe318a9b Mon Sep 17 00:00:00 2001 From: Philipp Hofmann Date: Thu, 8 Aug 2024 14:36:03 +0200 Subject: [PATCH 02/13] fix(apple): Mention not creating TTID/TTFD spans (#10960) Explain why the SDK doesn't create TTID/TTFD spans when the app is in the background. Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com> --- .../instrumentation/automatic-instrumentation.mdx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/docs/platforms/apple/common/tracing/instrumentation/automatic-instrumentation.mdx b/docs/platforms/apple/common/tracing/instrumentation/automatic-instrumentation.mdx index b42c6af7c7fc3..b18262c58b342 100644 --- a/docs/platforms/apple/common/tracing/instrumentation/automatic-instrumentation.mdx +++ b/docs/platforms/apple/common/tracing/instrumentation/automatic-instrumentation.mdx @@ -335,16 +335,14 @@ This feature is available starting in SDK version `8.4.0`. -By adding a span for a view controller when it's loaded, time to initial display (TTID) provides insight into how long it takes for your view controller to launch and draw its first UI frame. The SDK sets the span operation to `ui.load.initial-display` and the span description to the view controllers's name, followed by `initial display` - for example, `MainViewController initial display`. +By adding a span for a view controller when it's loaded, time to initial display (TTID) provides insight into how long it takes for your view controller to launch and draw its first UI frame. The SDK sets the span operation to `ui.load.initial-display` and the span description to the view controller's name, followed by `initial display` - for example, `MainViewController initial display`. -The span starts when the view of a view controller is loaded, and there is no other view controller transaction happening at the moment. - -The span finishes after the view appeared on the screen. - -The following chart shows how time to initial display (TTID) and [time to full display (TTFD)](#time-to-full-display) correlate to transitions between activities: +The span starts when the view of a view controller is loaded, and there is no other view controller transaction happening at the moment. The span finishes after the view appeared on the screen. The following chart shows how time to initial display (TTID) and [time to full display (TTFD)](#time-to-full-display) correlate to transitions between activities: ![](./img/ttid-ttfd-concept.png) +Since Cocoa SDK version 8.33.0, the SDK doesn't create time to initial display (TTID) and [time to full display (TTFD)](#time-to-full-display) spans for UIViewControllers presented in the background because the logic requires UI frames to be drawn. + ## Time to Full Display @@ -353,9 +351,10 @@ This feature is available starting in SDK version `8.4.0`. -By adding a span for a view controller when it's loaded, time to full display (TTFD) provides insight into how long it takes your view controller to launch and load all of its content. The SDK sets the span operation to `ui.load.full-display` and the span description to the view controllers' name, followed by `full display` - for example, `MainActivity full display`. +By adding a span for a view controller when it's loaded, time to full display (TTFD) provides insight into how long it takes your view controller to launch and load all of its content. The span starts when the view of a view controller is loaded, and there is no other view controller transaction happening at the moment. The SDK sets the span operation to `ui.load.full-display` and the span description to the view controllers' name, followed by `full display` - for example, `MainActivity full display`. + +Since Cocoa SDK version 8.33.0, the SDK doesn't create [time to initial display (TTID)](#time-to-initial-display) and time to full display (TTFD) spans for UIViewControllers presented in the background, because the logic requires UI frames to be drawn. -The span starts when the view of a view controller is loaded, and there is no other view controller transaction happening at the moment. _Time to full display is disabled by default, but you can enable it by setting:_ From 7531031c90fe90c27279300b67521a8415a66ed4 Mon Sep 17 00:00:00 2001 From: Philipp Hofmann Date: Thu, 8 Aug 2024 14:36:24 +0200 Subject: [PATCH 03/13] feat: Apple troubleshooting for missing mach info (#11017) Add a troubleshooting entry for missing mach info that was fixed in 8.33.0 Co-authored-by: Karl Heinz Struggl --- docs/platforms/apple/common/troubleshooting/index.mdx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/platforms/apple/common/troubleshooting/index.mdx b/docs/platforms/apple/common/troubleshooting/index.mdx index 5ce53178683f2..4d663d28aafdc 100644 --- a/docs/platforms/apple/common/troubleshooting/index.mdx +++ b/docs/platforms/apple/common/troubleshooting/index.mdx @@ -132,3 +132,9 @@ You can also try switching to Sentry-Dynamic when integrating the Cocoa SDK via If you compile your project with Xcode 15.4 and none of the above works, [Apple staff on the Apple forum](https://forums.developer.apple.com/forums/thread/751573) say it is due to a bug in Xcode 15.4. They recommend sticking to Xcode 15.3 until Apple fixes this bug in a future Xcode release. + +## Release Health Misses Unhandled Events and Missing Mach Info + +If the release health page shows fewer events in the unhandled tab, your events miss the unhandled property or mach info; please update the Cocoa SDK to version 8.33.0 or above or stay on version 8.29.1. + +We introduced a bug with a refactoring [#4101](https://github.com/getsentry/sentry-cocoa/pull/4101) released in 8.30.1, that caused unhandled/crash events to have the unhandled property and mach info missing, which is required for release health to show events in the unhandled tab. It's essential to mention that this bug doesn't impact release health statistics, such as crash-free session or user rates. From 22d1c67f89d0b52de8a58ed929ca02d6071cd085 Mon Sep 17 00:00:00 2001 From: Dhiogo Brustolin Date: Thu, 8 Aug 2024 15:07:49 +0200 Subject: [PATCH 04/13] Update index.mdx (#10946) --- docs/platforms/apple/guides/ios/session-replay/index.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/platforms/apple/guides/ios/session-replay/index.mdx b/docs/platforms/apple/guides/ios/session-replay/index.mdx index 3e82a13a9419d..33431f33cd5e3 100644 --- a/docs/platforms/apple/guides/ios/session-replay/index.mdx +++ b/docs/platforms/apple/guides/ios/session-replay/index.mdx @@ -46,7 +46,7 @@ SentrySDK.start(configureOptions: { options in options.debug = true // Currently under experimental options: - options.experimental.sessionReplay.errorSampleRate = 1.0 + options.experimental.sessionReplay.onErrorSampleRate = 1.0 options.experimental.sessionReplay.sessionSampleRate = 1.0 }) ``` @@ -57,7 +57,7 @@ SentrySDK.start(configureOptions: { options in While you're testing, we recommend that you set `sessionSampleRate` to `1.0`. This ensures that every user session will be sent to Sentry. -Once testing is complete, **we recommend lowering this value in production**. We still recommend keeping `errorSampleRate` set to `1.0`. +Once testing is complete, **we recommend lowering this value in production**. We still recommend keeping `onErrorSampleRate` set to `1.0`. ## Sampling @@ -65,12 +65,12 @@ Sampling allows you to control how much of your website's traffic will result in 1. `sessionSampleRate` - The sample rate for replays that begin recording immediately and last the entirety of the user's session. -2. `errorSampleRate` - The sample rate for +2. `onErrorSampleRate` - The sample rate for replays that are recorded when an error happens. This type of replay will record up to a minute of events prior to the error and continue recording until the session ends. -Sampling begins as soon as a session starts. `sessionSampleRate` is evaluated first. If it's sampled, the replay recording will begin. Otherwise, `errorSampleRate` is evaluated and if it's sampled, the integration will begin buffering the replay and will only upload it to Sentry if an error occurs. The remainder of the replay will behave similarly to a whole-session replay. +Sampling begins as soon as a session starts. `sessionSampleRate` is evaluated first. If it's sampled, the replay recording will begin. Otherwise, `onErrorSampleRate` is evaluated and if it's sampled, the integration will begin buffering the replay and will only upload it to Sentry if an error occurs. The remainder of the replay will behave similarly to a whole-session replay. ## Privacy From 83fac1e40286887717d1a9c3bdf626a9dda0eada Mon Sep 17 00:00:00 2001 From: vivianyentran <20403606+vivianyentran@users.noreply.github.com> Date: Thu, 8 Aug 2024 09:19:02 -0700 Subject: [PATCH 05/13] add redirects (#11025) * add redirects * fix link * fix link * move redirects up --- src/middleware.ts | 44 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/src/middleware.ts b/src/middleware.ts index ae74ea47982f4..c9bea6186f2dd 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -3261,6 +3261,50 @@ const USER_DOCS_REDIRECTS: Redirect[] = [ from: '/platforms/javascript/guides/aws-lambda/layer/', to: '/platforms/javascript/guides/aws-lambda/install/', }, + { + from: '/api/projects/post-project-service-hooks/', + to: '/api/projects/register-a-new-service-hook/', + }, + { + from: '/clients/cocoa/', + to: '/platforms/apple/', + }, + { + from: '/clients/react-native/', + to: 'platforms/react-native/', + }, + { + from: '/learn/scopes/?platform=rust/', + to: '/platforms/rust/enriching-events/scopes/', + }, + { + from: '/platforms/android/android-video/', + to: '/platforms/android/', + }, + { + from: '/platforms/android/tracing/included-instrumentation/', + to: '/platforms/android/tracing/instrumentation/automatic-instrumentation', + }, + { + from: '/platforms/javascript/guides/cordova/tracing/trace-propagation/', + to: '/platforms/javascript/guides/cordova/tracing/instrumentation/custom-instrumentation/', + }, + { + from: '/platforms/javascript/pluggable-integrations/', + to: '/platforms/javascript/configuration/integrations/#lazy-loading-integrations', + }, + { + from: '/platforms/react-native/tracing/included-instrumentation/', + to: '/platforms/react-native/tracing/instrumentation/automatic-instrumentation/', + }, + { + from: '/platforms/rust/env_logger/index.html/', + to: '/platforms/rust/configuration/environments/', + }, + { + from: '/clients/cordova/', + to: '/platforms/javascript/guides/cordova/', + }, ]; const DEVELOPER_DOCS_REDIRECTS: Redirect[] = [ From 319729985a605a8097da13aaef41e6c7c545f1e4 Mon Sep 17 00:00:00 2001 From: Sentry Release Bot <75840458+getsentry-release@users.noreply.github.com> Date: Thu, 8 Aug 2024 10:48:35 -0700 Subject: [PATCH 06/13] Bump API schema to a1a35b46 (#11032) Co-authored-by: openapi-getsentry-bot --- src/build/resolveOpenAPI.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/build/resolveOpenAPI.ts b/src/build/resolveOpenAPI.ts index 209d248904475..eb562bb4d2cf8 100644 --- a/src/build/resolveOpenAPI.ts +++ b/src/build/resolveOpenAPI.ts @@ -8,7 +8,7 @@ import {DeRefedOpenAPI} from './open-api/types'; // SENTRY_API_SCHEMA_SHA is used in the sentry-docs GHA workflow in getsentry/sentry-api-schema. // DO NOT change variable name unless you change it in the sentry-docs GHA workflow in getsentry/sentry-api-schema. -const SENTRY_API_SCHEMA_SHA = 'f80055709f72b5c74ad7aea69e098e972063b7f2'; +const SENTRY_API_SCHEMA_SHA = 'a1a35b46e181b3cbe42c4913874f32246b56f7cf'; const activeEnv = process.env.GATSBY_ENV || process.env.NODE_ENV || 'development'; From cc10f251f2e045bd5408422a04ed07a569afd7f9 Mon Sep 17 00:00:00 2001 From: Karl Heinz Struggl Date: Thu, 8 Aug 2024 11:25:14 -0700 Subject: [PATCH 07/13] fix(cocoa): Last good SDK version before release info issue (#11033) --- docs/platforms/apple/common/troubleshooting/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/apple/common/troubleshooting/index.mdx b/docs/platforms/apple/common/troubleshooting/index.mdx index 4d663d28aafdc..bc1ecd700f72a 100644 --- a/docs/platforms/apple/common/troubleshooting/index.mdx +++ b/docs/platforms/apple/common/troubleshooting/index.mdx @@ -135,6 +135,6 @@ say it is due to a bug in Xcode 15.4. They recommend sticking to Xcode 15.3 unti ## Release Health Misses Unhandled Events and Missing Mach Info -If the release health page shows fewer events in the unhandled tab, your events miss the unhandled property or mach info; please update the Cocoa SDK to version 8.33.0 or above or stay on version 8.29.1. +If the release health page shows fewer events in the unhandled tab, your events miss the unhandled property or mach info; please update the Cocoa SDK to version 8.33.0 or above or stay on version 8.30.0. We introduced a bug with a refactoring [#4101](https://github.com/getsentry/sentry-cocoa/pull/4101) released in 8.30.1, that caused unhandled/crash events to have the unhandled property and mach info missing, which is required for release health to show events in the unhandled tab. It's essential to mention that this bug doesn't impact release health statistics, such as crash-free session or user rates. From c252486d1aa4488c059ff4b84a3ba38b93f94117 Mon Sep 17 00:00:00 2001 From: Kobby-Bawuah <89524511+Kobby-Bawuah@users.noreply.github.com> Date: Thu, 8 Aug 2024 17:14:28 -0400 Subject: [PATCH 08/13] Update index.mdx (#11035) * Update index.mdx Updating the Okta SSO docs to reflect the new workflow * Update docs/organization/authentication/sso/okta-sso/index.mdx --------- Co-authored-by: Liza Mock --- docs/organization/authentication/sso/okta-sso/index.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/organization/authentication/sso/okta-sso/index.mdx b/docs/organization/authentication/sso/okta-sso/index.mdx index 42cedb71eefc0..43b23df169b23 100644 --- a/docs/organization/authentication/sso/okta-sso/index.mdx +++ b/docs/organization/authentication/sso/okta-sso/index.mdx @@ -16,7 +16,7 @@ If you change your organization slug, you'll need to make the same update in the 1. From the admin console's sidebar, click **Applications > Applications**, then click on "Browse App Catalog" (or "Add Application" for the old interface). -1. Search for `Sentry`, then click "Add" to be brought to the setup wizard. +1. Search for `Sentry`, then click "Add Integration" to be brought to the setup wizard. ![Sentry in Okta Gallery of Integrations](./img/okta-gallery.png) @@ -34,7 +34,7 @@ If you change your organization slug, you'll need to make the same update in the 1. Click "Save" to create the Sentry app. -1. Click "Sign On" to the app settings page to which you are redirected. When the settings displayed in Step 5 appear, select "View Setup Instructions" in the bright yellow card to open a new tab. +1. When you're redirected to the app settings page, click "Sign On". 1. Copy the "Metadata URL" in the set up instructions. From 71fefd0a898a0294bb97d5bab9f928b7e04591af Mon Sep 17 00:00:00 2001 From: Sentry Release Bot <75840458+getsentry-release@users.noreply.github.com> Date: Thu, 8 Aug 2024 14:16:07 -0700 Subject: [PATCH 09/13] Bump API schema to 456f25aa (#11036) Co-authored-by: openapi-getsentry-bot --- src/build/resolveOpenAPI.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/build/resolveOpenAPI.ts b/src/build/resolveOpenAPI.ts index eb562bb4d2cf8..a76cd731a0b10 100644 --- a/src/build/resolveOpenAPI.ts +++ b/src/build/resolveOpenAPI.ts @@ -8,7 +8,7 @@ import {DeRefedOpenAPI} from './open-api/types'; // SENTRY_API_SCHEMA_SHA is used in the sentry-docs GHA workflow in getsentry/sentry-api-schema. // DO NOT change variable name unless you change it in the sentry-docs GHA workflow in getsentry/sentry-api-schema. -const SENTRY_API_SCHEMA_SHA = 'a1a35b46e181b3cbe42c4913874f32246b56f7cf'; +const SENTRY_API_SCHEMA_SHA = '456f25aa56742ccf5d48d4250b5b3ec647a8df18'; const activeEnv = process.env.GATSBY_ENV || process.env.NODE_ENV || 'development'; From 450cdfb974bf925cd8925ca19a0915698e59a003 Mon Sep 17 00:00:00 2001 From: Sigrid Huemer <32902192+s1gr1d@users.noreply.github.com> Date: Fri, 9 Aug 2024 10:30:28 +0200 Subject: [PATCH 10/13] docs(nuxt): Add Nuxt docs for manual setup (#10981) * docs(nuxt): Add Nuxt docs for manual setup * review changes * add sourcemaps snippets * review comments * update platform icons * [getsentry/action-github-commit] Auto commit * add otel docs --------- Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com> --- .../common/best-practices/web-workers.mdx | 1 + .../application-not-responding.mdx | 1 + .../common/configuration/integrations/anr.mdx | 1 + .../configuration/integrations/console.mdx | 1 + .../configuration/integrations/graphql.mdx | 1 + .../configuration/integrations/http.mdx | 1 + .../integrations/localvariables.mdx | 1 + .../configuration/integrations/modules.mdx | 1 + .../configuration/integrations/mongo.mdx | 1 + .../configuration/integrations/mongoose.mdx | 1 + .../configuration/integrations/mysql.mdx | 1 + .../configuration/integrations/mysql2.mdx | 1 + .../integrations/nodecontext.mdx | 1 + .../configuration/integrations/nodefetch.mdx | 1 + .../integrations/nodeprofiling.mdx | 1 + .../integrations/onuncaughtexception.mdx | 1 + .../configuration/integrations/postgres.mdx | 1 + .../configuration/integrations/prisma.mdx | 1 + .../configuration/integrations/redis.mdx | 1 + .../integrations/requestdata.mdx | 1 + .../configuration/integrations/trpc.mdx | 1 + .../integrations/unhandledrejection.mdx | 1 + .../integrations/wintercgfetch.mdx | 1 + .../common/configuration/tree-shaking.mdx | 6 +- .../javascript/common/crons/index.mdx | 1 + .../common/crons/troubleshooting.mdx | 1 + docs/platforms/javascript/common/index.mdx | 4 +- .../javascript/common/install/index.mdx | 1 + .../javascript/common/install/loader.mdx | 1 + .../javascript/common/install/npm.mdx | 1 + .../common/opentelemetry/custom-setup.mdx | 1 + .../javascript/common/opentelemetry/index.mdx | 1 + .../using-opentelemetry-apis.mdx | 1 + .../common/sourcemaps/uploading/cli.mdx | 1 + .../common/sourcemaps/uploading/index.mdx | 1 + .../custom-instrumentation/caches-module.mdx | 1 + .../custom-instrumentation/queues-module.mdx | 1 + .../javascript/guides/nuxt/config.yml | 6 ++ package.json | 4 +- .../capture-error/javascript.angular.mdx | 2 +- .../capture-error/javascript.cordova.mdx | 2 +- .../capture-error/javascript.ember.mdx | 2 +- .../capture-error/javascript.gatsby.mdx | 2 +- .../capture-error/javascript.mdx | 2 +- .../capture-error/javascript.nextjs.mdx | 2 +- .../capture-error/javascript.nuxt.mdx | 11 ++++ .../capture-error/javascript.react.mdx | 2 +- .../capture-error/javascript.sveltekit.mdx | 2 +- .../capture-error/javascript.vue.mdx | 2 +- .../integrations/javascript.nuxt.mdx | 64 +++++++++++++++++++ .../how-to-use/javascript.nuxt.mdx | 9 +++ .../import/javascript.nuxt.mdx | 3 + .../javascript.nuxt.mdx | 64 +++++++++++++++++++ .../javascript.nuxt.mdx | 11 ++++ .../javascript.nuxt.mdx | 4 ++ .../javascript.nuxt.mdx | 26 ++++++++ .../javascript.nuxt.mdx | 14 ++++ .../configure-sample-rate/javascript.nuxt.mdx | 15 +++++ .../javascript.nuxt.mdx | 1 + .../sourcemaps/overview/javascript.nuxt.mdx | 0 .../sourcemaps/primer/javascript.nuxt.mdx | 3 + src/components/platformIcon.tsx | 7 ++ yarn.lock | 8 +-- 63 files changed, 293 insertions(+), 20 deletions(-) create mode 100644 docs/platforms/javascript/guides/nuxt/config.yml create mode 100644 platform-includes/capture-error/javascript.nuxt.mdx create mode 100644 platform-includes/configuration/integrations/javascript.nuxt.mdx create mode 100644 platform-includes/distributed-tracing/how-to-use/javascript.nuxt.mdx create mode 100644 platform-includes/enriching-events/import/javascript.nuxt.mdx create mode 100644 platform-includes/getting-started-config/javascript.nuxt.mdx create mode 100644 platform-includes/getting-started-install/javascript.nuxt.mdx create mode 100644 platform-includes/getting-started-primer/javascript.nuxt.mdx create mode 100644 platform-includes/getting-started-sourcemaps/javascript.nuxt.mdx create mode 100644 platform-includes/getting-started-verify/javascript.nuxt.mdx create mode 100644 platform-includes/performance/configure-sample-rate/javascript.nuxt.mdx create mode 100644 platform-includes/performance/enable-automatic-instrumentation/javascript.nuxt.mdx create mode 100644 platform-includes/sourcemaps/overview/javascript.nuxt.mdx create mode 100644 platform-includes/sourcemaps/primer/javascript.nuxt.mdx diff --git a/docs/platforms/javascript/common/best-practices/web-workers.mdx b/docs/platforms/javascript/common/best-practices/web-workers.mdx index 12c67b18e4c03..68fd393e67da5 100644 --- a/docs/platforms/javascript/common/best-practices/web-workers.mdx +++ b/docs/platforms/javascript/common/best-practices/web-workers.mdx @@ -12,6 +12,7 @@ notSupported: - javascript.ember - javascript.gatsby - javascript.nextjs + - javascript.nuxt - javascript.react - javascript.vue - javascript.wasm diff --git a/docs/platforms/javascript/common/configuration/application-not-responding.mdx b/docs/platforms/javascript/common/configuration/application-not-responding.mdx index 210872d0d6371..ac2abed17f41b 100644 --- a/docs/platforms/javascript/common/configuration/application-not-responding.mdx +++ b/docs/platforms/javascript/common/configuration/application-not-responding.mdx @@ -15,6 +15,7 @@ supported: - javascript.nestjs - javascript.electron - javascript.nextjs + - javascript.nuxt - javascript.sveltekit - javascript.remix - javascript.astro diff --git a/docs/platforms/javascript/common/configuration/integrations/anr.mdx b/docs/platforms/javascript/common/configuration/integrations/anr.mdx index 2d4d705fbb551..a1ecb7e040ae0 100644 --- a/docs/platforms/javascript/common/configuration/integrations/anr.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/anr.mdx @@ -14,6 +14,7 @@ supported: - javascript.nestjs - javascript.electron - javascript.nextjs + - javascript.nuxt - javascript.sveltekit - javascript.remix - javascript.astro diff --git a/docs/platforms/javascript/common/configuration/integrations/console.mdx b/docs/platforms/javascript/common/configuration/integrations/console.mdx index fcb18ee6f3dc5..005a16cfa04fc 100644 --- a/docs/platforms/javascript/common/configuration/integrations/console.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/console.mdx @@ -14,6 +14,7 @@ supported: - javascript.nestjs - javascript.electron - javascript.nextjs + - javascript.nuxt - javascript.sveltekit - javascript.remix - javascript.astro diff --git a/docs/platforms/javascript/common/configuration/integrations/graphql.mdx b/docs/platforms/javascript/common/configuration/integrations/graphql.mdx index fee2b541cb0cb..46ebb01996a5d 100644 --- a/docs/platforms/javascript/common/configuration/integrations/graphql.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/graphql.mdx @@ -14,6 +14,7 @@ supported: - javascript.nestjs - javascript.electron - javascript.nextjs + - javascript.nuxt - javascript.sveltekit - javascript.remix - javascript.astro diff --git a/docs/platforms/javascript/common/configuration/integrations/http.mdx b/docs/platforms/javascript/common/configuration/integrations/http.mdx index 18c36bdc6858a..df4db8c6ba7bd 100644 --- a/docs/platforms/javascript/common/configuration/integrations/http.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/http.mdx @@ -14,6 +14,7 @@ supported: - javascript.nestjs - javascript.electron - javascript.nextjs + - javascript.nuxt - javascript.sveltekit - javascript.remix - javascript.astro diff --git a/docs/platforms/javascript/common/configuration/integrations/localvariables.mdx b/docs/platforms/javascript/common/configuration/integrations/localvariables.mdx index 4eda4ebef9ae1..785fa4876bafe 100644 --- a/docs/platforms/javascript/common/configuration/integrations/localvariables.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/localvariables.mdx @@ -14,6 +14,7 @@ supported: - javascript.nestjs - javascript.electron - javascript.nextjs + - javascript.nuxt - javascript.sveltekit - javascript.remix - javascript.astro diff --git a/docs/platforms/javascript/common/configuration/integrations/modules.mdx b/docs/platforms/javascript/common/configuration/integrations/modules.mdx index f1c5a1323d2a2..db4d298c103b0 100644 --- a/docs/platforms/javascript/common/configuration/integrations/modules.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/modules.mdx @@ -14,6 +14,7 @@ supported: - javascript.nestjs - javascript.electron - javascript.nextjs + - javascript.nuxt - javascript.sveltekit - javascript.remix - javascript.astro diff --git a/docs/platforms/javascript/common/configuration/integrations/mongo.mdx b/docs/platforms/javascript/common/configuration/integrations/mongo.mdx index 7f9b9cec3d893..6a0372a195aa2 100644 --- a/docs/platforms/javascript/common/configuration/integrations/mongo.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/mongo.mdx @@ -14,6 +14,7 @@ supported: - javascript.nestjs - javascript.electron - javascript.nextjs + - javascript.nuxt - javascript.sveltekit - javascript.remix - javascript.astro diff --git a/docs/platforms/javascript/common/configuration/integrations/mongoose.mdx b/docs/platforms/javascript/common/configuration/integrations/mongoose.mdx index 3df9c7f6c9f75..a5ebd577dfd8f 100644 --- a/docs/platforms/javascript/common/configuration/integrations/mongoose.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/mongoose.mdx @@ -14,6 +14,7 @@ supported: - javascript.nestjs - javascript.electron - javascript.nextjs + - javascript.nuxt - javascript.sveltekit - javascript.remix - javascript.astro diff --git a/docs/platforms/javascript/common/configuration/integrations/mysql.mdx b/docs/platforms/javascript/common/configuration/integrations/mysql.mdx index 2a24fe6aeef3a..d93f52af10b26 100644 --- a/docs/platforms/javascript/common/configuration/integrations/mysql.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/mysql.mdx @@ -14,6 +14,7 @@ supported: - javascript.nestjs - javascript.electron - javascript.nextjs + - javascript.nuxt - javascript.sveltekit - javascript.remix - javascript.astro diff --git a/docs/platforms/javascript/common/configuration/integrations/mysql2.mdx b/docs/platforms/javascript/common/configuration/integrations/mysql2.mdx index 0822fd4beee72..dd233c594ad98 100644 --- a/docs/platforms/javascript/common/configuration/integrations/mysql2.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/mysql2.mdx @@ -14,6 +14,7 @@ supported: - javascript.nestjs - javascript.electron - javascript.nextjs + - javascript.nuxt - javascript.sveltekit - javascript.remix - javascript.astro diff --git a/docs/platforms/javascript/common/configuration/integrations/nodecontext.mdx b/docs/platforms/javascript/common/configuration/integrations/nodecontext.mdx index 6c49e7d8a7b76..398bc0068acd7 100644 --- a/docs/platforms/javascript/common/configuration/integrations/nodecontext.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/nodecontext.mdx @@ -14,6 +14,7 @@ supported: - javascript.nestjs - javascript.electron - javascript.nextjs + - javascript.nuxt - javascript.sveltekit - javascript.remix - javascript.astro diff --git a/docs/platforms/javascript/common/configuration/integrations/nodefetch.mdx b/docs/platforms/javascript/common/configuration/integrations/nodefetch.mdx index e8235cd8f2e34..3fc39ab40da21 100644 --- a/docs/platforms/javascript/common/configuration/integrations/nodefetch.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/nodefetch.mdx @@ -14,6 +14,7 @@ supported: - javascript.nestjs - javascript.electron - javascript.nextjs + - javascript.nuxt - javascript.sveltekit - javascript.remix - javascript.astro diff --git a/docs/platforms/javascript/common/configuration/integrations/nodeprofiling.mdx b/docs/platforms/javascript/common/configuration/integrations/nodeprofiling.mdx index 009359f999105..60936f7c19601 100644 --- a/docs/platforms/javascript/common/configuration/integrations/nodeprofiling.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/nodeprofiling.mdx @@ -14,6 +14,7 @@ supported: - javascript.nestjs - javascript.electron - javascript.nextjs + - javascript.nuxt - javascript.sveltekit - javascript.remix - javascript.astro diff --git a/docs/platforms/javascript/common/configuration/integrations/onuncaughtexception.mdx b/docs/platforms/javascript/common/configuration/integrations/onuncaughtexception.mdx index 584f9763ef72c..f3b323b13d8eb 100644 --- a/docs/platforms/javascript/common/configuration/integrations/onuncaughtexception.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/onuncaughtexception.mdx @@ -14,6 +14,7 @@ supported: - javascript.nestjs - javascript.electron - javascript.nextjs + - javascript.nuxt - javascript.sveltekit - javascript.remix - javascript.astro diff --git a/docs/platforms/javascript/common/configuration/integrations/postgres.mdx b/docs/platforms/javascript/common/configuration/integrations/postgres.mdx index 5450fa5b02fcb..a628427496054 100644 --- a/docs/platforms/javascript/common/configuration/integrations/postgres.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/postgres.mdx @@ -14,6 +14,7 @@ supported: - javascript.nestjs - javascript.electron - javascript.nextjs + - javascript.nuxt - javascript.sveltekit - javascript.remix - javascript.astro diff --git a/docs/platforms/javascript/common/configuration/integrations/prisma.mdx b/docs/platforms/javascript/common/configuration/integrations/prisma.mdx index 4022bff1c0242..4771783859f40 100644 --- a/docs/platforms/javascript/common/configuration/integrations/prisma.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/prisma.mdx @@ -13,6 +13,7 @@ supported: - javascript.koa - javascript.nestjs - javascript.nextjs + - javascript.nuxt - javascript.sveltekit - javascript.remix - javascript.astro diff --git a/docs/platforms/javascript/common/configuration/integrations/redis.mdx b/docs/platforms/javascript/common/configuration/integrations/redis.mdx index 4ea609cbf5616..1025ea324a3b0 100644 --- a/docs/platforms/javascript/common/configuration/integrations/redis.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/redis.mdx @@ -14,6 +14,7 @@ supported: - javascript.nestjs - javascript.electron - javascript.nextjs + - javascript.nuxt - javascript.sveltekit - javascript.remix - javascript.astro diff --git a/docs/platforms/javascript/common/configuration/integrations/requestdata.mdx b/docs/platforms/javascript/common/configuration/integrations/requestdata.mdx index 9c6ce80d87f84..538d76b24fefb 100644 --- a/docs/platforms/javascript/common/configuration/integrations/requestdata.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/requestdata.mdx @@ -15,6 +15,7 @@ supported: - javascript.koa - javascript.nestjs - javascript.nextjs + - javascript.nuxt - javascript.sveltekit - javascript.remix - javascript.astro diff --git a/docs/platforms/javascript/common/configuration/integrations/trpc.mdx b/docs/platforms/javascript/common/configuration/integrations/trpc.mdx index c95bbef648349..5c65937802d8c 100644 --- a/docs/platforms/javascript/common/configuration/integrations/trpc.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/trpc.mdx @@ -14,6 +14,7 @@ supported: - javascript.nestjs - javascript.electron - javascript.nextjs + - javascript.nuxt - javascript.sveltekit - javascript.remix - javascript.astro diff --git a/docs/platforms/javascript/common/configuration/integrations/unhandledrejection.mdx b/docs/platforms/javascript/common/configuration/integrations/unhandledrejection.mdx index e38c66fa38a5e..84ee7f802f82a 100644 --- a/docs/platforms/javascript/common/configuration/integrations/unhandledrejection.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/unhandledrejection.mdx @@ -14,6 +14,7 @@ supported: - javascript.nestjs - javascript.electron - javascript.nextjs + - javascript.nuxt - javascript.sveltekit - javascript.remix - javascript.astro diff --git a/docs/platforms/javascript/common/configuration/integrations/wintercgfetch.mdx b/docs/platforms/javascript/common/configuration/integrations/wintercgfetch.mdx index e543ae62760b3..f79d743f51704 100644 --- a/docs/platforms/javascript/common/configuration/integrations/wintercgfetch.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/wintercgfetch.mdx @@ -3,6 +3,7 @@ title: WinterCGFetch description: "Creates spans and attaches tracing headers to fetch requests on edge runtimes. (default)" supported: - javascript.nextjs + - javascript.nuxt --- diff --git a/docs/platforms/javascript/common/configuration/tree-shaking.mdx b/docs/platforms/javascript/common/configuration/tree-shaking.mdx index c3cfef31cf449..ad1af3f9e846c 100644 --- a/docs/platforms/javascript/common/configuration/tree-shaking.mdx +++ b/docs/platforms/javascript/common/configuration/tree-shaking.mdx @@ -27,7 +27,7 @@ The Sentry SDK ships with code that is not strictly required for it to collect y you use certain features. - + ### Tree Shaking With Sentry Bundler Plugins @@ -144,7 +144,7 @@ Replacing this flag with `true` will tree shake any SDK code that's related to t - + ### Tree Shaking With Webpack @@ -191,7 +191,7 @@ module.exports = { - + ### Tree Shaking With Rollup diff --git a/docs/platforms/javascript/common/crons/index.mdx b/docs/platforms/javascript/common/crons/index.mdx index 364c2e19d405b..81da413d1a958 100644 --- a/docs/platforms/javascript/common/crons/index.mdx +++ b/docs/platforms/javascript/common/crons/index.mdx @@ -19,6 +19,7 @@ supported: - javascript.hapi - javascript.koa - javascript.nestjs + - javascript.nuxt --- Once implemented, it'll allow you to get alerts and metrics to help you solve errors, detect timeouts, and prevent disruptions to your service. diff --git a/docs/platforms/javascript/common/crons/troubleshooting.mdx b/docs/platforms/javascript/common/crons/troubleshooting.mdx index 0a82042828496..bd0fe2a75331a 100644 --- a/docs/platforms/javascript/common/crons/troubleshooting.mdx +++ b/docs/platforms/javascript/common/crons/troubleshooting.mdx @@ -19,6 +19,7 @@ supported: - javascript.hapi - javascript.koa - javascript.nestjs + - javascript.nuxt --- diff --git a/docs/platforms/javascript/common/index.mdx b/docs/platforms/javascript/common/index.mdx index 9b0120e0aa104..067c5d7745b13 100644 --- a/docs/platforms/javascript/common/index.mdx +++ b/docs/platforms/javascript/common/index.mdx @@ -43,7 +43,7 @@ If you prefer to follow video instructions, see [How to Install the Sentry Next. - + ## Features @@ -63,7 +63,7 @@ Select which Sentry features you'd like to install in addition to Error Monitori - + In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also collect and analyze performance profiles from real users with [profiling](/product/explore/profiling/). diff --git a/docs/platforms/javascript/common/install/index.mdx b/docs/platforms/javascript/common/install/index.mdx index 360af3c8c6efb..d1ad800fb5d0d 100644 --- a/docs/platforms/javascript/common/install/index.mdx +++ b/docs/platforms/javascript/common/install/index.mdx @@ -13,6 +13,7 @@ notSupported: - javascript.ember - javascript.gatsby - javascript.nextjs + - javascript.nuxt - javascript.react - javascript.vue - javascript.wasm diff --git a/docs/platforms/javascript/common/install/loader.mdx b/docs/platforms/javascript/common/install/loader.mdx index 157bf8f2e59a7..f334c7cc6d6df 100644 --- a/docs/platforms/javascript/common/install/loader.mdx +++ b/docs/platforms/javascript/common/install/loader.mdx @@ -13,6 +13,7 @@ notSupported: - javascript.ember - javascript.gatsby - javascript.nextjs + - javascript.nuxt - javascript.react - javascript.vue - javascript.wasm diff --git a/docs/platforms/javascript/common/install/npm.mdx b/docs/platforms/javascript/common/install/npm.mdx index 116a6929610cb..c4eb9d6678e73 100644 --- a/docs/platforms/javascript/common/install/npm.mdx +++ b/docs/platforms/javascript/common/install/npm.mdx @@ -13,6 +13,7 @@ notSupported: - javascript.ember - javascript.gatsby - javascript.nextjs + - javascript.nuxt - javascript.react - javascript.vue - javascript.wasm diff --git a/docs/platforms/javascript/common/opentelemetry/custom-setup.mdx b/docs/platforms/javascript/common/opentelemetry/custom-setup.mdx index c959e51987f02..e5f30b1a50d71 100644 --- a/docs/platforms/javascript/common/opentelemetry/custom-setup.mdx +++ b/docs/platforms/javascript/common/opentelemetry/custom-setup.mdx @@ -13,6 +13,7 @@ supported: - javascript.hapi - javascript.koa - javascript.nestjs + - javascript.nuxt - javascript.sveltekit - javascript.astro - javascript.remix diff --git a/docs/platforms/javascript/common/opentelemetry/index.mdx b/docs/platforms/javascript/common/opentelemetry/index.mdx index ee78e5ea25b44..97e7ab51821a8 100644 --- a/docs/platforms/javascript/common/opentelemetry/index.mdx +++ b/docs/platforms/javascript/common/opentelemetry/index.mdx @@ -14,6 +14,7 @@ supported: - javascript.hapi - javascript.koa - javascript.nestjs + - javascript.nuxt - javascript.sveltekit - javascript.astro - javascript.remix diff --git a/docs/platforms/javascript/common/opentelemetry/using-opentelemetry-apis.mdx b/docs/platforms/javascript/common/opentelemetry/using-opentelemetry-apis.mdx index fd53abddbc808..86349d4c5f2db 100644 --- a/docs/platforms/javascript/common/opentelemetry/using-opentelemetry-apis.mdx +++ b/docs/platforms/javascript/common/opentelemetry/using-opentelemetry-apis.mdx @@ -13,6 +13,7 @@ supported: - javascript.hapi - javascript.koa - javascript.nestjs + - javascript.nuxt - javascript.sveltekit - javascript.astro - javascript.remix diff --git a/docs/platforms/javascript/common/sourcemaps/uploading/cli.mdx b/docs/platforms/javascript/common/sourcemaps/uploading/cli.mdx index 957542b3ba031..fe7d301b7296e 100644 --- a/docs/platforms/javascript/common/sourcemaps/uploading/cli.mdx +++ b/docs/platforms/javascript/common/sourcemaps/uploading/cli.mdx @@ -7,6 +7,7 @@ notSupported: - javascript.remix - javascript.sveltekit - javascript.astro + - javascript.nuxt --- In this guide, you'll learn how to successfully upload source maps using our `sentry-cli` tool. diff --git a/docs/platforms/javascript/common/sourcemaps/uploading/index.mdx b/docs/platforms/javascript/common/sourcemaps/uploading/index.mdx index f30963cf31e37..3c25c12860b1a 100644 --- a/docs/platforms/javascript/common/sourcemaps/uploading/index.mdx +++ b/docs/platforms/javascript/common/sourcemaps/uploading/index.mdx @@ -7,6 +7,7 @@ notSupported: - javascript.remix - javascript.sveltekit - javascript.astro + - javascript.nuxt --- diff --git a/docs/platforms/javascript/common/tracing/instrumentation/custom-instrumentation/caches-module.mdx b/docs/platforms/javascript/common/tracing/instrumentation/custom-instrumentation/caches-module.mdx index 451e7ec1102e6..1ce90e4068bde 100644 --- a/docs/platforms/javascript/common/tracing/instrumentation/custom-instrumentation/caches-module.mdx +++ b/docs/platforms/javascript/common/tracing/instrumentation/custom-instrumentation/caches-module.mdx @@ -16,6 +16,7 @@ supported: - javascript.bun - javascript.deno - javascript.nextjs + - javascript.nuxt - javascript.astro - javascript.sveltekit - javascript.remix diff --git a/docs/platforms/javascript/common/tracing/instrumentation/custom-instrumentation/queues-module.mdx b/docs/platforms/javascript/common/tracing/instrumentation/custom-instrumentation/queues-module.mdx index b22146bac0870..99d48549e1aeb 100644 --- a/docs/platforms/javascript/common/tracing/instrumentation/custom-instrumentation/queues-module.mdx +++ b/docs/platforms/javascript/common/tracing/instrumentation/custom-instrumentation/queues-module.mdx @@ -16,6 +16,7 @@ supported: - javascript.bun - javascript.deno - javascript.nextjs + - javascript.nuxt - javascript.astro - javascript.sveltekit - javascript.remix diff --git a/docs/platforms/javascript/guides/nuxt/config.yml b/docs/platforms/javascript/guides/nuxt/config.yml new file mode 100644 index 0000000000000..e55b63f7ffaf4 --- /dev/null +++ b/docs/platforms/javascript/guides/nuxt/config.yml @@ -0,0 +1,6 @@ +title: Nuxt +description: Nuxt is a framework for full-stack web apps and websites. Learn how to set it up with Sentry. +sdk: sentry.javascript.nuxt +categories: + - browser + - server diff --git a/package.json b/package.json index 6b7af0368a0fd..9d9f2484f4ec2 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,7 @@ "next-mdx-remote": "^4.4.1", "nextjs-toploader": "^1.6.6", "parse-numeric-range": "^1.3.0", - "platformicons": "^5.10.9", + "platformicons": "^6.0.2", "prism-sentry": "^1.0.2", "prismjs": "^1.27.0", "query-string": "^6.13.1", @@ -134,4 +134,4 @@ "node": "20.11.0", "yarn": "1.22.21" } -} \ No newline at end of file +} diff --git a/platform-includes/capture-error/javascript.angular.mdx b/platform-includes/capture-error/javascript.angular.mdx index db42656796879..0e711c0c2e0c0 100644 --- a/platform-includes/capture-error/javascript.angular.mdx +++ b/platform-includes/capture-error/javascript.angular.mdx @@ -1,4 +1,4 @@ -You can pass an `Error` object to `captureException()` to get it captured as event. It's also possible to pass non-`Error` objects and strings, but be aware that the resulting events in Sentry may be missing a stack trace. +You can pass an `Error` object to `captureException()` to get it captured as an event. It's also possible to pass non-`Error` objects and strings, but be aware that the resulting events in Sentry may be missing a stack trace. ```typescript {filename:some.component.ts} {1,6} import * as Sentry from "@sentry/angular"; diff --git a/platform-includes/capture-error/javascript.cordova.mdx b/platform-includes/capture-error/javascript.cordova.mdx index ccb591425c7ce..ee41b1c9438a8 100644 --- a/platform-includes/capture-error/javascript.cordova.mdx +++ b/platform-includes/capture-error/javascript.cordova.mdx @@ -1,4 +1,4 @@ -You can pass an `Error` object to `captureException()` to get it captured as event. It's also possible to pass non-`Error` objects and strings, but be aware that the resulting events in Sentry may be missing a stack trace. +You can pass an `Error` object to `captureException()` to get it captured as an event. It's also possible to pass non-`Error` objects and strings, but be aware that the resulting events in Sentry may be missing a stack trace. ```javascript import * as Sentry from "sentry-cordova"; diff --git a/platform-includes/capture-error/javascript.ember.mdx b/platform-includes/capture-error/javascript.ember.mdx index d2d56ea733353..30124c2eac074 100644 --- a/platform-includes/capture-error/javascript.ember.mdx +++ b/platform-includes/capture-error/javascript.ember.mdx @@ -1,4 +1,4 @@ -You can pass an `Error` object to `captureException()` to get it captured as event. It's also possible to pass non-`Error` objects and strings, but be aware that the resulting events in Sentry may be missing a stack trace. +You can pass an `Error` object to `captureException()` to get it captured as an event. It's also possible to pass non-`Error` objects and strings, but be aware that the resulting events in Sentry may be missing a stack trace. ```javascript import * as Sentry from "@sentry/ember"; diff --git a/platform-includes/capture-error/javascript.gatsby.mdx b/platform-includes/capture-error/javascript.gatsby.mdx index c3657875fc80e..be09998ee6f54 100644 --- a/platform-includes/capture-error/javascript.gatsby.mdx +++ b/platform-includes/capture-error/javascript.gatsby.mdx @@ -1,4 +1,4 @@ -You can pass an `Error` object to `captureException()` to get it captured as event. It's also possible to pass non-`Error` objects and strings, but be aware that the resulting events in Sentry may be missing a stack trace. +You can pass an `Error` object to `captureException()` to get it captured as an event. It's also possible to pass non-`Error` objects and strings, but be aware that the resulting events in Sentry may be missing a stack trace. ```javascript import * as Sentry from "@sentry/gatsby"; diff --git a/platform-includes/capture-error/javascript.mdx b/platform-includes/capture-error/javascript.mdx index 75c67e5384691..61943b6fcebaf 100644 --- a/platform-includes/capture-error/javascript.mdx +++ b/platform-includes/capture-error/javascript.mdx @@ -1,4 +1,4 @@ -You can pass an `Error` object to `captureException()` to get it captured as event. It's also possible to pass non-`Error` objects and strings, but be aware that the resulting events in Sentry may be missing a stack trace. +You can pass an `Error` object to `captureException()` to get it captured as an event. It's also possible to pass non-`Error` objects and strings, but be aware that the resulting events in Sentry may be missing a stack trace. ```javascript import * as Sentry from "@sentry/browser"; diff --git a/platform-includes/capture-error/javascript.nextjs.mdx b/platform-includes/capture-error/javascript.nextjs.mdx index d12e226db743c..bd719fc8f9266 100644 --- a/platform-includes/capture-error/javascript.nextjs.mdx +++ b/platform-includes/capture-error/javascript.nextjs.mdx @@ -1,4 +1,4 @@ -You can pass an `Error` object to `captureException()` to get it captured as event. It's also possible to pass non-`Error` objects and strings, but be aware that the resulting events in Sentry may be missing a stack trace. +You can pass an `Error` object to `captureException()` to get it captured as an event. It's also possible to pass non-`Error` objects and strings, but be aware that the resulting events in Sentry may be missing a stack trace. ```javascript import * as Sentry from "@sentry/nextjs"; diff --git a/platform-includes/capture-error/javascript.nuxt.mdx b/platform-includes/capture-error/javascript.nuxt.mdx new file mode 100644 index 0000000000000..aaabafe0727df --- /dev/null +++ b/platform-includes/capture-error/javascript.nuxt.mdx @@ -0,0 +1,11 @@ +You can pass an `Error` object to `captureException()` to get it captured as an event. It's also possible to pass non-`Error` objects and strings, but be aware that the resulting events in Sentry may be missing a stack trace. + +```javascript +import * as Sentry from "@sentry/nuxt"; + +try { + aFunctionThatMightFail(); +} catch (err) { + Sentry.captureException(err); +} +``` diff --git a/platform-includes/capture-error/javascript.react.mdx b/platform-includes/capture-error/javascript.react.mdx index 1029d8fecfd2d..a8ba6c1803a6f 100644 --- a/platform-includes/capture-error/javascript.react.mdx +++ b/platform-includes/capture-error/javascript.react.mdx @@ -1,6 +1,6 @@ By including and configuring Sentry, our React SDK automatically attaches global handlers to _capture_ uncaught exceptions and unhandled promise rejections, as described in the official ECMAScript 6 standard. You can disable this default behavior by changing the `onunhandledrejection` option to `false` in your GlobalHandlers integration and manually hook into each event handler, then call `Sentry.captureException` or `Sentry.captureMessage` directly. -You can pass an `Error` object to `captureException()` to get it captured as event. It's also possible to pass non-`Error` objects and strings, but be aware that the resulting events in Sentry may be missing a stack trace. +You can pass an `Error` object to `captureException()` to get it captured as an event. It's also possible to pass non-`Error` objects and strings, but be aware that the resulting events in Sentry may be missing a stack trace. ```javascript import * as Sentry from "@sentry/react"; diff --git a/platform-includes/capture-error/javascript.sveltekit.mdx b/platform-includes/capture-error/javascript.sveltekit.mdx index d7c694ac7d63f..7661bc56ea571 100644 --- a/platform-includes/capture-error/javascript.sveltekit.mdx +++ b/platform-includes/capture-error/javascript.sveltekit.mdx @@ -1,4 +1,4 @@ -You can pass an `Error` object to `captureException()` to get it captured as event. It's also possible to pass non-`Error` objects and strings, but be aware that the resulting events in Sentry may be missing a stack trace. +You can pass an `Error` object to `captureException()` to get it captured as an event. It's also possible to pass non-`Error` objects and strings, but be aware that the resulting events in Sentry may be missing a stack trace. ```javascript import * as Sentry from "@sentry/sveltekit"; diff --git a/platform-includes/capture-error/javascript.vue.mdx b/platform-includes/capture-error/javascript.vue.mdx index 240288c114e5c..875d29d6c32ad 100644 --- a/platform-includes/capture-error/javascript.vue.mdx +++ b/platform-includes/capture-error/javascript.vue.mdx @@ -1,4 +1,4 @@ -You can pass an `Error` object to `captureException()` to get it captured as event. It's also possible to pass non-`Error` objects and strings, but be aware that the resulting events in Sentry may be missing a stack trace. +You can pass an `Error` object to `captureException()` to get it captured as an event. It's also possible to pass non-`Error` objects and strings, but be aware that the resulting events in Sentry may be missing a stack trace. ```javascript import * as Sentry from "@sentry/vue"; diff --git a/platform-includes/configuration/integrations/javascript.nuxt.mdx b/platform-includes/configuration/integrations/javascript.nuxt.mdx new file mode 100644 index 0000000000000..0a07fbc21519a --- /dev/null +++ b/platform-includes/configuration/integrations/javascript.nuxt.mdx @@ -0,0 +1,64 @@ +The Nuxt SDK initializes the SDK in two runtimes: Browser and Node.js. +However, it's important to note that not all integrations are compatible with all of these runtimes. + +Depending on whether an integration enhances the functionality of a particular runtime, such as the `BrowserTracing` integration for the browser runtime or the `RequestData` integration for the Node.js runtime, you can only include these integrations in their respective configuration files: + +- For the browser runtime integrations, add integrations to `Sentry.init` in `sentry.client.config.(js|ts)` +- For the Node.js runtime integrations, add integrations to `Sentry.init` in `public/instrument.server.mjs` + +### Common Integrations + +| | **Auto Enabled** | **Errors** | **Performance** | **Additional Context** | +| --------------------------------------------------- | :--------------: | :--------: | :-------------: | :--------------------: | +| [`dedupeIntegration`](./dedupe) | ✓ | ✓ | | | +| [`functionToStringIntegration`](./functiontostring) | ✓ | | | | +| [`inboundFiltersIntegration`](./inboundfilters) | ✓ | ✓ | | | +| [`linkedErrorsIntegration`](./linkederrors) | ✓ | ✓ | | | +| [`captureConsoleIntegration`](./captureconsole) | | | | ✓ | +| [`debugIntegration`](./debug) | | | | | +| [`extraErrorDataIntegration`](./extraerrordata) | | | | ✓ | +| [`rewriteFramesIntegration`](./rewriteframes) | | ✓ | | | +| [`sessionTimingIntegration`](./sessiontiming) | | | | ✓ | + +### Browser Integrations + +| | **Auto Enabled** | **Errors** | **Performance** | **Replay** | **Additional Context** | +| ----------------------------------------------------- | :--------------: | :--------: | :-------------: | :--------: | :--------------------: | +| [`breadcrumbsIntegration`](./breadcrumbs) | ✓ | | | | ✓ | +| [`browserApiErrorsIntegration`](./browserapierrors) | ✓ | ✓ | | | | +| [`browserTracingIntegration`](./browsertracing) | ✓ | | ✓ | | ✓ | +| [`globalHandlersIntegration`](./globalhandlers) | ✓ | ✓ | | | | +| [`httpContextIntegration`](./httpcontext) | ✓ | | | | ✓ | +| [`browserProfilingIntegration`](./browserprofiling) | | | ✓ | | | +| [`contextLinesIntegration`](./contextlines) | | ✓ | | | | +| [`httpClientIntegration`](./httpclient) | | ✓ | | | | +| [`moduleMetadataIntegration`](./modulemetadata) | | | | | ✓ | +| [`replayIntegration`](./replay) | | | | ✓ | ✓ | +| [`replayCanvasIntegration`](./replaycanvas) | | | | ✓ | | +| [`reportingObserverIntegration`](./reportingobserver) | | ✓ | | | | + +### Node.js Integrations + +| | **Auto Enabled** | **Errors** | **Performance** | **Additional Context** | +| --------------------------------------------------------- | :--------------: | :--------: | :-------------: | :--------------------: | +| [`consoleIntegration`](./console) | ✓ | | | ✓ | +| [`contextLinesIntegration`](./contextlines) | ✓ | ✓ | | | +| [`httpIntegration`](./http) | ✓ | ✓ | ✓ | ✓ | +| [`graphqlIntegration`](./graphql) | ✓ | | ✓ | | +| [`modulesIntegration`](./modules) | ✓ | | | ✓ | +| [`mongoIntegration`](./mongo) | ✓ | | ✓ | | +| [`mongooseIntegration`](./mongoose) | ✓ | | ✓ | | +| [`mysqlIntegration`](./mysql) | ✓ | | ✓ | | +| [`mysql2Integration`](./mysql2) | ✓ | | ✓ | | +| [`nodeContextIntegration`](./nodecontext) | ✓ | | | ✓ | +| [`nativeNodeFetchIntegration`](./nodefetch) | ✓ | | ✓ | ✓ | +| [`onUncaughtExceptionIntegration`](./onuncaughtexception) | ✓ | ✓ | | | +| [`onUnhandledRejectionIntegration`](./unhandledrejection) | ✓ | ✓ | | | +| [`postgresIntegration`](./postgres) | ✓ | | ✓ | | +| [`prismaIntegration`](./prisma) | | | ✓ | | +| [`redisIntegration`](./redis) | ✓ | | ✓ | | +| [`requestDataIntegration`](./requestdata) | ✓ | | ✓ | | +| [`anrIntegration`](./anr) | | ✓ | | | +| [`localVariablesIntegration`](./localvariables) | | ✓ | | | +| [`nodeProfilingIntegration`](./nodeprofiling) | | | ✓ | | +| [`trpcMiddleware`](./trpc) | | ✓ | ✓ | ✓ | diff --git a/platform-includes/distributed-tracing/how-to-use/javascript.nuxt.mdx b/platform-includes/distributed-tracing/how-to-use/javascript.nuxt.mdx new file mode 100644 index 0000000000000..396bdc6ec280d --- /dev/null +++ b/platform-includes/distributed-tracing/how-to-use/javascript.nuxt.mdx @@ -0,0 +1,9 @@ +If you're using the current version of our Nuxt SDK, distributed tracing will work out of the box for the client and server runtimes. To get around possible [Browser CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) issues, you should define `tracePropagationTargets` for client-side. + +```javascript {filename:sentry.client.config.(js|ts)} +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [Sentry.browserTracingIntegration()], + tracePropagationTargets: ["https://myproject.org", /^\/api\//], +}); +``` diff --git a/platform-includes/enriching-events/import/javascript.nuxt.mdx b/platform-includes/enriching-events/import/javascript.nuxt.mdx new file mode 100644 index 0000000000000..30ef3ccbe7450 --- /dev/null +++ b/platform-includes/enriching-events/import/javascript.nuxt.mdx @@ -0,0 +1,3 @@ +```javascript +import * as Sentry from "@sentry/nuxt"; +``` diff --git a/platform-includes/getting-started-config/javascript.nuxt.mdx b/platform-includes/getting-started-config/javascript.nuxt.mdx new file mode 100644 index 0000000000000..29a59a8140a71 --- /dev/null +++ b/platform-includes/getting-started-config/javascript.nuxt.mdx @@ -0,0 +1,64 @@ +To set up the Sentry SDK, register the Sentry Nuxt module and initialize the SDK for client and server. At build time, the Sentry Nuxt Module looks for the following two files: + +- Client-Side: `sentry.client.config.(js|ts)` in the root containing `Sentry.init` +- Server-Side: `instrument.server.mjs` in the `public` directory containing `Sentry.init` + +In these files, you can specify the full range of Sentry SDK options. + + +### Nuxt Module Setup + +Add the Sentry Nuxt Module to your `nuxt.config.ts` file: + +```javascript {filename:nuxt.config.ts} +export default defineNuxtConfig({ + modules: ["@sentry/nuxt/module"] +}); +``` + +Adding this module enables the Sentry SDK in your Nuxt application. The Sentry Nuxt Module will then automatically look for the Sentry configuration files and initialize the SDK accordingly. + + +### Client-side Setup + +Add a `sentry.client.config.(js|ts)` file to the root of your project (this is probably the same level as the `package.json`). In this file, import and initialize Sentry, specifying any SDK options for the client: + + + +```javascript {filename:sentry.client.config.(js|ts)} +import * as Sentry from '@sentry/nuxt'; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + // We recommend adjusting this value in production, or using tracesSampler + // for finer control + tracesSampleRate: 1.0 +}); +``` + +### Server-side Setup + +1. Add an `instrument.server.mjs` file to your `public` folder. In this file, import and initialize Sentry, specifying any SDK options for the server: + + + +```javascript {filename:public/instrument.server.mjs} +import * as Sentry from '@sentry/nuxt'; + +Sentry.init({ + dsn: "___PUBLIC_DSN___" +}); +``` + +2. Add an `--import` flag to the `NODE_OPTIONS` environment variable wherever you run your application. +For local previews, update your `nuxt preview` script in the `package.json` (see below). +Also, ensure this environment variable is set in your deployment environment, such as on Netlify or Vercel. + +```json {filename:package.json} +{ + "scripts": { + "preview": "NODE_OPTIONS='--import ./public/instrument.server.mjs' nuxt preview" + } +} +``` diff --git a/platform-includes/getting-started-install/javascript.nuxt.mdx b/platform-includes/getting-started-install/javascript.nuxt.mdx new file mode 100644 index 0000000000000..de177fd16822d --- /dev/null +++ b/platform-includes/getting-started-install/javascript.nuxt.mdx @@ -0,0 +1,11 @@ +```bash {tabTitle:npm} +npm install @sentry/nuxt --save +``` + +```bash {tabTitle:yarn} +yarn add @sentry/nuxt +``` + +```bash {tabTitle:pnpm} +pnpm add @sentry/nuxt +``` diff --git a/platform-includes/getting-started-primer/javascript.nuxt.mdx b/platform-includes/getting-started-primer/javascript.nuxt.mdx new file mode 100644 index 0000000000000..fa793c6a02b4b --- /dev/null +++ b/platform-includes/getting-started-primer/javascript.nuxt.mdx @@ -0,0 +1,4 @@ + + This SDK is considered **experimental and in an alpha state**. It may experience breaking changes. Please reach out on + [GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have any feedback or concerns. + diff --git a/platform-includes/getting-started-sourcemaps/javascript.nuxt.mdx b/platform-includes/getting-started-sourcemaps/javascript.nuxt.mdx new file mode 100644 index 0000000000000..0ae7f5defe102 --- /dev/null +++ b/platform-includes/getting-started-sourcemaps/javascript.nuxt.mdx @@ -0,0 +1,26 @@ +## Add Readable Stack Traces to Errors + +The Sentry Nuxt Module uses the [Sentry Vite Plugin](https://www.npmjs.com/package/@sentry/vite-plugin) to upload source maps for both server and client builds. +This means that when you run a production build (`nuxt build`), source maps will be generated and uploaded to Sentry, so that you get readable stack traces in your Sentry issues. + +To upload source maps, specify your Sentry auth token as well as your org and project slugs. Set them in the `sourceMapsUploadOptions` option +inside the `sentry` options of your `nuxt.config.ts`. + + + The module options inside `sentry` are only affecting the **build-time** of the SDK. + + + + +```javascript {filename:nuxt.config.ts} {3-9} +export default defineNuxtConfig({ + modules: ["@sentry/nuxt/module"], + sentry: { + sourceMapsUploadOptions: { + org: "___ORG_SLUG___", + project: "___PROJECT_SLUG___", + authToken: "___ORG_AUTH_TOKEN___" + } + } +}); +``` diff --git a/platform-includes/getting-started-verify/javascript.nuxt.mdx b/platform-includes/getting-started-verify/javascript.nuxt.mdx new file mode 100644 index 0000000000000..86fc0459d9484 --- /dev/null +++ b/platform-includes/getting-started-verify/javascript.nuxt.mdx @@ -0,0 +1,14 @@ +```html {tabTitle:Vue} {filename:ErrorButton.vue} + + + +``` + + + diff --git a/platform-includes/performance/configure-sample-rate/javascript.nuxt.mdx b/platform-includes/performance/configure-sample-rate/javascript.nuxt.mdx new file mode 100644 index 0000000000000..930d27b7a0d93 --- /dev/null +++ b/platform-includes/performance/configure-sample-rate/javascript.nuxt.mdx @@ -0,0 +1,15 @@ +Set `tracesSampleRate` in your config files, `sentry.client.config.(js|ts)` and `instrument.server.mjs`: + + + +```javascript +import * as Sentry from "@sentry/nuxt"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + // We recommend adjusting this value in production, or using `tracesSampler` + // for finer control + tracesSampleRate: 1.0, +}); +``` diff --git a/platform-includes/performance/enable-automatic-instrumentation/javascript.nuxt.mdx b/platform-includes/performance/enable-automatic-instrumentation/javascript.nuxt.mdx new file mode 100644 index 0000000000000..2731a1a13057b --- /dev/null +++ b/platform-includes/performance/enable-automatic-instrumentation/javascript.nuxt.mdx @@ -0,0 +1 @@ +To enable tracing, set either a `tracesSampleRate` or a `tracesSampler` in your SDK configuration options, as described in Set Up Performance. diff --git a/platform-includes/sourcemaps/overview/javascript.nuxt.mdx b/platform-includes/sourcemaps/overview/javascript.nuxt.mdx new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/platform-includes/sourcemaps/primer/javascript.nuxt.mdx b/platform-includes/sourcemaps/primer/javascript.nuxt.mdx new file mode 100644 index 0000000000000..724936e9e301a --- /dev/null +++ b/platform-includes/sourcemaps/primer/javascript.nuxt.mdx @@ -0,0 +1,3 @@ +`@sentry/nuxt` will generate and upload source maps automatically, so that errors in Sentry will contain readable stack traces. You just need to provide your Sentry auth token and your organization and project slugs. + +The Nuxt SDK uses the [Sentry Vite Plugin](https://www.npmjs.com/package/@sentry/vite-plugin/v/2.14.2) to upload source maps. See the [Manual Configuration](../#add-readable-stack-traces-to-errors) page and the Sentry [Vite documentation](https://www.npmjs.com/package/@sentry/vite-plugin/v/2.14.2#configuration) for more details. diff --git a/src/components/platformIcon.tsx b/src/components/platformIcon.tsx index c0e60c674e967..b37a73bfe13ea 100644 --- a/src/components/platformIcon.tsx +++ b/src/components/platformIcon.tsx @@ -88,6 +88,7 @@ import NativecSVG from 'platformicons/svg/nativec.svg'; import NestjsSVG from 'platformicons/svg/nestjs.svg'; import NextjsSVG from 'platformicons/svg/nextjs.svg'; import NodejsSVG from 'platformicons/svg/nodejs.svg'; +import NuxtSVG from 'platformicons/svg/nuxt.svg'; import OpenaiSVG from 'platformicons/svg/openai.svg'; import PerlSVG from 'platformicons/svg/perl.svg'; import PhpSVG from 'platformicons/svg/php.svg'; @@ -222,6 +223,7 @@ import NativecSVGLarge from 'platformicons/svg_80x80/nativec.svg'; import NestjsSVGLarge from 'platformicons/svg_80x80/nestjs.svg'; import NextjsSVGLarge from 'platformicons/svg_80x80/nextjs.svg'; import NodejsSVGLarge from 'platformicons/svg_80x80/nodejs.svg'; +import NuxtSVGLarge from 'platformicons/svg_80x80/nuxt.svg'; import OpenaiSVGLarge from 'platformicons/svg_80x80/openai.svg'; import PerlSVGLarge from 'platformicons/svg_80x80/perl.svg'; import PhpSVGLarge from 'platformicons/svg_80x80/php.svg'; @@ -621,6 +623,10 @@ const formatToSVG = { sm: NextjsSVG, lg: NextjsSVGLarge, }, + nuxt: { + sm: NuxtSVG, + lg: NuxtSVGLarge, + }, nodejs: { sm: NodejsSVG, lg: NodejsSVGLarge, @@ -887,6 +893,7 @@ export const PLATFORM_TO_ICON = { 'javascript-fastify': 'fastify', 'javascript-nestjs': 'nestjs', 'javascript-nextjs': 'nextjs', + 'javascript-nuxt': 'nuxt', 'javascript-node': 'nodejs', 'javascript-react': 'react', 'javascript-remix': 'remix', diff --git a/yarn.lock b/yarn.lock index d08ae6fc212de..086a680696c06 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9433,10 +9433,10 @@ pkg-dir@^4.2.0: dependencies: find-up "^4.0.0" -platformicons@^5.10.9: - version "5.10.9" - resolved "https://registry.npmjs.org/platformicons/-/platformicons-5.10.9.tgz" - integrity sha512-QzDUFxOIK8VPpj+uHXbps7q+VgQmI3uAt+hlMZl5fSVWR0guOEJTaNXQFwCsgrOCz82udIUX8F4jRNDrsZPHzg== +platformicons@^6.0.2: + version "6.0.2" + resolved "https://registry.yarnpkg.com/platformicons/-/platformicons-6.0.2.tgz#a4e43dcdfba09201e0780ce15bbeadf5c0f323d0" + integrity sha512-YUVj9GTxhMeee4IScqA4sGRGJVsO1/++Xahrr0IeONBIOnlH2RwM/VBZ1L9WjSlR+z9HtE49DUCxH1omzCVcnA== dependencies: "@types/node" "*" "@types/react" "*" From 708eeac7173ce624f4ed69bd3be47370d39290d7 Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Fri, 9 Aug 2024 13:10:44 +0200 Subject: [PATCH 11/13] ref: Refactor changelog list page (#11019) --- apps/changelog/package.json | 1 + .../src/app/changelog/%5Fadmin/page.tsx | 9 +- apps/changelog/src/app/changelog/page.tsx | 50 ++- .../src/client/components/article.tsx | 6 +- apps/changelog/src/client/components/date.tsx | 5 +- apps/changelog/src/client/components/list.tsx | 331 ++++++++++-------- .../src/client/components/pagination.tsx | 86 +++-- apps/changelog/src/client/components/tag.tsx | 8 +- yarn.lock | 12 + 9 files changed, 318 insertions(+), 190 deletions(-) diff --git a/apps/changelog/package.json b/apps/changelog/package.json index 761272b4cdebd..e7e238aee2748 100644 --- a/apps/changelog/package.json +++ b/apps/changelog/package.json @@ -27,6 +27,7 @@ "next-auth": "^4.24.5", "next-mdx-remote": "^4.4.1", "nextjs-toploader": "^1.6.6", + "nuqs": "^1.17.7", "prism-sentry": "^1.0.2", "react": "beta", "react-dom": "beta", diff --git a/apps/changelog/src/app/changelog/%5Fadmin/page.tsx b/apps/changelog/src/app/changelog/%5Fadmin/page.tsx index 3ec2f52da182c..be784197432ca 100644 --- a/apps/changelog/src/app/changelog/%5Fadmin/page.tsx +++ b/apps/changelog/src/app/changelog/%5Fadmin/page.tsx @@ -103,10 +103,11 @@ export default async function ChangelogsListPage() { {' '} - {new Date(changelog.publishedAt || '').toLocaleDateString( - undefined, - {month: 'long', day: 'numeric'} - )} + {new Date(changelog.publishedAt || '').toLocaleDateString('en-EN', { + month: 'long', + day: 'numeric', + timeZone: 'UTC', + })}
diff --git a/apps/changelog/src/app/changelog/page.tsx b/apps/changelog/src/app/changelog/page.tsx index 7d7ca617ffb09..f00acce15b6d1 100644 --- a/apps/changelog/src/app/changelog/page.tsx +++ b/apps/changelog/src/app/changelog/page.tsx @@ -1,30 +1,44 @@ -import { Fragment } from "react"; -import type { Metadata } from "next"; -import { serialize } from "next-mdx-remote/serialize"; +import {Fragment} from 'react'; +import type {Metadata} from 'next'; +import {serialize} from 'next-mdx-remote/serialize'; -import Header from "./header"; -import { getChangelogs } from "../../server/utils"; -import List from "@/client/components/list"; +import Header from './header'; +import {getChangelogs} from '../../server/utils'; +import {ChangelogEntry, ChangelogList} from '@/client/components/list'; +import {startSpan} from '@sentry/nextjs'; -export const dynamic = "force-dynamic"; +export const dynamic = 'force-dynamic'; -export default async function ChangelogList() { +export default async function Page() { const changelogs = await getChangelogs(); - const changelogsWithMdxSummaries = await Promise.all( - changelogs.map(async (changelog) => { - const mdxSummary = await serialize(changelog.summary || ""); - return { - ...changelog, - mdxSummary, - }; - }) + const changelogsWithPublishedAt = changelogs.filter(changelog => { + return changelog.publishedAt !== null; + }); + + const changelogsWithMdxSummaries = await startSpan( + {name: 'serialize changelog summaries'}, + () => + Promise.all( + changelogsWithPublishedAt.map(async (changelog): Promise => { + const mdxSummary = await serialize(changelog.summary || ''); + return { + id: changelog.id, + title: changelog.title, + slug: changelog.slug, + // Because `getChangelogs` is cached, it sometimes returns its results serialized and sometimes not. Therefore we have to deserialize the string to be able to call toUTCString(). + publishedAt: new Date(changelog.publishedAt!).toUTCString(), + categories: changelog.categories, + mdxSummary, + }; + }) + ) ); return (
- + ); } @@ -32,7 +46,7 @@ export default async function ChangelogList() { export function generateMetadata(): Metadata { return { description: - "Stay up to date on everything big and small, from product updates to SDK changes with the Sentry Changelog.", + 'Stay up to date on everything big and small, from product updates to SDK changes with the Sentry Changelog.', alternates: { canonical: `https://sentry.io/changelog/`, }, diff --git a/apps/changelog/src/client/components/article.tsx b/apps/changelog/src/client/components/article.tsx index 8d596c62c7a57..9223a60655bc8 100644 --- a/apps/changelog/src/client/components/article.tsx +++ b/apps/changelog/src/client/components/article.tsx @@ -1,6 +1,6 @@ import {ReactNode} from 'react'; -import Tag from './tag'; -import { DateComponent } from './date'; +import {DateComponent} from './date'; +import {CategoryTag} from './tag'; type ArticleProps = { children?: ReactNode; @@ -41,7 +41,7 @@ export default function Article({

{title}

- {Array.isArray(tags) && tags.map(tag => )} + {Array.isArray(tags) && tags.map(tag => )}
{children}
diff --git a/apps/changelog/src/client/components/date.tsx b/apps/changelog/src/client/components/date.tsx index 458a23ba4d449..75f59824ddc50 100644 --- a/apps/changelog/src/client/components/date.tsx +++ b/apps/changelog/src/client/components/date.tsx @@ -1,11 +1,10 @@ const formatDate = (date: string | Date) => { - const options: Intl.DateTimeFormatOptions = { + const now = new Date(date).toLocaleDateString('en-EN', { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' - }; - const now = new Date(date).toLocaleDateString('en-EN', options); + }); return now; }; diff --git a/apps/changelog/src/client/components/list.tsx b/apps/changelog/src/client/components/list.tsx index d8d44d6673225..c981f577a49b5 100644 --- a/apps/changelog/src/client/components/list.tsx +++ b/apps/changelog/src/client/components/list.tsx @@ -1,73 +1,108 @@ 'use client'; -import {useEffect, useState} from 'react'; -import {type Category, type Changelog} from '@prisma/client'; -import Link from 'next/link'; -import {usePathname, useRouter, useSearchParams} from 'next/navigation'; +import type {Category} from '@prisma/client'; import {MDXRemote, MDXRemoteSerializeResult} from 'next-mdx-remote'; +import Link from 'next/link'; +import {parseAsArrayOf, parseAsInteger, parseAsString, useQueryState} from 'nuqs'; +import {Fragment} from 'react'; import Article from './article'; -import Tag from './tag'; -import Pagination from './pagination'; +import {Pagination} from './pagination'; +import {CategoryTag} from './tag'; const ENTRIES_PER_PAGE = 10; -type EnhancedChangelog = Changelog & { +export type ChangelogEntry = { + id: string; + title: string; + slug: string; + summary?: string; + image?: string | null | undefined; + publishedAt: string; // Dates are passed to client components serialized as strings categories: Category[]; mdxSummary: MDXRemoteSerializeResult; }; -export default function Changelogs({changelogs}: {changelogs: EnhancedChangelog[]}) { - const router = useRouter(); - const pathname = usePathname(); - const searchParams = useSearchParams(); +/** + * Turns a date into this format: "August 2024" + * Which is the format we use in query params and to filter. + */ +function changelogEntryPublishDateToAddressableTag(date: Date) { + return date.toLocaleString('en-EN', { + month: 'long', + year: 'numeric', + timeZone: 'UTC', + }); +} + +export function ChangelogList({changelogs}: {changelogs: ChangelogEntry[]}) { + const [searchValue, setSearchValue] = useQueryState('search', parseAsString); - const [pageNumber, setPageNumber] = useState(1); - const [searchValue, setSearchValue] = useState(''); - const [selectedCategoriesIds, setSelectedCategoriesIds] = useState( - searchParams?.get('categories')?.split(',') || [] + const [monthAndYearParam, setMonthParam] = useQueryState('month'); + const [selectedCategoriesIds, setSelectedCategoriesIds] = useQueryState( + 'categories', + parseAsArrayOf(parseAsString).withDefault([]).withOptions({clearOnDefault: true}) ); - const [selectedMonth, setSelectedMonth] = useState( - searchParams?.get('month') || null + const [pageParam, setPageParam] = useQueryState( + 'page', + parseAsInteger.withDefault(1).withOptions({clearOnDefault: true}) ); - useEffect(() => { - const params: string[] = []; - if (selectedCategoriesIds.length > 0) { - params.push(`categories=${selectedCategoriesIds.join(',')}`); - } - if (selectedMonth) { - params.push(`month=${selectedMonth}`); - } - router.push(pathname + '?' + params.join('&')); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [selectedCategoriesIds, selectedMonth]); + const selectedPage = pageParam === null ? 1 : pageParam; - const filtered = selectedCategoriesIds.length || searchValue || selectedMonth; + const someFilterIsActive = Boolean( + selectedCategoriesIds.length > 0 || searchValue || monthAndYearParam + ); + + const filteredChangelogsWithoutMonthFilter = changelogs + // First filter by categories + .filter(changelog => { + if (selectedCategoriesIds.length === 0) { + // If no categories are selected we don't filter anything + return true; + } + + return changelog.categories.some(changelogCategory => + selectedCategoriesIds.includes(changelogCategory.id) + ); + }) + + .filter(changelog => { + if (searchValue === null) { + return true; + } + + const addressableDate = changelogEntryPublishDateToAddressableTag( + new Date(changelog.publishedAt) + ); - const filteredChangelogs = changelogs - .filter((changelog: EnhancedChangelog) => { // map all categories to a string - const categories = changelog.categories + const concatenatedCategories = changelog.categories .map((category: Category) => category.name) .join(' '); - const postDate = new Date(changelog.publishedAt || ''); - const postMonthYear = postDate.toLocaleString('default', { - month: 'long', - year: 'numeric', - }); + const searchableContent = + changelog.title + changelog.summary + concatenatedCategories + addressableDate; - const searchContent = changelog.title + changelog.summary + categories; - return ( - searchContent.toLowerCase().includes(searchValue.toLowerCase()) && - (!selectedCategoriesIds.length || - selectedCategoriesIds.some(catId => - changelog.categories.some(changelogCategory => changelogCategory.id === catId) - )) && - (!selectedMonth || selectedMonth === postMonthYear) - ); + return searchableContent.toLowerCase().includes(searchValue.toLowerCase()); }) - .slice(ENTRIES_PER_PAGE * (pageNumber - 1), ENTRIES_PER_PAGE * pageNumber); + .sort((a, b) => { + return new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime(); + }); + + const filteredChangelogs = filteredChangelogsWithoutMonthFilter + // Filter by selected date + .filter(changelog => { + if (monthAndYearParam == null) { + // If no date was selected we don't filter anything + return true; + } + + const addressableDate = changelogEntryPublishDateToAddressableTag( + new Date(changelog.publishedAt) + ); + + return monthAndYearParam === addressableDate; + }); const allChangelogCategories: Record = {}; changelogs.forEach(changelog => { @@ -76,62 +111,62 @@ export default function Changelogs({changelogs}: {changelogs: EnhancedChangelog[ }); }); - // iterate over all posts and create a list of months & years - const months = changelogs.reduce((allMonths, post) => { - const date = new Date(post.publishedAt || ''); - const year = date.getFullYear(); - const month = date.toLocaleString('default', { - month: 'long', - }); - const dateMonthYear = `${month} ${year}`; - return [...new Set([...allMonths, dateMonthYear])]; - }, [] as string[]); + // contains dates in the format "August 2024" + const datesGroupedByMonthAndYear = new Set(); + changelogs.forEach(changelog => { + if (changelog.publishedAt === null) { + throw new Error('invariant'); + } - const monthsCopy = [...months]; + datesGroupedByMonthAndYear.add( + changelogEntryPublishDateToAddressableTag(new Date(changelog.publishedAt)) + ); + }); - const showChangelogs = filteredChangelogs.map(changelog => { - const monthYear = new Date(changelog.publishedAt || '').toLocaleString('default', { - month: 'long', - year: 'numeric', - }); + const sortedDatesGroupedByMonthAndYear = [...datesGroupedByMonthAndYear].sort( + (a, b) => new Date(b).getTime() - new Date(a).getTime() + ); - const monthYearIndex = months.indexOf(monthYear); - if (monthYearIndex > -1) { - // remove first entry from months array - months.splice(monthYearIndex, 1); - } + const paginatedChangelogs = filteredChangelogs + .slice(ENTRIES_PER_PAGE * (selectedPage - 1), ENTRIES_PER_PAGE * selectedPage) + .map((changelog, i, arr) => { + const monthYear = changelogEntryPublishDateToAddressableTag( + new Date(changelog.publishedAt) + ); - const monthSeparator = ( -
-
- {monthYear} -
-
- ); + const prevChangelog: ChangelogEntry | undefined = arr[i - 1]; + const prevChangelogHasDifferentMonth = + !prevChangelog || + changelogEntryPublishDateToAddressableTag(new Date(prevChangelog.publishedAt)) !== + changelogEntryPublishDateToAddressableTag(new Date(changelog.publishedAt)); - return ( - - {monthYearIndex > -1 && monthSeparator} -
category.name)} - image={changelog.image} - > - -
- - ); - }); + return ( + + {prevChangelogHasDifferentMonth && ( +
+
+ {monthYear} +
+
+ )} + +
category.name)} + image={changelog.image} + > + +
+ + + ); + }); - const pagination = { - totalPages: Math.ceil( - (filtered ? filteredChangelogs.length : changelogs.length) / ENTRIES_PER_PAGE - ), - }; + const numberOfPages = Math.ceil(filteredChangelogs.length / ENTRIES_PER_PAGE); return (
@@ -140,24 +175,25 @@ export default function Changelogs({changelogs}: {changelogs: EnhancedChangelog[ @@ -168,18 +204,22 @@ export default function Changelogs({changelogs}: {changelogs: EnhancedChangelog[ setSearchValue(e.target.value)} + value={searchValue ?? ''} + onChange={e => { + setPageParam(null); + setSearchValue(e.target.value ? e.target.value : null); + }} placeholder="Search..." className="form-input flex-1 rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-900 focus:border-primary-500 focus:ring-primary-500" />
- {showChangelogs} + {paginatedChangelogs} - {pagination.totalPages > 1 && ( + {numberOfPages > 1 && ( { + setPageParam(pageNumber, {history: 'push'}); + }} + search={searchValue} + selectedMonth={monthAndYearParam} + selectedCategoriesIds={selectedCategoriesIds} /> )} - {!filteredChangelogs.length && ( + {paginatedChangelogs.length === 0 && (
No posts found. @@ -209,23 +254,35 @@ export default function Changelogs({changelogs}: {changelogs: EnhancedChangelog[

Jump to:
diff --git a/apps/changelog/src/client/components/pagination.tsx b/apps/changelog/src/client/components/pagination.tsx index 22da8932d408d..a5d8a261b5ad2 100644 --- a/apps/changelog/src/client/components/pagination.tsx +++ b/apps/changelog/src/client/components/pagination.tsx @@ -1,17 +1,31 @@ 'use client'; -import {Fragment} from 'react'; +import Link from 'next/link'; +import {createSerializer, parseAsArrayOf, parseAsInteger, parseAsString} from 'nuqs'; -export default function Pagination({ +const serialize = createSerializer({ + month: parseAsString, + categories: parseAsArrayOf(parseAsString), + page: parseAsInteger.withDefault(1).withOptions({clearOnDefault: true}), + search: parseAsString, +}); + +export function Pagination({ totalPages, currentPage, - setPageNumber, + onPageNumberChange, + selectedMonth, + search, + selectedCategoriesIds, }: { totalPages: number; currentPage: number; - setPageNumber: (pageNumber: number) => void; + selectedCategoriesIds: string[]; + selectedMonth: string | null; + search: string | null; + onPageNumberChange: (pageNumber: number) => void; }) { - const prevPage = currentPage - 1 > 0; - const nextPage = currentPage + 1 <= parseInt(totalPages.toString(), 10); + const navigationToPrevPageAllowed = currentPage - 1 > 0; + const navigationToNextPageAllowed = currentPage + 1 <= totalPages; const pages: Array = []; let pushedMiddle = false; @@ -27,12 +41,20 @@ export default function Pagination({ return (
setPageNumber(Math.max(currentPage - 1, 1))} - condition={prevPage} + href={serialize({ + month: selectedMonth, + categories: selectedCategoriesIds.length === 0 ? null : selectedCategoriesIds, + page: Math.max(currentPage - 1, 1), + search, + })} + onClick={(e: MouseEvent) => { + e.preventDefault(); + onPageNumberChange(Math.max(currentPage - 1, 1)); + }} + condition={navigationToPrevPageAllowed} > - + ))}
setPageNumber(currentPage + 1)} - condition={nextPage} + href={serialize({ + month: selectedMonth, + categories: selectedCategoriesIds.length === 0 ? null : selectedCategoriesIds, + page: currentPage + 1, + search, + })} + onClick={(e: MouseEvent) => { + e.preventDefault(); + onPageNumberChange(currentPage + 1); + }} + condition={navigationToNextPageAllowed} >