keepcalculator

06 Numbers and Powers

Sentry vs custom backend for React error reporting

Card No. 06·43798 · Updated · Standard formula, shown below

For most React applications, Sentry is the better choice than a custom error-reporting backend because it provides source maps, release tracking, and a full monitoring UI out of the box, saving months of engineering time. A custom backend only makes sense when you have strict data-residency rules, a very unusual event schema, or a team already skilled in building and maintaining observability infrastructure.

What Sentry Actually Does for React

Sentry is a hosted error-monitoring service that captures JavaScript exceptions, unhandled promise rejections, and console errors from your React app. Its SDK attaches global handlers and wraps React’s error boundaries so you can report component-level failures. Beyond just recording the error message, Sentry collects:

  • Stack traces with file names and line numbers, deminified via uploaded source maps.
  • Breadcrumbs – a chronological log of user actions, network requests, and console calls leading up to the error.
  • Context – device, browser, OS, URL, and custom tags you attach (e.g., user ID, plan type).
  • Release and environment – so you can see if a bug started after a deploy.
  • Session replay (on paid plans) – video-like playback of the user’s session before the crash.

You integrate it by installing @sentry/react and calling Sentry.init() with your DSN. For error boundaries, you wrap your component tree with Sentry.ErrorBoundary or use componentDidCatch and report manually. Source map upload is handled by the Sentry CLI or a webpack plugin during build, so stack traces point to your original TypeScript/JSX code instead of minified bundles.

What a Custom Backend Would Look Like

A custom error-reporting backend is a service you build and operate yourself. At minimum it needs:

  • An HTTP endpoint that accepts error payloads (usually JSON POSTs from your frontend).
  • A database to store errors, with indexes on message, stack trace, URL, and timestamp.
  • A deduplication mechanism – grouping identical errors by fingerprint (e.g., hash of stack trace) so you don’t get 10,000 rows for the same bug.
  • A UI or dashboard to search, filter, and view error details.
  • Alerting – email, Slack, or PagerDuty when a new error appears or a threshold is crossed.
  • Source map storage and a service to translate minified stack traces back to original code.
  • Authentication, rate limiting, and data retention policies.

You could technically skip the UI and use a spreadsheet, but that’s not “error reporting� in a practical sense. The moment you need to search across thousands of errors, you need a database and a query layer. Many teams start with a simple Express server and Postgres, then gradually add features. That gradual path is where the hidden costs accumulate.

Cost Comparison: Time, Money, and Opportunity

Sentry has a free tier that includes 5,000 errors per month (as of 2025) and 1,000,000 spans for performance monitoring. Paid plans start around $26 per month for teams, with volume-based pricing. For a small app, the free tier is often enough. For a large app, you might pay hundreds or thousands per month depending on error volume.

A custom backend has no per-event fee, but the real cost is engineering time. Building a production-ready error tracker with grouping, source maps, and alerting takes at least 2-3 months of a senior engineer’s time. Hosting, database, and monitoring add a few hundred dollars per month. But the bigger cost is ongoing maintenance: you must patch dependencies, handle scaling, and debug your error tracker when it fails. That’s time not spent on your product.

Opportunity cost is often the deciding factor. A startup with a small team should not be building an error tracker unless error monitoring is their product. An enterprise with compliance constraints might find that building in-house is the only way to meet data-residency requirements.

When a Custom Backend Is the Right Call

There are legitimate reasons to build your own error reporting:

  • Data residency / privacy: Sentry’s default US or EU cloud may not satisfy regulations like GDPR, HIPAA, or internal policies that prohibit sending user data to third parties. Sentry does offer self-hosted options (open-source on-prem), but that still requires you to run and maintain it – which is close to building your own.
  • Extreme event volume: If your app generates billions of errors per day (e.g., a browser extension on millions of devices), per-event costs in hosted services become prohibitive. A custom pipeline with sampling and aggregation might be cheaper.
  • Custom data schema: If you need to attach large binary payloads, trace distributed transactions across your own services, or store error data in a specific format for internal ML models, a generic tool may not fit.
  • Existing infrastructure: If your team already runs Kafka, Elasticsearch, and Grafana, adding an error topic is a small incremental cost. You can reuse the same stack for logs and errors.

