diff --git a/.github/workflows/deploy-frontend.yml b/.github/workflows/deploy-frontend.yml index 36a7a2ded..4f96aedd6 100644 --- a/.github/workflows/deploy-frontend.yml +++ b/.github/workflows/deploy-frontend.yml @@ -98,6 +98,7 @@ jobs: VITE_VARA_ARCHIVE_NODE_ADDRESSES=${{ secrets.VITE_VARA_ARCHIVE_NODE_ADDRESSES }} VITE_ETH_BEACON_NODE_ADDRESSES=${{ secrets.VITE_ETH_BEACON_NODE_ADDRESSES }} VITE_ETH_MESSAGE_QUEUE_CONTRACT_ADDRESSES=${{ secrets.VITE_ETH_MESSAGE_QUEUE_CONTRACT_ADDRESSES }} + VITE_SENTRY_DSN=${{ secrets.VITE_SENTRY_DSN }} VITE_GTM_ID=${{ secrets.VITE_GTM_ID }} deploy-to-k8s: diff --git a/js/frontend/.env.example b/js/frontend/.env.example index b8496d558..b2decafdb 100644 --- a/js/frontend/.env.example +++ b/js/frontend/.env.example @@ -29,5 +29,6 @@ VITE_VARA_ARCHIVE_NODE_ADDRESSES= VITE_ETH_BEACON_NODE_ADDRESSES= VITE_ETH_MESSAGE_QUEUE_CONTRACT_ADDRESSES= -# analytics +# error tracking and analytics +VITE_SENTRY_DSN= VITE_GTM_ID= diff --git a/js/frontend/Dockerfile b/js/frontend/Dockerfile index 6ad447859..acfd1da35 100644 --- a/js/frontend/Dockerfile +++ b/js/frontend/Dockerfile @@ -29,6 +29,7 @@ ARG VITE_VARA_NODE_ADDRESSES \ VITE_VARA_ARCHIVE_NODE_ADDRESSES \ VITE_ETH_BEACON_NODE_ADDRESSES \ VITE_ETH_MESSAGE_QUEUE_CONTRACT_ADDRESSES \ + VITE_SENTRY_DSN \ VITE_GTM_ID ENV VITE_VARA_NODE_ADDRESSES=${VITE_VARA_NODE_ADDRESSES} \ @@ -46,6 +47,7 @@ ENV VITE_VARA_NODE_ADDRESSES=${VITE_VARA_NODE_ADDRESSES} \ VITE_VARA_ARCHIVE_NODE_ADDRESSES=${VITE_VARA_ARCHIVE_NODE_ADDRESSES} \ VITE_ETH_BEACON_NODE_ADDRESSES=${VITE_ETH_BEACON_NODE_ADDRESSES} \ VITE_ETH_MESSAGE_QUEUE_CONTRACT_ADDRESSES=${VITE_ETH_MESSAGE_QUEUE_CONTRACT_ADDRESSES} \ + VITE_SENTRY_DSN=${VITE_SENTRY_DSN} \ VITE_GTM_ID=${VITE_GTM_ID} diff --git a/js/frontend/package.json b/js/frontend/package.json index b358f7685..0141531f3 100644 --- a/js/frontend/package.json +++ b/js/frontend/package.json @@ -23,6 +23,7 @@ "@polkadot/react-identicon": "3.16.4", "@reown/appkit": "1.8.15", "@reown/appkit-adapter-wagmi": "1.8.15", + "@sentry/react": "10.40.0", "@tanstack/react-query": "5.90.12", "gear-bridge-common": "workspace:*", "graphql": "16.12.0", diff --git a/js/frontend/src/components/layout/error-boundary/error-boundary.tsx b/js/frontend/src/components/layout/error-boundary/error-boundary.tsx index 692fa7142..ca0472d1d 100644 --- a/js/frontend/src/components/layout/error-boundary/error-boundary.tsx +++ b/js/frontend/src/components/layout/error-boundary/error-boundary.tsx @@ -1,5 +1,6 @@ import { Button } from '@gear-js/vara-ui'; -import { Component, ReactNode } from 'react'; +import { ErrorBoundary as SentryErrorBoundary, FallbackRender } from '@sentry/react'; +import { ComponentProps, PropsWithChildren } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; import { useChangeEffect } from '@/hooks'; @@ -8,56 +9,27 @@ import { Container } from '../container'; import styles from './error-boundary.module.scss'; -type Props = { - children: ReactNode; -}; - -type FallbackProps = { - message: string; - reset: () => void; -}; - -type State = { - error: Error | null; -}; - -function Fallback({ message, reset }: FallbackProps) { +// eslint-disable-next-line @typescript-eslint/unbound-method +function Fallback({ error, resetError }: ComponentProps) { const { pathname } = useLocation(); const navigate = useNavigate(); useChangeEffect(() => { - reset(); + resetError(); }, [pathname]); return (

Oops! Something went wrong:

-

{message}

+

{error instanceof Error ? error.message : String(error)}