Third-party Integrations (Sentry, Mixpanel, Firebase)
Wire in error monitoring (Sentry) and product analytics (Mixpanel) so you can see crashes and user behaviour in production.
Production apps are blind without observability tooling. Sentry captures uncaught exceptions, unhandled promise rejections, and performance traces, then groups them into actionable issues with stack traces and source maps. You initialize it once at the app entry point, wrap your tree in a Sentry.ErrorBoundary to catch render-time crashes, and call Sentry.captureException(error) to manually report errors you catch yourself.
Mixpanel answers a different question: not 'what broke?' but 'what are users doing?'. You track named events with properties (the amount and category of an expense, the source), identify the logged-in user so events tie to a person, and set people properties (name, plan) for segmentation. Together, Sentry tells you about failures and Mixpanel tells you about behaviour.
A few operational notes apply to both SDKs. Configuration like the Sentry DSN and Mixpanel token comes from environment variables (import.meta.env.VITE_* in a Vite app) so each environment points at the right project. Sentry's tracesSampleRate controls how many transactions are recorded for performance monitoring — 0.1 means 10%, which keeps cost and volume in check. Upload source maps at build time so the minified stack traces Sentry receives map back to your original code.
| Tool | What it answers | Core API |
|---|---|---|
| Sentry | What broke, and where in the code | init, ErrorBoundary, captureException |
| Mixpanel | What users did, and who they are | init, track, identify, people.set |
Sentry is the frontend equivalent of a server-side error aggregator like a logging/APM stack (think Sentry or an ELK pipeline you already pipe Java stack traces into) — it groups exceptions and gives you stack traces. Mixpanel is closer to product/event telemetry: structured business events you emit deliberately, like publishing domain events to a message bus for downstream analytics rather than raw application logs.
- Sentry catches and groups errors with stack traces; Mixpanel records named product events with properties — they are complementary, not interchangeable.
- Use `tracesSampleRate` to sample performance transactions (e.g. 0.1 = 10%) so you control data volume and cost.
- Upload source maps at build time so minified production stack traces resolve back to readable source.
- Store the Sentry DSN and Mixpanel token in environment variables, scoped per environment, never hardcoded.
Worked Code
// Sentry — error monitoring
import * as Sentry from '@sentry/react';
Sentry.init({
dsn: import.meta.env.VITE_SENTRY_DSN,
environment: import.meta.env.MODE,
tracesSampleRate: 0.1, // 10% of transactions
});
// Wrap your app
<Sentry.ErrorBoundary fallback={<ErrorPage />}>
<App />
</Sentry.ErrorBoundary>
// Manual error reporting
try {
await riskyOperation();
} catch (error) {
Sentry.captureException(error);
}// Mixpanel — product analytics
import mixpanel from 'mixpanel-browser';
mixpanel.init(import.meta.env.VITE_MIXPANEL_TOKEN);
// Track events
mixpanel.track('Expense Submitted', {
amount: 250,
category: 'travel',
source: 'mobile',
});
mixpanel.identify(user.id);
mixpanel.people.set({ name: user.name, plan: 'enterprise' });Interview-Ready Q&A
By uploading source maps generated at build time. The browser only ships minified, bundled JavaScript, so a raw production stack trace points at meaningless line/column numbers. Sentry stores the source maps for each release and uses them to translate the minified frames back to your original files and line numbers. The key is associating the maps with the correct release so the symbolication matches the deployed bundle; you typically keep source maps private (uploaded to Sentry) rather than serving them publicly.
- 1Sentry = errors/crashes with stack traces; Mixpanel = product behaviour events. Use both.
- 2Upload source maps per release so minified production traces become readable.
- 3Sample performance traces (tracesSampleRate) and keep DSN/token in env vars per environment.