From a8200ce721ac791c4145bd5ffec8b1c976a60338 Mon Sep 17 00:00:00 2001
From: Ash <ash@sanity.io>
Date: Wed, 18 Sep 2024 14:43:09 +0100
Subject: [PATCH 1/6] chore(sanity): add return type to `StudioErrorBoundary`
 component

---
 packages/sanity/src/core/studio/StudioErrorBoundary.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/sanity/src/core/studio/StudioErrorBoundary.tsx b/packages/sanity/src/core/studio/StudioErrorBoundary.tsx
index b82524c5422..18e0c2401d5 100644
--- a/packages/sanity/src/core/studio/StudioErrorBoundary.tsx
+++ b/packages/sanity/src/core/studio/StudioErrorBoundary.tsx
@@ -9,7 +9,7 @@ import {
   Heading,
   Stack,
 } from '@sanity/ui'
-import {type ErrorInfo, type ReactNode, useCallback, useState} from 'react'
+import {type ComponentType, type ErrorInfo, type ReactNode, useCallback, useState} from 'react'
 import {useHotModuleReload} from 'use-hot-module-reload'
 
 import {Button} from '../../ui-components'
@@ -42,10 +42,10 @@ const INITIAL_STATE = {
   eventId: null,
 } satisfies ErrorBoundaryState
 
