feat: add more intelligent error screen

package.json

@@ -101,6 +101,7 @@
     "react-dom": "18.3.1",
     "react-intl": "6.8.1",
     "storybook": "8.3.0",
+    "storybook-mock-date-decorator": "2.0.6",
     "tailwindcss": "3.4.17",
     "ts-jest": "29.2.4",
     "ts-node": "10.9.2",

packages/elements-react/.storybook/preview.tsx

@@ -4,6 +4,7 @@
 import type { Decorator, Preview } from "@storybook/react"
 import { merge } from "lodash"
 import "./global.css"
+import { mockDateDecorator } from "storybook-mock-date-decorator"
 
 const preview: Preview = {
   parameters: {
@@ -45,7 +46,7 @@ const withI18next: Decorator = (Story, context) => {
 }
 
 // export decorators for storybook to wrap your stories in
-export const decorators = [withI18next]
+export const decorators = [withI18next, mockDateDecorator]
 
 export const globalTypes = {
   locale: {

packages/elements-react/api-report/elements-react-theme.api.json

@@ -752,7 +752,16 @@
           "excerptTokens": [
             {
               "kind": "Content",
-              "text": "declare function Error({ error, children, }: "
+              "text": "declare function Error({ error, "
+            },
+            {
+              "kind": "Reference",
+              "text": "components",
+              "canonicalReference": "@ory/elements-react!~__type#components"
+            },
+            {
+              "kind": "Content",
+              "text": ": Components, config, session, }: "
             },
             {
               "kind": "Reference",
@@ -788,17 +797,17 @@
           ],
           "fileUrlPath": "dist/theme/default/index.d.ts",
           "returnTypeTokenRange": {
-            "startIndex": 6,
-            "endIndex": 7
+            "startIndex": 8,
+            "endIndex": 9
           },
           "releaseTag": "Public",
           "overloadIndex": 1,
           "parameters": [
             {
-              "parameterName": "{ error, children, }",
+              "parameterName": "{ error, components: Components, config, session, }",
               "parameterTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 5
+                "startIndex": 3,
+                "endIndex": 7
               },
               "isOptional": false
             }
@@ -820,8 +829,8 @@
             },
             {
               "kind": "Reference",
-              "text": "FlowError",
-              "canonicalReference": "@ory/client-fetch!FlowError:interface"
+              "text": "OryError",
+              "canonicalReference": "@ory/elements-react!OryError:type"
             },
             {
               "kind": "Content",
@@ -841,6 +850,15 @@
               "text": "OryClientConfiguration",
               "canonicalReference": "@ory/elements-react!~OryClientConfiguration:type"
             },
+            {
+              "kind": "Content",
+              "text": ";\n    session?: "
+            },
+            {
+              "kind": "Reference",
+              "text": "Session",
+              "canonicalReference": "@ory/client-fetch!Session:interface"
+            },
             {
               "kind": "Content",
               "text": ";\n}"
@@ -855,7 +873,7 @@
           "name": "ErrorFlowContextProps",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 8
+            "endIndex": 10
           }
         },
         {
@@ -1027,6 +1045,81 @@
             "endIndex": 8
           }
         },
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@ory/elements-react!OAuth2Error:type",
+          "docComment": "/**\n * An OAuth2 error response.\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "type OAuth2Error = "
+            },
+            {
+              "kind": "Content",
+              "text": "{\n    error: string;\n    error_description: string;\n}"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "dist/theme/default/index.d.ts",
+          "releaseTag": "Public",
+          "name": "OAuth2Error",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          }
+        },
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@ory/elements-react!OryError:type",
+          "docComment": "/**\n * A union type of all possible errors that can be returned by the Ory SDK.\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "type OryError = "
+            },
+            {
+              "kind": "Reference",
+              "text": "FlowError",
+              "canonicalReference": "@ory/client-fetch!FlowError:interface"
+            },
+            {
+              "kind": "Content",
+              "text": " | "
+            },
+            {
+              "kind": "Reference",
+              "text": "OAuth2Error",
+              "canonicalReference": "@ory/elements-react!OAuth2Error:type"
+            },
+            {
+              "kind": "Content",
+              "text": " | {\n    error: "
+            },
+            {
+              "kind": "Reference",
+              "text": "GenericError",
+              "canonicalReference": "@ory/client-fetch!GenericError:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ";\n}"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "dist/theme/default/index.d.ts",
+          "releaseTag": "Public",
+          "name": "OryError",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 7
+          }
+        },
         {
           "kind": "Function",
           "canonicalReference": "@ory/elements-react!Recovery:function(1)",

packages/elements-react/api-report/elements-react-theme.api.md

@@ -11,6 +11,7 @@ import { DetailedHTMLProps } from 'react';
 import { ElementType } from 'react';
 import { FlowError } from '@ory/client-fetch';
 import { FormEventHandler } from 'react';
+import { GenericError } from '@ory/client-fetch';
 import { HTMLAttributes } from 'react';
 import { LoginFlow } from '@ory/client-fetch';
 import { MouseEventHandler } from 'react';
@@ -19,6 +20,7 @@ import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { RecoveryFlow } from '@ory/client-fetch';
 import { RegistrationFlow } from '@ory/client-fetch';
+import { Session } from '@ory/client-fetch';
 import { SettingsFlow } from '@ory/client-fetch';
 import { UiNode } from '@ory/client-fetch';
 import { UiNodeAnchorAttributes } from '@ory/client-fetch';
@@ -79,14 +81,15 @@ export function DefaultMessage({ message }: OryMessageContentProps): react_jsx_r
 export function DefaultMessageContainer({ children }: PropsWithChildren): react_jsx_runtime.JSX.Element | null;
 
 // @public (undocumented)
-function Error_2({ error, children, }: PropsWithChildren<ErrorFlowContextProps>): react_jsx_runtime.JSX.Element;
+function Error_2({ error, components: Components, config, session, }: PropsWithChildren<ErrorFlowContextProps>): react_jsx_runtime.JSX.Element;
 export { Error_2 as Error }
 
 // @public (undocumented)
 export type ErrorFlowContextProps = {
-    error: FlowError;
+    error: OryError;
     components?: OryFlowComponentOverrides;
     config: OryClientConfiguration;
+    session?: Session;
 };
 
 // Warning: (ae-forgotten-export) The symbol "OryFlowComponents" needs to be exported by the entry point index.d.ts
@@ -104,6 +107,17 @@ export type LoginFlowContextProps = {
     config: OryClientConfiguration;
 };
 
+// @public
+export type OAuth2Error = {
+    error: string;
+    error_description: string;
+};
+
+// @public
+export type OryError = FlowError | OAuth2Error | {
+    error: GenericError;
+};
+
 // @public (undocumented)
 export function Recovery({ flow, config, children, components: flowOverrideComponents, }: PropsWithChildren<RecoveryFlowContextProps>): react_jsx_runtime.JSX.Element;
 
@@ -141,8 +155,8 @@ export type VerificationFlowContextProps = {
 
 // Warnings were encountered during analysis:
 //
-// dist/theme/default/index.d.ts:38:5 - (ae-forgotten-export) The symbol "OryFlowComponentOverrides" needs to be exported by the entry point index.d.ts
-// dist/theme/default/index.d.ts:39:5 - (ae-forgotten-export) The symbol "OryClientConfiguration" needs to be exported by the entry point index.d.ts
+// dist/theme/default/index.d.ts:51:5 - (ae-forgotten-export) The symbol "OryFlowComponentOverrides" needs to be exported by the entry point index.d.ts
+// dist/theme/default/index.d.ts:52:5 - (ae-forgotten-export) The symbol "OryClientConfiguration" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

packages/elements-react/api-report/elements-react.api.json

@@ -1181,7 +1181,7 @@
             },
             {
               "kind": "Content",
-              "text": ">;\n    };\n    project: {\n        registration_enabled: boolean;\n        verification_enabled: boolean;\n        recovery_enabled: boolean;\n        recovery_ui_url: string;\n        registration_ui_url: string;\n        verification_ui_url: string;\n        login_ui_url: string;\n    };\n    intl?: "
+              "text": ">;\n    };\n    project: {\n        registration_enabled: boolean;\n        verification_enabled: boolean;\n        recovery_enabled: boolean;\n        recovery_ui_url: string;\n        registration_ui_url: string;\n        verification_ui_url: string;\n        login_ui_url: string;\n        default_redirect_url?: string;\n    };\n    intl?: "
             },
             {
               "kind": "Reference",

packages/elements-react/api-report/elements-react.api.md

@@ -170,6 +170,7 @@ export type OryClientConfiguration = {
         registration_ui_url: string;
         verification_ui_url: string;
         login_ui_url: string;
+        default_redirect_url?: string;
     };
     intl?: IntlConfig;
 };

packages/elements-react/src/locales/de.json

@@ -259,5 +259,11 @@
   "property.password": "Passwort",
   "property.phone": "Telefon",
   "property.code": "Code",
-  "property.username": "Benutzername"
+  "property.username": "Benutzername",
+  "error.title.what-happened": "Was ist passiert?",
+  "error.footer.copy": "Kopieren",
+  "error.footer.text": "Bitte fügen Sie bei der Meldung dieses Fehlers die folgenden Informationen hinzu:",
+  "error.instructions": "Bitte versuchen Sie es in wenigen Minuten erneut oder wenden Sie sich an den Website-Betreiber.",
+  "error.title.what-can-i-do": "Was kann ich tun?",
+  "error.action.go-back": "Zurück"
 }

packages/elements-react/src/locales/en.json

@@ -259,5 +259,11 @@
   "property.phone": "phone",
   "property.username": "username",
   "property.identifier": "identifier",
-  "property.code": "code"
+  "property.code": "code",
+  "error.title.what-happened": "What happened?",
+  "error.title.what-can-i-do": "What can I do?",
+  "error.instructions": "Please try again in a few minutes or contact the website operator.",
+  "error.footer.text": "When reporting this error, please include the following information:",
+  "error.footer.copy": "Copy",
+  "error.action.go-back": "Go back"
 }

packages/elements-react/src/locales/es.json

@@ -10,7 +10,7 @@
   "error.back-button": "Regresar",
   "error.description": "Ocurrió un error con el siguiente mensaje:",
   "error.support-email-link": "Si el problema persiste, por favor contacte a <a>{contactSupportEmail}</a>",
-  "error.title": "Ocurrió un error",
+  "error.title": "",
   "error.title-internal-server-error": "Error Interno del Servidor",
   "error.title-not-found": "404 - Página no encontrada",
   "identities.messages.1010001": "Iniciar sesión",
@@ -259,5 +259,11 @@
   "property.identifier": "",
   "property.password": "",
   "property.phone": "",
-  "property.username": ""
+  "property.username": "",
+  "error.action.go-back": "",
+  "error.footer.copy": "",
+  "error.footer.text": "",
+  "error.instructions": "",
+  "error.title.what-can-i-do": "",
+  "error.title.what-happened": ""
 }

packages/elements-react/src/locales/fr.json

@@ -259,5 +259,11 @@
   "property.identifier": "",
   "property.password": "",
   "property.phone": "",
-  "property.username": ""
+  "property.username": "",
+  "error.action.go-back": "",
+  "error.footer.copy": "",
+  "error.footer.text": "",
+  "error.title.what-can-i-do": "",
+  "error.title.what-happened": "",
+  "error.instructions": ""
 }

packages/elements-react/src/locales/nl.json

@@ -259,5 +259,11 @@
   "property.identifier": "",
   "property.password": "",
   "property.phone": "",
-  "property.username": ""
+  "property.username": "",
+  "error.action.go-back": "",
+  "error.footer.copy": "",
+  "error.footer.text": "",
+  "error.title.what-can-i-do": "",
+  "error.title.what-happened": "",
+  "error.instructions": ""
 }

packages/elements-react/src/locales/pl.json

@@ -259,5 +259,11 @@
   "property.password": "",
   "property.phone": "",
   "property.username": "",
-  "property.identifier": ""
+  "property.identifier": "",
+  "error.action.go-back": "",
+  "error.footer.copy": "",
+  "error.footer.text": "",
+  "error.title.what-can-i-do": "",
+  "error.title.what-happened": "",
+  "error.instructions": ""
 }