[ Remix ] Incorrect error reporting #10455
Description
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/remix
SDK Version
7.93.0
Framework Version
No response
Link to Sentry event
No response
SDK Setup
In monitoring.client.ts:
export function init() {
Sentry.init({
dsn: ENV.SENTRY_DSN,
environment: ENV.MODE,
integrations: [
new Sentry.BrowserTracing({
routingInstrumentation: Sentry.remixRouterInstrumentation(
useEffect,
useLocation,
useMatches,
),
}),
// Replay is only available in the client
new Sentry.Replay({
maskAllText: false,
maskAllInputs: false,
}),
new Sentry.BrowserProfilingIntegration(),
],
// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for performance monitoring.
// We recommend adjusting this value in production
tracesSampleRate: 1.0,
// Capture Replay for 10% of all sessions,
// plus for 100% of sessions with an error
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
});
}In monitoring.server.ts:
export function init() {
Sentry.init({
dsn: ENV.SENTRY_DSN,
environment: ENV.MODE,
tracesSampleRate: ENV.MODE === "production" ? 1 : 0,
denyUrls: [
/healthcheck/,
// TODO: be smarter about the public assets...
/\/build\//,
/\/favicons\//,
/\/images\//,
/\/favicon.ico/,
/\/site\.webmanifest/,
],
integrations: [
new Sentry.Integrations.Http({ tracing: true }),
new Sentry.Integrations.Prisma({ client: prisma }),
new ProfilingIntegration(),
],
beforeSendTransaction(event) {
// ignore all healthcheck related transactions
if (event.request?.headers?.["X-Healthcheck"] === "true") return null;
return event;
},
});
}In entry.client.tsx:
if (enabled && ENV.SENTRY_DSN) {
import("./utils/monitoring.client").then(({ init }) => init());
}In entry.server.tsx:
if (enabled && ENV.SENTRY_DSN) {
console.log("Sentry enabled (server): ", enabled);
import("./utils/monitoring.server").then(({ init }) => init());
}In root.tsx:
export function ErrorBoundary({ error }: { error: Error }) {
Sentry.captureRemixErrorBoundaryError(error);
return (
<html className="h-full">
<head>
<Meta />
<Links />
</head>
<body className="h-full w-full bg-white">
<GeneralErrorBoundary />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
}
export default Sentry.withSentry(App);In error.tsx:
export default function Error() {
return (
<div className="flex flex-col gap-y-3">
<Text variant="h1">This is the error page</Text>
<Text variant="h2">
Use this button to test client side errors in sentry
</Text>
<button
type="button"
onClick={() => {
//@ts-ignore
throw new Error("Sentry Frontend Error");
}}
>
Throw error
</button>
<Text variant="h2">Use this to test server side error in sentry</Text>
<Form method="post" className="flex flex-col">
<input type="text" />
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
</div>
);
}I'm adding the full app in the shadow ticket for debugging.
Steps to Reproduce
- Run npm install
- Run npm run dev (
dotenv -e .env -- npm run start:dev-server) - Click on the button to throw a frontend error
(Optionally we can build the app and upload its source maps to Sentry)
Expected Result
The captured event in Sentry correctly describes the Error("Sentry Frontend Error") that we threw, and the stack trace points to the line where we call throw new Error("Sentry Frontend Error");
Actual Result
Instead, we get an error with descripton Object captured as exception with keys:, and the stack trace points to Sentry's package.
The app and the event link are shared in the shadow ticket.
┆Issue is synchronized with this Jira Improvement by Unito
Metadata
Metadata
Assignees
Projects
Status
Status