In those cases, a custom backend gives you full control. But you should still consider Sentry’s self-hosted option first – it gives you the same features without per-event pricing, at the cost of maintaining a Docker deployment.

Common Problems with Each Approach

With Sentry, developers often hit these issues:

  • Source maps misconfigured: If you don’t upload source maps, stack traces show minified code, which is nearly useless. You must set up the webpack plugin or CLI carefully.
  • Noise and alert fatigue: Without proper grouping or ignore rules, you get hundreds of alerts for the same underlying issue. Sentry’s grouping is good but not perfect – you may need to merge or split issues manually.
  • Privacy leaks: By default, Sentry captures URL, user-agent, and possibly user data if you attach it. You must scrub PII (personally identifiable information) using beforeSend hooks.
  • Performance overhead: The SDK adds a small amount of JavaScript to your bundle and slight runtime cost. It’s usually negligible, but on very low-end devices you might notice.

With a custom backend, the problems are different:

  • Missing context: You only collect what you think to send. If you forget to include the user’s route or a network request, you won’t have it when debugging.
  • Grouping is hard: Two identical errors from different browsers may have slightly different stack traces (different line numbers due to minification). Writing a good fingerprinting algorithm is non-trivial.
  • Alerting is a project: You need to define thresholds, deduplicate alerts, and handle flapping. That’s another system to build.
  • Scaling: When your app grows, your error backend must handle spikes. A single Postgres instance may choke under a burst of errors from a bad deploy.

How to Choose: A Decision Framework

Ask these questions in order:

  1. Do you have a compliance requirement that forbids third-party data processing? If yes, consider Sentry self-hosted first; if that’s not viable, then build custom.
  2. Is error monitoring your core product? If yes, build custom. If no, use Sentry.
  3. Do you have a dedicated infrastructure engineer who can maintain a 24/7 service? If no, use Sentry.
  4. Is your error volume over 1 million per day? If yes, custom might be cheaper. If no, Sentry’s cost is likely acceptable.
  5. Do you need deep integration with your internal tracing or logging systems? If you already have a unified observability platform, custom may fit. Otherwise, Sentry integrates with many tools via webhooks.

For most teams, the answer is Sentry. The free tier is generous, and the paid plans are cheaper than the engineering time to build even a minimal tracker. The only time custom is clearly better is when you have a hard data-residency requirement and cannot run Sentry on-prem.

Frequently Asked Questions

Can I use Sentry with React Native?

Yes, Sentry has a dedicated React Native SDK that captures native crashes (iOS/Android) and JavaScript errors. It works with both Expo and bare React Native projects. You need to configure the native layer separately, but the setup is well-documented.

How do I upload source maps to Sentry?

You use the Sentry CLI or the @sentry/webpack-plugin. In your build script, run sentry-cli releases files VERSION upload-sourcemaps ./build. The plugin does this automatically during webpack build. You must also set the release name in your SDK init to match.

What is the difference between an error and an issue in Sentry?

An error is a single occurrence. An issue is a group of similar errors that Sentry deduplicates by stack trace, message, and other fingerprints. You triage issues, not individual errors. This grouping is what makes Sentry usable at scale.

Can I self-host Sentry?

Yes, Sentry offers a self-hosted version based on Docker. It includes most features but requires you to manage upgrades, backups, and scaling. It’s free (open-source) but you pay for infrastructure and maintenance. This is a middle ground between SaaS and a fully custom backend.

How do I avoid sending sensitive data to Sentry?

Use the beforeSend hook to strip PII from the event object. You can also set sendDefaultPII: false in init, which prevents automatic capture of user IP and other data. For custom data, only attach what you need, and use data scrubbing rules in the Sentry dashboard.

What happens if Sentry is down?

Your app continues to work; errors are queued in the SDK and sent when Sentry is back up (with a small buffer). If the queue overflows, errors are dropped. For critical apps, you can also log to your own console as a backup, but that’s rarely necessary.

Related

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.

More cards in this drawer

The whole Numbers and Powers drawer →