Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(remix): Support v2_errorBoundary future flag #1444

Merged
merged 4 commits into from
Jul 6, 2023

Conversation

anagstef
Copy link
Member

@anagstef anagstef commented Jul 3, 2023

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/clerk-js
  • @clerk/clerk-react
  • @clerk/nextjs
  • @clerk/remix
  • @clerk/types
  • @clerk/themes
  • @clerk/localizations
  • @clerk/clerk-expo
  • @clerk/backend
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/fastify
  • @clerk/chrome-extension
  • gatsby-plugin-clerk
  • build/tooling/chore

Description

  • npm test runs as expected.
  • npm run build runs as expected.

This PR introduces V2_ClerkErrorBoundary to support v2_errorBoundary future flag

Users that have enabled the v2_errorBoundary future flag need to use V2_ClerkErrorBoundary in their root.tsx page:

export const ErrorBoundary = V2_ClerkErrorBoundary();

@changeset-bot
Copy link

changeset-bot bot commented Jul 3, 2023

🦋 Changeset detected

Latest commit: bdc474a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@clerk/remix Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@anagstef
Copy link
Member Author

anagstef commented Jul 3, 2023

!snapshot

Copy link

@jit-ci jit-ci bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Great news! Jit hasn't found any security issues in your PR. Good Job! 🏆

@clerk-cookie
Copy link
Collaborator

Hey @anagstef - the snapshot version command generated the following package versions:

Package Version
@clerk/backend 0.23.7
@clerk/chrome-extension 0.3.20-snapshot.6b46a7e
@clerk/clerk-js 4.51.1-snapshot.6b46a7e
eslint-config-custom 0.3.0
@clerk/clerk-expo 0.18.11-snapshot.6b46a7e
@clerk/fastify 0.5.6
gatsby-plugin-clerk 4.3.19
@clerk/localizations 1.22.0
@clerk/nextjs 4.21.13
@clerk/clerk-react 4.21.1
@clerk/remix 2.6.16
@clerk/clerk-sdk-node 4.10.14
@clerk/shared 0.19.1
@clerk/themes 1.7.5
@clerk/types 3.46.1

Tip: use the snippet copy button below to quickly install the required packages.

# @clerk/backend
npm i @clerk/backend@0.23.7
# @clerk/chrome-extension
npm i @clerk/chrome-extension@0.3.20-snapshot.6b46a7e
# @clerk/clerk-js
npm i @clerk/clerk-js@4.51.1-snapshot.6b46a7e
# eslint-config-custom
npm i eslint-config-custom@0.3.0
# @clerk/clerk-expo
npm i @clerk/clerk-expo@0.18.11-snapshot.6b46a7e
# @clerk/fastify
npm i @clerk/fastify@0.5.6
# gatsby-plugin-clerk
npm i gatsby-plugin-clerk@4.3.19
# @clerk/localizations
npm i @clerk/localizations@1.22.0
# @clerk/nextjs
npm i @clerk/nextjs@4.21.13
# @clerk/clerk-react
npm i @clerk/clerk-react@4.21.1
# @clerk/remix
npm i @clerk/remix@2.6.16
# @clerk/clerk-sdk-node
npm i @clerk/clerk-sdk-node@4.10.14
# @clerk/shared
npm i @clerk/shared@0.19.1
# @clerk/themes
npm i @clerk/themes@1.7.5
# @clerk/types
npm i @clerk/types@3.46.1

@anagstef anagstef force-pushed the stefanos/js-278-spike-support-remixv2 branch from 6b46a7e to 356787e Compare July 3, 2023 15:10
@anagstef
Copy link
Member Author

anagstef commented Jul 3, 2023

!snapshot

@clerk-cookie
Copy link
Collaborator

Hey @anagstef - the snapshot version command generated the following package versions:

Package Version
@clerk/backend 0.23.7
@clerk/chrome-extension 0.3.20-snapshot.356787e
@clerk/clerk-js 4.51.1-snapshot.356787e
eslint-config-custom 0.3.0
@clerk/clerk-expo 0.18.11-snapshot.356787e
@clerk/fastify 0.5.6
gatsby-plugin-clerk 4.3.19
@clerk/localizations 1.22.0
@clerk/nextjs 4.21.13
@clerk/clerk-react 4.21.1
@clerk/remix 2.7.0-snapshot.356787e
@clerk/clerk-sdk-node 4.10.14
@clerk/shared 0.19.1
@clerk/themes 1.7.5
@clerk/types 3.46.1

Tip: use the snippet copy button below to quickly install the required packages.

# @clerk/backend
npm i @clerk/backend@0.23.7
# @clerk/chrome-extension
npm i @clerk/chrome-extension@0.3.20-snapshot.356787e
# @clerk/clerk-js
npm i @clerk/clerk-js@4.51.1-snapshot.356787e
# eslint-config-custom
npm i eslint-config-custom@0.3.0
# @clerk/clerk-expo
npm i @clerk/clerk-expo@0.18.11-snapshot.356787e
# @clerk/fastify
npm i @clerk/fastify@0.5.6
# gatsby-plugin-clerk
npm i gatsby-plugin-clerk@4.3.19
# @clerk/localizations
npm i @clerk/localizations@1.22.0
# @clerk/nextjs
npm i @clerk/nextjs@4.21.13
# @clerk/clerk-react
npm i @clerk/clerk-react@4.21.1
# @clerk/remix
npm i @clerk/remix@2.7.0-snapshot.356787e
# @clerk/clerk-sdk-node
npm i @clerk/clerk-sdk-node@4.10.14
# @clerk/shared
npm i @clerk/shared@0.19.1
# @clerk/themes
npm i @clerk/themes@1.7.5
# @clerk/types
npm i @clerk/types@3.46.1

/*
* V2_ClerkErrorBoundary needs the `v2_errorBoundary` future flag to be enabled.
*/
export function V2_ClerkErrorBoundary(RootErrorBoundary?: React.ComponentType) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@anagstef What is the difference between v1 CatchBoundary and v2 ErrorBoundary?

EDIT:

In v1, a thrown Response will render the closest CatchBoundary while all other unhandled exceptions render the ErrorBoundary. In v2 there is no CatchBoundary and all unhandled exceptions will render the ErrorBoundary, response or otherwise.

https://remix.run/docs/en/main/pages/v2#catchboundary-and-errorboundary

Copy link
Member Author

@anagstef anagstef Jul 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In V2 the CatchBoundary is removed and all the errors end up in the ErrorBoundary. A helper with the name isRouteErrorResponse helps you identify if the error was an expected error (4xx) or an unexpected error.

ref: https://remix.run/docs/en/main/route/error-boundary-v2

packages/remix/src/client/V2_ClerkErrorBoundary.tsx Outdated Show resolved Hide resolved
@nikosdouvlis nikosdouvlis marked this pull request as ready for review July 6, 2023 09:10
packages/remix/src/client/index.ts Outdated Show resolved Hide resolved
@anagstef anagstef merged commit 42507d7 into main Jul 6, 2023
@anagstef anagstef deleted the stefanos/js-278-spike-support-remixv2 branch July 6, 2023 09:53
@clerk-cookie clerk-cookie mentioned this pull request Jul 6, 2023
@clerk-cookie
Copy link
Collaborator

This PR has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@clerk clerk locked as resolved and limited conversation to collaborators Jul 6, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants