feat(react): React Router v7 support (library) #14513

chargome · 2024-11-27T16:25:38Z

This PR basically handles the library part of rr7, not the framework part.

Since v7 is v6 compatible we just adapt and re-export existing functions from v6.

Moves all shared code between v6 and v7 to a reactrouterv6-compat-utils.tsx file
Updates v6 exports to use these utils
Deprecates some of the v6 exports since the naming would be misleading for v7
Adds v7 exports to use these utils
Adds a v7 e2e test that basically has the same tests as rr6, but with a vite config

chargome · 2024-11-27T16:26:33Z

@lforst this pr contains some deprecations for react router v6 exports, should we include this in the v9 roadmap?

onurtemizkan

Looks good to me! Only need to double check if we need to update the vendored types for RR v7, they're pretty much loosened anyways, but still worth checking IMO.

dev-packages/e2e-tests/test-applications/react-router-7-spa/package.json

fobos531 · 2024-11-29T10:36:14Z

hey @chargome - are there any additional changes required on Sentry's part to support the framework flow? I'm interested in knowing more details about this as I've just migrated from Remix to RR7 so naturally I'm using it as a framework.

chargome · 2024-11-29T10:49:43Z

@fobos531 we have a separate tracking issue for that here.

This PR is only for supporting rr7 in library mode

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@sentry/node](https://github.com/getsentry/sentry-javascript/tree/master/packages/node) ([source](https://github.com/getsentry/sentry-javascript)) | dependencies | minor | [`8.40.0` -> `8.42.0`](https://renovatebot.com/diffs/npm/@sentry%2fnode/8.40.0/8.42.0) | | [@sentry/react](https://github.com/getsentry/sentry-javascript/tree/master/packages/react) ([source](https://github.com/getsentry/sentry-javascript)) | dependencies | minor | [`8.40.0` -> `8.42.0`](https://renovatebot.com/diffs/npm/@sentry%2freact/8.40.0/8.42.0) | --- ### Release Notes <details> <summary>getsentry/sentry-javascript (@sentry/node)</summary> ### [`v8.42.0`](https://github.com/getsentry/sentry-javascript/blob/HEAD/CHANGELOG.md#8420) [Compare Source](getsentry/sentry-javascript@8.41.0...8.42.0) ##### Important Changes - **feat(react): React Router v7 support (library) ([#14513](getsentry/sentry-javascript#14513 This release adds support for [React Router v7 (library mode)](https://reactrouter.com/home#react-router-as-a-library). Check out the docs on how to set up the integration: [Sentry React Router v7 Integration Docs](https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/v7/) ##### Deprecations - **feat: Warn about source-map generation ([#14533](getsentry/sentry-javascript#14533 In the next major version of the SDK we will change how source maps are generated when the SDK is added to an application. Currently, the implementation varies a lot between different SDKs and can be difficult to understand. Moving forward, our goal is to turn on source maps for every framework, unless we detect that they are explicitly turned off. Additionally, if we end up enabling source maps, we will emit a log message that we did so. With this particular release, we are emitting warnings that source map generation will change in the future and we print instructions on how to prepare for the next major. - **feat(nuxt): Deprecate `tracingOptions` in favor of `vueIntegration` ([#14530](getsentry/sentry-javascript#14530 Currently it is possible to configure tracing options in two places in the Sentry Nuxt SDK: - In `Sentry.init()` - Inside `tracingOptions` in `Sentry.init()` For tree-shaking purposes and alignment with the Vue SDK, it is now recommended to instead use the newly exported `vueIntegration()` and its `tracingOptions` option to configure tracing options in the Nuxt SDK: ```ts // sentry.client.config.ts import * as Sentry from '@sentry/nuxt'; Sentry.init({ // ... integrations: [ Sentry.vueIntegration({ tracingOptions: { trackComponents: true, }, }), ], }); ``` ##### Other Changes - feat(browser-utils): Update `web-vitals` to v4.2.4 ([#14439](getsentry/sentry-javascript#14439)) - feat(nuxt): Expose `vueIntegration` ([#14526](getsentry/sentry-javascript#14526)) - fix(feedback): Handle css correctly in screenshot mode ([#14535](getsentry/sentry-javascript#14535)) ### [`v8.41.0`](https://github.com/getsentry/sentry-javascript/blob/HEAD/CHANGELOG.md#8410) [Compare Source](getsentry/sentry-javascript@8.40.0...8.41.0) ##### Important Changes - **meta(nuxt): Require minimum Nuxt v3.7.0 ([#14473](getsentry/sentry-javascript#14473 We formalized that the Nuxt SDK is at minimum compatible with Nuxt version 3.7.0 and above. Additionally, the SDK requires the implicit `nitropack` dependency to satisfy version `^2.10.0` and `ofetch` to satisfy `^1.4.0`. It is recommended to check your lock-files and manually upgrade these dependencies if they don't match the version ranges. ##### Deprecations We are deprecating a few APIs which will be removed in the next major. The following deprecations will *potentially* affect you: - **feat(core): Update & deprecate `undefined` option handling ([#14450](getsentry/sentry-javascript#14450 In the next major version we will change how passing `undefined` to `tracesSampleRate` / `tracesSampler` / `enableTracing` will behave. Currently, doing the following: ```ts Sentry.init({ tracesSampleRate: undefined, }); ``` Will result in tracing being *enabled* (although no spans will be generated) because the `tracesSampleRate` key is present in the options object. In the next major version, this behavior will be changed so that passing `undefined` (or rather having a `tracesSampleRate` key) will result in tracing being disabled, the same as not passing the option at all. If you are currently relying on `undefined` being passed, and and thus have tracing enabled, it is recommended to update your config to set e.g. `tracesSampleRate: 0` instead, which will also enable tracing in v9. The same applies to `tracesSampler` and `enableTracing`. - **feat(core): Log warnings when returning `null` in `beforeSendSpan` ([#14433](getsentry/sentry-javascript#14433 Currently, the `beforeSendSpan` option in `Sentry.init()` allows you to drop individual spans from a trace by returning `null` from the hook. Since this API lends itself to creating "gaps" inside traces, we decided to change how this API will work in the next major version. With the next major version the `beforeSendSpan` API can only be used to mutate spans, but no longer to drop them. With this release the SDK will warn you if you are using this API to drop spans. Instead, it is recommended to configure instrumentation (i.e. integrations) directly to control what spans are created. Additionally, with the next major version, root spans will also be passed to `beforeSendSpan`. - **feat(utils): Deprecate `@sentry/utils` ([#14431](getsentry/sentry-javascript#14431 With the next major version the `@sentry/utils` package will be merged into the `@sentry/core` package. It is therefore no longer recommended to use the `@sentry/utils` package. - **feat(vue): Deprecate configuring Vue tracing options anywhere else other than through the `vueIntegration`'s `tracingOptions` option ([#14385](getsentry/sentry-javascript#14385 Currently it is possible to configure tracing options in various places in the Sentry Vue SDK: - In `Sentry.init()` - Inside `tracingOptions` in `Sentry.init()` - In the `vueIntegration()` options - Inside `tracingOptions` in the `vueIntegration()` options Because this is a bit messy and confusing to document, the only recommended way to configure tracing options going forward is through the `tracingOptions` in the `vueIntegration()`. The other means of configuration will be removed in the next major version of the SDK. - **feat: Deprecate `registerEsmLoaderHooks.include` and `registerEsmLoaderHooks.exclude` ([#14486](getsentry/sentry-javascript#14486 Currently it is possible to define `registerEsmLoaderHooks.include` and `registerEsmLoaderHooks.exclude` options in `Sentry.init()` to only apply ESM loader hooks to a subset of modules. This API served as an escape hatch in case certain modules are incompatible with ESM loader hooks. Since this API was introduced, a way was found to only wrap modules that there exists instrumentation for (meaning a vetted list). To only wrap modules that have instrumentation, it is recommended to instead set `registerEsmLoaderHooks.onlyIncludeInstrumentedModules` to `true`. Note that `onlyIncludeInstrumentedModules: true` will become the default behavior in the next major version and the `registerEsmLoaderHooks` will no longer accept fine-grained options. The following deprecations will *most likely* not affect you unless you are building an SDK yourself: - feat(core): Deprecate `arrayify` ([#14405](getsentry/sentry-javascript#14405)) - feat(core): Deprecate `flatten` ([#14454](getsentry/sentry-javascript#14454)) - feat(core): Deprecate `urlEncode` ([#14406](getsentry/sentry-javascript#14406)) - feat(core): Deprecate `validSeverityLevels` ([#14407](getsentry/sentry-javascript#14407)) - feat(core/utils): Deprecate `getNumberOfUrlSegments` ([#14458](getsentry/sentry-javascript#14458)) - feat(utils): Deprecate `memoBuilder`, `BAGGAGE_HEADER_NAME`, and `makeFifoCache` ([#14434](getsentry/sentry-javascript#14434)) - feat(utils/core): Deprecate `addRequestDataToEvent` and `extractRequestData` ([#14430](getsentry/sentry-javascript#14430)) ##### Other Changes - feat: Streamline `sentry-trace`, `baggage` and DSC handling ([#14364](getsentry/sentry-javascript#14364)) - feat(core): Further optimize debug ID parsing ([#14365](getsentry/sentry-javascript#14365)) - feat(node): Add `openTelemetryInstrumentations` option ([#14484](getsentry/sentry-javascript#14484)) - feat(nuxt): Add filter for not found source maps (devtools) ([#14437](getsentry/sentry-javascript#14437)) - feat(nuxt): Only delete public source maps ([#14438](getsentry/sentry-javascript#14438)) - fix(nextjs): Don't report `NEXT_REDIRECT` from browser ([#14440](getsentry/sentry-javascript#14440)) - perf(opentelemetry): Bucket spans for cleanup ([#14154](getsentry/sentry-javascript#14154)) Work in this release was contributed by [@NEKOYASAN](https://github.com/NEKOYASAN) and [@fmorett](https://github.com/fmorett). Thank you for your contributions! </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Reviewed-on: https://git.tristess.app/alexandresoro/ouca/pulls/374 Reviewed-by: Alexandre Soro <code@soro.dev> Co-authored-by: renovate <renovate@git.tristess.app> Co-committed-by: renovate <renovate@git.tristess.app>

Removes code deprecated in #14513 and adds changelog entry as appropriate: Removed methods: 1. The `wrapUseRoutes` method has been removed. Use `wrapUseRoutesV6` or `wrapUseRoutesV7` instead depending on what version of react router you are using. 2. The `wrapCreateBrowserRouter` method has been removed. Use `wrapCreateBrowserRouterV6` or `wrapCreateBrowserRouterV7` depending on what version of react router you are using.

chargome added 3 commits November 27, 2024 17:12

create utils file

0ecf85a

define v6 compatible functions

f36d755

add v7 e2e test

1eff1c0

chargome self-assigned this Nov 27, 2024

chargome added 2 commits November 28, 2024 11:16

organize imports

f5a79cd

Merge branch 'develop' into cg/react-router-v7

41d3d67

chargome marked this pull request as ready for review November 28, 2024 10:19

chargome requested a review from onurtemizkan November 28, 2024 10:19

add deprecation warnings for rr

90e98d3

onurtemizkan approved these changes Nov 28, 2024

View reviewed changes

dev-packages/e2e-tests/test-applications/react-router-7-spa/package.json Outdated Show resolved Hide resolved

chargome changed the title ~~feat(react): React Router v7 support~~ feat(react): React Router v7 support (library) Nov 28, 2024

update variant label for tests

38d91d3

lforst approved these changes Nov 28, 2024

View reviewed changes

ignore deprecation warnings for v6 tests

8117c80

chargome mentioned this pull request Nov 28, 2024

Support React Router v7 (library) #14518

Closed

2 tasks

chargome added 3 commits November 29, 2024 10:55

update test build command

099112b

Merge branch 'develop' into cg/react-router-v7

cbf0a67

organize imports

1941735

chargome added 2 commits November 29, 2024 11:54

import types from core

d6647d8

Merge branch 'develop' into cg/react-router-v7

7e86ffb

chargome merged commit af773b1 into develop Nov 29, 2024
130 checks passed

chargome deleted the cg/react-router-v7 branch November 29, 2024 13:20

chargome mentioned this pull request Dec 13, 2024

Inconsisten span origin naming #12575

Closed

3 tasks

AbhiPrasad mentioned this pull request Dec 16, 2024

feat(react)!: Remove deprecated react router methods #14743

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react): React Router v7 support (library) #14513

feat(react): React Router v7 support (library) #14513

chargome commented Nov 27, 2024 •

edited

Loading

chargome commented Nov 27, 2024

onurtemizkan left a comment

fobos531 commented Nov 29, 2024

chargome commented Nov 29, 2024

feat(react): React Router v7 support (library) #14513

feat(react): React Router v7 support (library) #14513

Conversation

chargome commented Nov 27, 2024 • edited Loading

chargome commented Nov 27, 2024

onurtemizkan left a comment

Choose a reason for hiding this comment

fobos531 commented Nov 29, 2024

chargome commented Nov 29, 2024

chargome commented Nov 27, 2024 •

edited

Loading