Sentry Tutorial¶

This guide explains how we use Sentry in our project — from the basic module setup, over module-specific tracking, data privacy, and enriching issues, to creating dashboards.

Basic Setup¶

The main application initializes Sentry once with a configuration similar to this:

Sentry.init({
    dsn: SENTRY_DSN,
    environment: window.__env__?.ENVIRONMENT || process.env.NODE_ENV,
    release: `hortiview-frontend@${process.env.npm_package_version}`,
    integrations: [
        Sentry.replayIntegration({
            maskAllText: false,
            maskAllInputs: true,
        }),
        Sentry.consoleLoggingIntegration({ levels: ['log', 'warn', 'error'] }),
        Sentry.browserTracingIntegration(),
        Sentry.replayIntegration(),
    ],
    enableLogs: true,

    // Capture 100% of transactions
    tracesSampleRate: 1.0,

    // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled
    tracePropagationTargets: getApiUrls(),

    // Capture Replay for 10% of all sessions, plus for 100% of sessions with an error
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1.0,

    beforeSend(event) {
        return event;
    },
});

Important

Never call Sentry.init() inside of a module! It must only be called once — in the host application.

Tracking Issues from a Module¶

Platform Functions (BaseProps)¶

The platform exposes two helpers via BaseProps:

Function	Purpose
`throwError()`	Toggles the `errorBanner` with the passed message
`logError()`	Tracks an exception to Sentry

Sentry vs. Module Federation¶

Rule

Sentry.init() must never be called more than once.

When working with Module Federation:

Use SentryWebpackPlugin()
moduleMetadata can be sent (e.g. release version)
Use moduleMetaDataIntegration
moduleMetaData can be attached in beforeSend

Source: https://docs.sentry.io/platforms/javascript/best-practices/micro-frontends/

Basic Setup for Modules¶

1. Create a Sentry project¶

Create a Sentry account
Create a new Sentry project (e.g. Season Management)
Select your framework
Provide a project name

2. Get your DSN & install the SDK¶

Get your DSN under: Settings > Projects > Season Management > Client Keys
Install Sentry in your module:
```
yarn add @sentry/react
```

Warning

Do not initialize Sentry inside a module!
Always use the DSN from the correct project and/or organization.

3. Configure the build tool¶

Add the Sentry plugin for the used build tool
Use your project’s DSN
Use Sentry’s tracking tools (e.g. captureException())
Add extras or tags as needed

Source: https://docs.sentry.io/platforms/javascript/best-practices/micro-frontends/

4. Create dashboards / starred queries¶

Set up dashboards and starred queries for your module so the relevant data is easy to find.

Ups and Downs¶

Ups …

Any error raised inside of this module will be related to this project
- Even if unhandled
- Even if logError() is used

… and Downs

Currently there is no way to un-minify the module’s code
We (as host and initializer) decide which integrations are activated

Sentry Integrations¶

Error Monitoring¶

Sentry’s basic feature
Always enabled
Reports errors, uncaught exceptions and unhandled rejections

Access: Sentry > Issues > Feed

Tracing¶

Tracing captures the timing and flow of requests and operations
Trace = record of a series of connected events and operations (spans)
Span = timed operation that represents a part of the app’s workflow
Trace IDs can be passed between FE and BE (as header)
Connects all actions from the first user interaction through all connected backend services

Access: Sentry > Explore > Traces

Session Replay¶

Video-like reproductions of user interactions are tracked
Video-like = DOM snapshots

“For most web applications, the performance overhead of our client SDK will be imperceptible to end-users.”

Access: Sentry > Issues > Feed > Select an Issue > Session Replay

Logs¶

Tracked logs can be searched, filtered and visualized

Access: Sentry > Explore > Logs

Data Privacy¶

Masking Data¶

Masking replaces the content with something neutral.

The following elements will be masked:

Elements with class name sentry-mask
Elements with attribute data-sentry-mask

Source: https://docs.sentry.io/platforms/javascript/session-replay/privacy/#masking

Blocking Data¶

Blocking replaces the content with a placeholder of the same dimension.

The following elements will be blocked:

Elements with class name sentry-block
Elements with attribute data-sentry-block

Source: https://docs.sentry.io/platforms/javascript/session-replay/privacy/#blocking

Enriching Issues¶

Custom Error Types¶

Custom error types help group and identify issues in the feed via:

error.name
error.message
transaction

Source: Sentry > Issues > Feed

Tags¶

Tags = metadata for events
Can be used to filter events

Source: https://docs.sentry.io/platforms/javascript/enriching-events/tags/

Global Tags¶

Global tags are sent with every event

Warning

Do not use — it overwrites the tags of all platform exceptions. Prefer Local Tags (see below).

Local Tags¶

Local tags are only sent with the specific exception
For tags that should be sent with every exception, create a module-wide helper such as captureExceptionToSentry() with custom tags

Extras¶

Extras provide additional debugging context
They are not searchable or filterable in Sentry
They can store large objects or complex types

Source: https://docs.sentry.io/platforms/javascript/enriching-events/

Creating Dashboards¶

Via the Dashboards page¶

Custom widgets can be created on custom dashboards

Sources:
- https://docs.sentry.io/product/dashboards/custom-dashboards/
- https://docs.sentry.io/product/dashboards/widget-builder/

Via specific queries¶

Dashboards can also be built from specific trace queries.

Source: Sentry > Explore > Traces