[Crash-Report Modal] User feedback not linked to Sentry error

[AnselmeDor]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/react

SDK Version

7.80.0

Framework Version

React 17.0.2

Link to Sentry event

No response

SDK Setup

!!! SDK is v7.80.0

import * as Sentry from '@sentry/react'
import { matchPath, useHistory } from 'react-router-dom'
import { ExtraErrorData } from '@sentry/integrations'
import { RoutePath } from './routes/RoutePath'
import { version } from '../package.json'

const routes = Object.values(RoutePath).map(path => ({ path }))

Sentry.init({
    enabled: true,
    dsn: REACT_APP_DSN,
    integrations: [
        new Sentry.BrowserTracing({
            routingInstrumentation: Sentry.reactRouterV5Instrumentation(useHistory, routes, matchPath),
        }),
        new ExtraErrorData({ depth: 5 }),
    ],
    tracesSampleRate: 1.0,
    tracePropagationTargets: [
        // ...
    ],
    replaysOnErrorSampleRate: 1.0,
    environment: process.env.NODE_ENV === 'production' ? process.env.REACT_APP_ENV_NAME : process.env.NODE_ENV,
    release: version,
})

if (process.env.REACT_APP_ENV_NAME === 'production' || process.env.REACT_APP_ENV_NAME === 'sandbox') {
    Sentry.addIntegration(new Sentry.Replay())
}

Steps to Reproduce

I'm using Error boundary from Sentry like so :

import React, { useContext } from 'react'
import { ErrorBoundary } from '@sentry/react'
import SideMenu from './SideMenu'
import NavigationBar from './NavigationBar'
import ErrorToast from '../ui/errors/ErrorToast'
import Routes from '../../routes/Routes'
import AppContext from '../../contexts/AppContext'
import ErrorPage from '../../pages/ErrorPage'
import SessionTimeout from '../login/SessionTimeout'
import FullScreenLoader from './FullScreenLoader'

const AppContent = () => {
    const { isLoggedIn, isFullScreenLoading } = useContext(AppContext)

    return (
        <>
            <SideMenu />
            <div style={{ paddingLeft: isLoggedIn ? '60px' : 0, width: '100%' }}>
                {isLoggedIn && <SessionTimeout countDownDurationInSec={60} />}
                <NavigationBar />
                <ErrorToast />
                {isFullScreenLoading && <FullScreenLoader />}
                <ErrorBoundary fallback={({ resetError, eventId }) => <ErrorPage resetError={resetError} eventId={eventId} />}>
                    <Routes />
                </ErrorBoundary>
            </div>
        </>
    )
}

export default AppContent

Here is my ErrorPage :

import React, { useEffect, useRef } from 'react'
import { Button, Container } from 'react-bootstrap'
import { useHistory } from 'react-router-dom'
import { showReportDialog } from '@sentry/react'
import BackButton from '../components/ui/buttons/BackButton'

interface Props {
    resetError: () => void
    eventId: string
}

const ErrorPage = ({ resetError, eventId }: Props) => {
    const history = useHistory()
    const errorLocation = useRef(history.location.pathname)

    useEffect(() => {
        if (history.location.pathname !== errorLocation.current) {
            resetError()
        }
    }, [history.location.pathname])

    const handleClick = () => {
        showReportDialog({ eventId })
    }

    return (
        <Container>
            <div className="page-title-box">
                <h2 className="page-title">It looks like something went wrong... </h2>
            </div>
            <p>
                We apologize for the inconvenience, but it seems that something unexpected has occurred.
            </p>
            <p>
                Our team is actively addressing the issue, and we appreciate your patience as we work to resolve it.
            </p>
            <p>
                In the meantime, you have the option to go back or provide us with valuable feedback to assist us in improving.
            </p>
            <div className="d-flex gap-2 mt-3">
                <BackButton />
                <Button onClick={handleClick}>Report Feedback</Button>
            </div>
        </Container>
    )
}
export default ErrorPage

The issue I'm having is capturing the user feedback.
The feedback itself is captured, but the eventId is not the same in the error in sentry and in the report dialog.

Expected Result

I was expecting the ids to be the same (actual error send to Sentry and prop passed to the my custom fallback ErrorPage) so that I could link the error and the user feedback (if provided).

Actual Result

It is not linked :

The issue has this id :

The user feedback (is captured but is not linked) has this id :

As you can see, the id are different, any idea why ?

FYI : This has been tried in dev but also in prod.

Thanks to y'all!

[lforst]

Do you have react strict mode enabled?

[AnselmeDor]

@lforst We do have strict mode enabled, but this issue is also happening in production.

EDIT : I disabled the strict mode, sentry issue is still not linked with the user feedback.

[lforst]

@LeAnsman Alright. I think I need to reproduce this to see how to fix this. If you want to speed up the process you could provide a small reproduction example in a GitHub repo, otherwise I'll get to it myself in the upcoming weeks.

[stratty7]

Running into the same issue. Very similar implementation with ErrorBoundary and a fallback with showReportDialog. Haven't changed any of our sentry config recently and worked as expected up until around the time the new user-feedback ui got introduced.