-export function StudioErrorBoundary({
+export const StudioErrorBoundary: ComponentType<StudioErrorBoundaryProps> = ({
   children,
   heading = 'An error occured',
-}: StudioErrorBoundaryProps) {
+}) => {
   const [{error, eventId}, setError] = useState<ErrorBoundaryState>(INITIAL_STATE)
 
   const message = isRecord(error) && typeof error.message === 'string' && error.message

From 01cff096d7ee2acec297d58d89b418fb8cc3ada8 Mon Sep 17 00:00:00 2001
From: Ash <ash@sanity.io>
Date: Tue, 24 Sep 2024 09:26:51 +0100
Subject: [PATCH 2/6] chore: fix spelling mistake

---
 packages/@sanity/types/src/transactionLog/types.ts            | 4 ++--
 .../@sanity/vision/src/containers/VisionErrorBoundary.tsx     | 2 +-
 packages/sanity/src/core/studio/StudioErrorBoundary.tsx       | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/@sanity/types/src/transactionLog/types.ts b/packages/@sanity/types/src/transactionLog/types.ts
index 5a003eba75f..bea66a05033 100644
--- a/packages/@sanity/types/src/transactionLog/types.ts
+++ b/packages/@sanity/types/src/transactionLog/types.ts
@@ -51,7 +51,7 @@ export interface TransactionLogEventWithEffects extends TransactionLogEvent {
  */
 export interface TransactionLogEventWithMutations extends TransactionLogEvent {
   /**
-   * Array of mutations that occured in this transaction. Note that the transaction
+   * Array of mutations that occurred in this transaction. Note that the transaction
    * log has an additional mutation type not typically seen in other APIs;
    * `createSquashed` ({@link CreateSquashedMutation}).
    */
@@ -83,7 +83,7 @@ export interface CreateSquashedMutation {
     createdAt: string
 
     /**
-     * The document as it exists after squashing has occured
+     * The document as it exists after squashing has occurred
      */
     document: {
       _id: string
diff --git a/packages/@sanity/vision/src/containers/VisionErrorBoundary.tsx b/packages/@sanity/vision/src/containers/VisionErrorBoundary.tsx
index a82ae4bf7ab..383be049414 100644
--- a/packages/@sanity/vision/src/containers/VisionErrorBoundary.tsx
+++ b/packages/@sanity/vision/src/containers/VisionErrorBoundary.tsx
@@ -69,7 +69,7 @@ export class VisionErrorBoundary extends Component<
               />
             </div>
 
-            <Heading>An error occured</Heading>
+            <Heading>An error occurred</Heading>
 
             <Card border radius={2} overflow="auto" padding={4} tone="inherit">
               <Stack space={4}>
diff --git a/packages/sanity/src/core/studio/StudioErrorBoundary.tsx b/packages/sanity/src/core/studio/StudioErrorBoundary.tsx
index 18e0c2401d5..724a7cfc5ec 100644
--- a/packages/sanity/src/core/studio/StudioErrorBoundary.tsx
+++ b/packages/sanity/src/core/studio/StudioErrorBoundary.tsx
@@ -44,7 +44,7 @@ const INITIAL_STATE = {
 
 export const StudioErrorBoundary: ComponentType<StudioErrorBoundaryProps> = ({
   children,
-  heading = 'An error occured',
+  heading = 'An error occurred',
 }) => {
   const [{error, eventId}, setError] = useState<ErrorBoundaryState>(INITIAL_STATE)
 

From 5e8d38d17c56fb6c07acc7fbc4c8a907be2d05fb Mon Sep 17 00:00:00 2001
From: Ash <ash@sanity.io>
Date: Wed, 18 Sep 2024 21:45:15 +0100
Subject: [PATCH 3/6] chore(sanity): remove unused parameter from `onRetry`
 function signature

---
 .../structure/panes/documentList/DocumentListPaneContent.tsx    | 2 +-
 packages/sanity/src/structure/panes/documentList/types.ts       | 2 +-
 .../sanity/src/structure/panes/documentList/useDocumentList.ts  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/sanity/src/structure/panes/documentList/DocumentListPaneContent.tsx b/packages/sanity/src/structure/panes/documentList/DocumentListPaneContent.tsx
index 4e670294c7b..b3e81cabc11 100644
--- a/packages/sanity/src/structure/panes/documentList/DocumentListPaneContent.tsx
+++ b/packages/sanity/src/structure/panes/documentList/DocumentListPaneContent.tsx
@@ -46,7 +46,7 @@ interface DocumentListPaneContentProps {
   layout?: GeneralPreviewLayoutKey
   loadingVariant?: LoadingVariant
   onListChange: () => void
-  onRetry?: (event: unknown) => void
+  onRetry?: () => void
   paneTitle: string
   searchInputElement: HTMLInputElement | null
   showIcons: boolean
diff --git a/packages/sanity/src/structure/panes/documentList/types.ts b/packages/sanity/src/structure/panes/documentList/types.ts
index 381556cff4e..fe6fbaa6023 100644
--- a/packages/sanity/src/structure/panes/documentList/types.ts
+++ b/packages/sanity/src/structure/panes/documentList/types.ts
@@ -13,7 +13,7 @@ export type SortOrder = {
 
 export interface QueryResult {
   error: {message: string} | null
-  onRetry?: (event: unknown) => void
+  onRetry?: () => void
   result: {documents: SanityDocumentLike[]} | null
 }
 
diff --git a/packages/sanity/src/structure/panes/documentList/useDocumentList.ts b/packages/sanity/src/structure/panes/documentList/useDocumentList.ts
index fb055fe9e9a..11a10c9d4f2 100644
--- a/packages/sanity/src/structure/panes/documentList/useDocumentList.ts
+++ b/packages/sanity/src/structure/panes/documentList/useDocumentList.ts
@@ -38,7 +38,7 @@ interface DocumentListState {
   isSearchReady: boolean
   items: DocumentListPaneItem[]
   onListChange: () => void
-  onRetry?: (event: unknown) => void
+  onRetry?: () => void
 }
 
 const INITIAL_QUERY_RESULTS: QueryResult = {

From 0e8763cb585b02a4a86dc62531c80ba02f0149ae Mon Sep 17 00:00:00 2001
From: Ash <ash@sanity.io>
Date: Wed, 18 Sep 2024 14:39:24 +0100
Subject: [PATCH 4/6] feat(sanity): add `ErrorActions` component

---
 .../components/errorActions/ErrorActions.tsx  | 47 ++++++++++++++
 .../src/core/components/errorActions/index.ts |  3 +
 .../core/components/errorActions/strings.ts   | 10 +++
 .../src/core/components/errorActions/types.ts |  7 ++
 .../errorActions/useCopyErrorDetails.test.ts  | 59 +++++++++++++++++
 .../errorActions/useCopyErrorDetails.ts       | 64 +++++++++++++++++++
 packages/sanity/src/core/components/index.ts  |  1 +
 7 files changed, 191 insertions(+)
 create mode 100644 packages/sanity/src/core/components/errorActions/ErrorActions.tsx
 create mode 100644 packages/sanity/src/core/components/errorActions/index.ts
 create mode 100644 packages/sanity/src/core/components/errorActions/strings.ts
 create mode 100644 packages/sanity/src/core/components/errorActions/types.ts
 create mode 100644 packages/sanity/src/core/components/errorActions/useCopyErrorDetails.test.ts
 create mode 100644 packages/sanity/src/core/components/errorActions/useCopyErrorDetails.ts

diff --git a/packages/sanity/src/core/components/errorActions/ErrorActions.tsx b/packages/sanity/src/core/components/errorActions/ErrorActions.tsx
new file mode 100644
index 00000000000..60b0593f5e8
--- /dev/null
+++ b/packages/sanity/src/core/components/errorActions/ErrorActions.tsx
@@ -0,0 +1,47 @@
+import {CopyIcon, SyncIcon} from '@sanity/icons'
+import {Inline} from '@sanity/ui'
+import {type ComponentProps, type ComponentType} from 'react'
+
+import {Button, Tooltip} from '../../../ui-components'
+import {strings} from './strings'
+import {useCopyErrorDetails} from './useCopyErrorDetails'
+
+/**
+ * @internal
+ */
+export interface ErrorActionsProps extends Pick<ComponentProps<typeof Button>, 'size'> {
+  error: unknown
+  eventId: string | null
+  onRetry?: () => void
+}
+
+/**
+ * @internal
+ */
+export const ErrorActions: ComponentType<ErrorActionsProps> = ({error, eventId, onRetry, size}) => {
+  const copyErrorDetails = useCopyErrorDetails(error, eventId)
+
+  return (
+    <Inline space={3}>
+      {onRetry && (
+        <Button
+          onClick={onRetry}
+          text={strings['retry.title']}
+          tone="primary"
+          icon={SyncIcon}
+          size={size}
+        />
+      )}
+      <Tooltip content={strings['copy-error-details.description']}>
+        <Button
+          onClick={copyErrorDetails}
+          text={strings['copy-error-details.title']}
+          tone="default"
+          mode="ghost"
+          icon={CopyIcon}
+          size={size}
+        />
+      </Tooltip>
+    </Inline>
+  )
+}
diff --git a/packages/sanity/src/core/components/errorActions/index.ts b/packages/sanity/src/core/components/errorActions/index.ts
new file mode 100644
index 00000000000..c3fc9f402cc
--- /dev/null
+++ b/packages/sanity/src/core/components/errorActions/index.ts
@@ -0,0 +1,3 @@
+export * from './ErrorActions'
+export * from './types'
+export * from './useCopyErrorDetails'
diff --git a/packages/sanity/src/core/components/errorActions/strings.ts b/packages/sanity/src/core/components/errorActions/strings.ts
new file mode 100644
index 00000000000..d483897f51c
--- /dev/null
+++ b/packages/sanity/src/core/components/errorActions/strings.ts
@@ -0,0 +1,10 @@
+// These strings are not internationalized because `ErrorActions` is used inside
+// `StudioErrorBoundary`, which is rendered outside of `LocaleProvider`.
+export const strings = {
+  'retry.title': 'Retry',
+  'copy-error-details.description': 'These technical details may be useful for developers.',
+  'copy-error-details.title': 'Copy error details',
+  'copy-error-details.toast.get-failed': 'Failed to get error details',
+  'copy-error-details.toast.copy-failed': 'Failed to copy error details',
+  'copy-error-details.toast.succeeded': 'Copied error details to clipboard',
+} as const
diff --git a/packages/sanity/src/core/components/errorActions/types.ts b/packages/sanity/src/core/components/errorActions/types.ts
new file mode 100644
index 00000000000..5b546a7e2e0
--- /dev/null
+++ b/packages/sanity/src/core/components/errorActions/types.ts
@@ -0,0 +1,7 @@
+/**
+ * @internal
+ */
+export interface ErrorWithId {
+  error: unknown
+  eventId?: string | null
+}
diff --git a/packages/sanity/src/core/components/errorActions/useCopyErrorDetails.test.ts b/packages/sanity/src/core/components/errorActions/useCopyErrorDetails.test.ts
new file mode 100644
index 00000000000..c58be50d6b9
--- /dev/null
+++ b/packages/sanity/src/core/components/errorActions/useCopyErrorDetails.test.ts
@@ -0,0 +1,59 @@
+import {describe, expect, it} from '@jest/globals'
+import {firstValueFrom, map, of} from 'rxjs'
+
+import {type ErrorWithId} from './types'
+import {serializeError} from './useCopyErrorDetails'
+
+describe('serializeError', () => {
+  it('includes error properties if an instance of `Error` is provided', async () => {
+    const error = await reassembleError({
+      error: new Error('Test', {
+        cause: 'Unit test',
+      }),
+    })
+
+    expect((error.error as any).message).toBe('Test')
+    expect((error.error as any).cause).toBe('Unit test')
+  })
+
+  it('includes record-like errors', async () => {
+    const error = await reassembleError({
+      error: {
+        someProperty: 'someValue',
+      },
+    })
+
+    expect((error.error as any).someProperty).toBe('someValue')
+  })
+
+  const nonRecordCases = [123, 'someString', ['some', 'array'], Symbol('Some error')]
+
+  it.each(nonRecordCases)('does not include non-record errors', async (errorCase) => {
+    const {error} = await reassembleError({
+      error: errorCase,
+    })
+    expect(error).toBeUndefined()
+  })
+
+  it('includes event id if one is provided', async () => {
+    const {eventId} = await reassembleError({
+      error: new Error(),
+      eventId: '123',
+    })
+
+    expect(eventId).toBe('123')
+  })
+})
+
+/**
+ * Helper that serializes and then immediately deserializes the provided error so that assertions
+ * about the serialization process can be made.
+ */
+function reassembleError(error: ErrorWithId): Promise<ErrorWithId> {
+  return firstValueFrom(
+    of(error).pipe(
+      serializeError(),
+      map((serializedError) => JSON.parse(serializedError)),
+    ),
+  )
+}
diff --git a/packages/sanity/src/core/components/errorActions/useCopyErrorDetails.ts b/packages/sanity/src/core/components/errorActions/useCopyErrorDetails.ts
new file mode 100644
index 00000000000..98b05cd8823
--- /dev/null
+++ b/packages/sanity/src/core/components/errorActions/useCopyErrorDetails.ts
@@ -0,0 +1,64 @@
+import {useToast} from '@sanity/ui'
+import {pick} from 'lodash'
+import {useCallback} from 'react'
+import {catchError, EMPTY, map, of, type OperatorFunction, tap} from 'rxjs'
+
+import {isRecord} from '../../util'
+import {strings} from './strings'
+import {type ErrorWithId} from './types'
+
+const TOAST_ID = 'copyErrorDetails'
+
+/**
+ * @internal
+ */
+export function useCopyErrorDetails(error: unknown, eventId?: string | null): () => void {
+  const toast = useToast()
+
+  return useCallback(() => {
+    of<ErrorWithId>({error, eventId})
+      .pipe(
+        serializeError(),
+        catchError((serializeErrorError) => {
+          console.error(serializeErrorError)
+          toast.push({
+            status: 'error',
+            title: strings['copy-error-details.toast.get-failed'],
+            id: TOAST_ID,
+          })
+          return EMPTY
+        }),
+        tap((errorDetailsString) => {
+          navigator.clipboard.writeText(errorDetailsString)
+          toast.push({
+            status: 'success',
+            title: strings['copy-error-details.toast.succeeded'],
+            id: TOAST_ID,
+          })
+        }),
+        catchError((copyErrorError) => {
+          console.error(copyErrorError)
+          toast.push({
+            status: 'error',
+            title: strings['copy-error-details.toast.copy-failed'],
+            id: TOAST_ID,
+          })
+          return EMPTY
+        }),
+      )
+      .subscribe()
+  }, [error, eventId, toast])
+}
+
+/**
+ * @internal
+ */
+export function serializeError(): OperatorFunction<ErrorWithId, string> {
+  return map<ErrorWithId, string>(({error, eventId}) => {
+    // Extract the non-enumerable properties of the provided `error` object. This is particularly
+    // useful if the provided `error` value is an instance of `Error`, whose properties are
+    // non-enumerable.
+    const errorInfo = isRecord(error) ? pick(error, Object.getOwnPropertyNames(error)) : undefined
+    return JSON.stringify({error: errorInfo, eventId}, null, 2)
+  })
+}
diff --git a/packages/sanity/src/core/components/index.ts b/packages/sanity/src/core/components/index.ts
index 5ffdd9525c6..c5435438dfe 100644
--- a/packages/sanity/src/core/components/index.ts
+++ b/packages/sanity/src/core/components/index.ts
@@ -10,6 +10,7 @@ export * from './contextMenuButton'
 export * from './DefaultDocument'
 export * from './documentStatus'
 export * from './documentStatusIndicator'
+export * from './errorActions'
 export * from './globalErrorHandler'
 export * from './hookCollection'
 export * from './Hotkeys'

From 023aea49f25626f849e9059b66129b42d1ddf75b Mon Sep 17 00:00:00 2001
From: Ash <ash@sanity.io>
Date: Wed, 18 Sep 2024 14:55:21 +0100
Subject: [PATCH 5/6] feat(sanity): refine `StudioErrorBoundary` component UI

---
 .../src/core/studio/StudioErrorBoundary.tsx   | 67 ++++++++++---------
 1 file changed, 36 insertions(+), 31 deletions(-)

diff --git a/packages/sanity/src/core/studio/StudioErrorBoundary.tsx b/packages/sanity/src/core/studio/StudioErrorBoundary.tsx
index 724a7cfc5ec..7c26dc8179f 100644
--- a/packages/sanity/src/core/studio/StudioErrorBoundary.tsx
+++ b/packages/sanity/src/core/studio/StudioErrorBoundary.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable i18next/no-literal-string */
 /* eslint-disable @sanity/i18n/no-attribute-string-literals */
 import {
+  Box,
   Card,
   Code,
   Container,
@@ -8,11 +9,13 @@ import {
   type ErrorBoundaryProps,
   Heading,
   Stack,
+  Text,
 } from '@sanity/ui'
 import {type ComponentType, type ErrorInfo, type ReactNode, useCallback, useState} from 'react'
+import {ErrorActions, isDev, isProd} from 'sanity'
+import {styled} from 'styled-components'
 import {useHotModuleReload} from 'use-hot-module-reload'
 
-import {Button} from '../../ui-components'
 import {SchemaError} from '../config'
 import {errorReporter} from '../error/errorReporter'
 import {CorsOriginError} from '../store'
@@ -42,15 +45,17 @@ const INITIAL_STATE = {
   eventId: null,
 } satisfies ErrorBoundaryState
 
+const View = styled(Box)`
+  align-items: center;
+`
+
 export const StudioErrorBoundary: ComponentType<StudioErrorBoundaryProps> = ({
   children,
   heading = 'An error occurred',
 }) => {
   const [{error, eventId}, setError] = useState<ErrorBoundaryState>(INITIAL_STATE)
-
   const message = isRecord(error) && typeof error.message === 'string' && error.message
   const stack = isRecord(error) && typeof error.stack === 'string' && error.stack
-
   const handleResetError = useCallback(() => setError(INITIAL_STATE), [])
   const handleCatchError: ErrorBoundaryProps['onCatch'] = useCallback((params) => {
     const report = errorReporter.reportError(params.error, {
@@ -80,37 +85,37 @@ export const StudioErrorBoundary: ComponentType<StudioErrorBoundaryProps> = ({
   }
 
   return (
-    <Card
-      height="fill"
-      overflow="auto"
-      paddingY={[4, 5, 6, 7]}
-      paddingX={4}
-      sizing="border"
-      tone="critical"
-    >
-      <Container width={3}>
-        <Stack space={4}>
-          {/* TODO: better error boundary */}
-
-          <Heading>{heading}</Heading>
-
-          <div>
-            <Button onClick={handleResetError} text="Retry" tone="default" />
-          </div>
-
-          <Card border radius={2} overflow="auto" padding={4} tone="inherit">
+    <Card height="fill" overflow="auto" paddingY={[4, 5, 6, 7]} paddingX={4} sizing="border">
+      <View display="flex" height="fill">
+        <Container width={3}>
+          <Stack space={6}>
             <Stack space={4}>
-              {message && (
-                <Code size={1}>
-                  <strong>Error: {message}</strong>
-                </Code>
+              <Heading>{heading}</Heading>
+              <Text>An error occurred that Sanity Studio was unable to recover from.</Text>
+              {isProd && (
+                <Text>
+                  <strong>To report this error,</strong> copy the error details and share them with
+                  your development team or Sanity Support.
+                </Text>
+              )}
+              {isDev && (
+                <Card border radius={2} overflow="auto" padding={4} tone="critical">
+                  <Stack space={4}>
+                    {message && (
+                      <Code size={1}>
+                        <strong>Error: {message}</strong>
+                      </Code>
+                    )}
+                    {stack && <Code size={1}>{stack}</Code>}
+                    {eventId && <Code size={1}>Event ID: {eventId}</Code>}
+                  </Stack>
+                </Card>
               )}
-              {stack && <Code size={1}>{stack}</Code>}
-              {eventId && <Code size={1}>Event ID: {eventId}</Code>}
             </Stack>
-          </Card>
-        </Stack>
-      </Container>
+            <ErrorActions error={error} eventId={eventId} onRetry={handleResetError} size="large" />
+          </Stack>
+        </Container>
+      </View>
     </Card>
   )
 }

From 71919a3e92e1d3fc5332c4d349b34ebe112ffb39 Mon Sep 17 00:00:00 2001
From: Ash <ash@sanity.io>
Date: Wed, 18 Sep 2024 21:48:00 +0100
Subject: [PATCH 6/6] feat(sanity): add "Copy error details" button to document
 list error UI

---
 packages/sanity/src/structure/i18n/resources.ts   |  2 --
 .../documentList/DocumentListPaneContent.tsx      | 15 ++-------------
 2 files changed, 2 insertions(+), 15 deletions(-)

diff --git a/packages/sanity/src/structure/i18n/resources.ts b/packages/sanity/src/structure/i18n/resources.ts
index 800fda3727d..be49b3c61e2 100644
--- a/packages/sanity/src/structure/i18n/resources.ts
+++ b/packages/sanity/src/structure/i18n/resources.ts
@@ -320,8 +320,6 @@ const structureLocaleStrings = defineLocalesResources('structure', {
   'panes.document-header-title.new.text': 'New {{schemaType}}',
   /** The text used in the document header title if no other title can be determined */
   'panes.document-header-title.untitled.text': 'Untitled',
-  /** The text for the retry button on the document list pane */
-  'panes.document-list-pane.error.retry-button.text': 'Retry',
   /** The error text on the document list pane */
   'panes.document-list-pane.error.text': 'Error: <Code>{{error}}</Code>',
   /** The error title on the document list pane */
diff --git a/packages/sanity/src/structure/panes/documentList/DocumentListPaneContent.tsx b/packages/sanity/src/structure/panes/documentList/DocumentListPaneContent.tsx
index b3e81cabc11..30d34900fb6 100644
--- a/packages/sanity/src/structure/panes/documentList/DocumentListPaneContent.tsx
+++ b/packages/sanity/src/structure/panes/documentList/DocumentListPaneContent.tsx
@@ -1,10 +1,10 @@
-import {SyncIcon} from '@sanity/icons'
 import {type SanityDocument} from '@sanity/types'
 import {Box, Container, Flex, Heading, Stack, Text} from '@sanity/ui'
 import {useCallback, useEffect, useMemo, useState} from 'react'
 import {
   CommandList,
   type CommandListRenderItemCallback,
+  ErrorActions,
   type GeneralPreviewLayoutKey,
   getPublishedId,
   LoadingBlock,
@@ -15,7 +15,6 @@ import {
 } from 'sanity'
 import {styled} from 'styled-components'
 
-import {Button} from '../../../ui-components'
 import {Delay, PaneContent, PaneItem, usePane, usePaneLayout} from '../../components'
 import {structureLocaleNamespace} from '../../i18n'
 import {FULL_LIST_LIMIT} from './constants'
@@ -198,17 +197,7 @@ export function DocumentListPaneContent(props: DocumentListPaneContentProps) {
                   components={{Code: ({children}) => <code>{children}</code>}}
                 />
               </Text>
-
-              {onRetry && (
-                <Box>
-                  <Button
-                    icon={SyncIcon}
-                    onClick={onRetry}
-                    text={t('panes.document-list-pane.error.retry-button.text')}
-                    tone="primary"
-                  />
-                </Box>
-              )}
+              <ErrorActions error={error} eventId={null} onRetry={onRetry} />
             </Stack>
           </Container>
         </Flex>