Sentry is an error tracking platform that allows you to monitor issues in your production deployments. It supports the most popular programming languages ​​and frameworks. GitLab is a Git-based DevOps platform to manage the entire software development lifecycle. GitLab can integrate with Sentry to display captured errors. In this article, we’ll use both services to stay one step ahead of React app issues.

  • Establishment
  • Add Sentry to your code base
  • Error capture
  • Error limits
  • Added GitLab integration
  • Disable Sentry under development
  • Enabling performance profiling
  • Conclusion

Establishment

GitLab and Sentry both have self-hosted and SaaS options. The steps in this guide apply to both variations. We’ll assume you already have a React project ready to use in your GitLab instance. Log into Sentry and click on the «Create Project» button in the upper right corner. Click on «React» under the heading «Choose a platform». This allows Sentry to adapt sample code snippets to your project. Choose when to receive alerts using the options under “Set your default alert settings”. Select «Notify me of each new problem» to receive an e-mail each time an error is recorded. The “When more than” option filters out noise created by duplicate events within a given time window. Give your project a name in the “Project name” field. Click on «Create a project» to complete your configuration.

Add Sentry to your code base

Now you need to integrate Sentry with your React code. Add the Sentry library to your project dependencies using npm:

npm install @ sentry / react

You will need to initialize Sentry as soon as possible in your app’s JavaScript. This gives Sentry visibility into errors that occur early in React’s lifecycle. Add the Sentry bootstrap script before your first ReactDOM.render() call. It is typically in index.js:

import App from "./App.js"; import React from "react"; import ReactDOM from "react-dom"; import * as Sentry from "@ sentry / react";  sentry.init({ dsn: "my-dsn" });  ReactDOM.yield(<App />, document.getElementById("react"));

Replace my-dsn with the DSN Sentry displays on your project creation screen. The DSN uniquely identifies your project so that the service can correctly assign events.

Error capture

Sentry will automatically capture and report unhandled JavaScript errors. Although he cannot prevent crash, it lets you know something is wrong before the user report arrives. here is an example App.js:

import React from "react";  export default () => { const date = null; return data.map((wave, key) => { <h2 key={key}>{wave}</h2>; }); };

This code is broken—data is set to null, therefore the map the property will be undefined. We try to call data.map() it doesn’t matter for the app to crash. You should see a problem appear in Sentry. Sentinel issues include as much data as possible about the error. You can see the URL of the page as well as information about the user’s device. Sentry will automatically combine duplicate issues. This helps you see if an event was a one-time or a regular event that impacts multiple users. Sentry automatically retrieves JavaScript source maps when available. If you use create-react-app, the source maps are generated automatically by npm run build. Make sure you copy them to your web server so Sentry can find them. You’ll see nice stack traces of the original source code instead of the obscured stack produced by the minified build output. You can mark Sentry errors as Resolved or Ignored after they have been processed. You will find these buttons under the title of the issue and on the issue overview page. Use Solved once you are sure that an issue has been resolved. Ignored is for cases where you do not intend to address the root cause. In React sites, this can be the case for errors caused by older versions of the browser.

Error limits

React error limits allow you to display a fallback UI when an error is thrown in a component. Sentry provides its own error limit wrapper. This makes a fallback user interface and logs the detected error in Sentry.

import * as Sentry from "sentry"; export default () => { const date = null; return ( <sentry.ErrorBoundary fallback={<h2>Something went wrong.</h2>}> { data.map((wave, key) => { <h2 key={key}>{wave}</h2>; }); } </sentry.ErrorBoundary> ); };

Now you can display a warning to users when an error occurs. You will still receive the error report in your Sentry project.

Added GitLab integration

There are two sides to integrating GitLab and Sentry. First of all, GitLab projects have an «Error Tracking» feature that displays your list of Sentry errors. You can mark errors as resolved or ignored from GitLab. The second part is to connect Sentry to GitLab. This allows Sentry to automatically create GitLab problems when a new error is logged. Let’s take a look at the GitLab error tracking screen first. You will need to create a Sentry API key. Click on your username at the top left of your Sentry UI, then click on API Keys in the menu. Click on «Create New Token» in the upper right corner. Add the following token scopes:

    • alerts:read
    • alerts:write
    • event:admin
  • event:read
  • event:write
  • project:read

This allows GitLab to read and update your Sentry errors. Next, head over to your GitLab project. Click Settings in the side menu, then click Actions. Expand the «Error Tracking» section. Paste your Sentry authentication token in the «Auth Token »And press« Connect ». If you are using a self-hosted Sentry instance, you will also need to adjust the “Sentry API URI” field to match your server URI. The “Project” drop-down list will appear with a list of your Sentry projects. Select the correct project and press «Save changes». You are now ready to use error tracking in GitLab. Click Actions> Error Tracking in the left sidebar. You will see your list of Sentry errors. It is filtered by default on unresolved issues. This can be changed using the drop-down lists in the upper right corner. Click on an error to see its detailed stack trace without exiting GitLab. There are buttons to ignore, resolve, and convert to a GitLab issue. Once you open a GitLab issue, you can assign that item to a team member so the bug can be fixed. Now you can add the second integration component, a link from Sentry to GitLab. Click Settings in your Sentry sidebar, then click Integrations. Find GitLab in the list and click the purple “Add Installation” button in the upper right corner. Click «Next» to view the configuration information. Back on GitLab, click on your user’s icon in the upper right corner, followed by “Preferences”. Click on «Applications» in the left menu and add a new application. Use the details displayed by Sentry in the installation configuration pop-up window. GitLab will display an application ID and a secret key. Return to the Sentry pop-up window and enter these values. Add the URL of your GitLab server (gitlab.com for GitLab SaaS) and enter the relative URL path to your GitLab group (for example my-group). Integration does not work with personal projects. Click the purple Submit button to create the integration. Sentry will now be able to display GitLab information next to your errors. This includes the commit that introduced the error and stack traces that point to the GitLab files. Sentry users with paid plans can associate GitLab and Sentry issues with each other.

Disable Sentry under development

You won’t necessarily want to use Sentry when running your locally developing app. Do not call Sentry.init() if you want to run with Sentry disabled. You can check for the presence of a local environment variable and disable Sentry if it is set.

if (process.env.NODE_ENV === "production") { sentry.init({ dsn: "my-dsn" }); }

NODE_ENV is automatically set by create-react-app. Production builds the hard code of the variable to production. You can use it to selectively activate Sentry.

Enabling performance profiling

Sentry can also profile your application’s browser performance. While this is not the main focus of this article, you can configure tracing with a few extra lines in your Sentry library initialization:

npm install @ sentry / tracing
import {Integrations} from "@ sentry / tracing"; sentry.init({ dsn: "my-dsn", INTEGRATIONS: [new Integrations.BrowserTracing()], tracesSampleRate: 1.0 });

Now you will be able to see the performance data in your Sentry project. This can help you identify slow code in production.

Conclusion

Sentry allows you to find and correct errors before users report them. You can receive real-time alerts when problems arise in production. Stack traces and browser data are displayed online in each issue, giving you an immediate starting point for resolution. The combination of Sentry with GitLab provides even tighter integration with the software development process. If you are already using GitLab for project management, adding Sentry integration allows you to manage alerts in GitLab and create GitLab issues for new Sentry errors. Peanut butter and jelly, donuts and coffee, Wendy’s Frosties and french fries — these combinations just work. We don’t ask why; we accept nature’s gift and enjoy. We hope you also accept and enjoy our gift of another great pair: Sentry and GitLab. In fact, Sentry and GitLab already go together so well that users who have installed this integration successfully resolve issues triaged in-platform 73% of the time. To give greater visibility into errors, we recently improved the GitLab integration by adding release and commit tracking as well as suspect commits. GitLab continued this effort in their newest release (11.7) by integrating Sentry directly into GitLab projects. The combination of both integrations provides a clear path to addressing errors contextually while remaining within your existing workflow. Streamline and shorten your workflow Let’s forget about days when error alerts sent you into a panicked spiral, toggling from tool to tool to see exactly what went wrong and where. Instead, let the combined power of Sentry and GitLab alleviate your alert-induced anxiety, while also streamlining your triaging process and shortening your time to issue resolution. Sounds nice, right? If you use both Sentry and GitLab, you can manage and create GitLab issues directly in the Sentry UI. Sentry GitLab linked issues Create a GitLab Issue in Sentry by adding the GitLab Project, Issue title, and Issue description. Sentry GitLab create new issue Link an existing GitLab Issue in a single step. (Okay, two steps, if you consider toggling to the Link tab. Actually, three steps, if you consider opening this modal as a step. Anyway, linking existing GitLab Issues is easy.) Sentry GitLab link existing issue Find and fix bugs faster Our integration update added release and commit tracking, including an enhanced release overview page that highlights new and resolved issues, files changed, and authors. You can resolve issues via commit messages or pull requests, see suggested assignees for issues, and receive detailed deploy emails. With suspect commits, you’ll see the commit that likely introduced an error as well as the developer who is best equipped to work on it. Sentry GitLab suspect commit Keep in mind that this feature is available for Sentry users on “Teams” plans and above. View errors in GitLab Projects GitLab is also contributing to visibility and efficiency efforts with their recent update. If you use both GitLab and Sentry, you can now see errors tracked by Sentry directly within your GitLab projects. GitLab Sentry integration get started Linking Sentry to GitLab is as simple as entering your Sentry API URL and Auth Token. GitLab Sentry integration setup Again, why toggle between tools when you can have everything you need in a single interface? GitLab Sentry integration By now you’re surely craving chicken and waffles, or milk and cookies, or maybe even shrimp and grits (or whatever your favorite combination happens to be today), and that’s fine because you’ve reached the end of this blog post. After your well-earned snack, we highly recommend that you check out the documentation for our GitLab integration as well at GitLab’s Sentry integration. Graphic showing the GitLab and Sentry logos Sentry is an error-tracking platform that lets you monitor issues in your production deployments. It supports most popular programming languages and frameworks. GitLab is a Git-based DevOps platform to manage the entire software development lifecycle. GitLab can integrate with Sentry to display captured errors. In this article, we’ll use the two services to stay ahead of issues in a React application.

Getting Set up

GitLab and Sentry both have self-hosted and SaaS options. The steps in this guide apply to both variants. We’ll assume that you’ve already got a React project ready to use in your GitLab instance. Log in to Sentry and click the “Create Project” button in the top-right corner. Click “React” under the “Choose a platform” heading. This lets Sentry tailor example code snippets to your project. image of adding a new React project in Sentry Choose when to receive alerts using the options beneath “Set your default alert settings.” Select “Alert me on every new issue” to get an email each time an error is logged. The “When there are more than” option filters out noise created by duplicate events in a given time window. Give your project a name in the “Project name” field. Click “Create Project” to finish your setup.

Adding Sentry to Your Codebase

Now, you need to integrate Sentry with your React code. Add the Sentry library to your project’s dependencies using npm:

npm install @sentry/react

You’ll need to initialize Sentry as soon as possible in your app’s JavaScript. This gives Sentry visibility into errors that occur early in the React lifecycle. Add Sentry’s bootstrap script before your first ReactDOM.render() call. This is typically in index.js:

import App from "./App.js"; import React from "react"; import ReactDOM from "react-dom"; import * as Sentry from "@sentry/react";  Sentry.init({ dsn: "my-dsn" });  ReactDOM.render(<App />, document.getElementById("react"));

Replace my-dsn with the DSN that Sentry displays on your project creation screen. The DSN uniquely identifies your project so that the service can attribute events correctly.

Capturing Errors

Sentry will automatically capture and report unhandled JavaScript errors. Although it can’t prevent the crash, it lets you know that something’s gone wrong before the user report arrives. Here’s an example App.js:

import React from "react";  export default () => { const data = null; return data.map((val, key) => { <h2 key={key}>{val}</h2>; }); };

This code is broken—data is set to null, so the map property will be undefined. We try to call data.map() regardless so that the app will crash. You should see an issue show up in Sentry. Sentry issues include as much data about the error as possible. You can see the page URL as well as information about the user’s device. Sentry will automatically combine duplicate issues together. This helps you see whether an event was a one-off or a regular occurrence that’s impacting multiple users. image of a Sentry error Sentry automatically fetches JavaScript source maps when they’re available. If you’re using create-react-app, source maps are automatically generated by npm run build. Make sure that you copy them to your web server so that Sentry can find them. You’ll see pretty stack traces from the original source code instead of the obfuscated stack produced by the minified build output. image of Sentry showing a stack trace from a source map You can mark Sentry errors as Resolved or Ignored once they’ve been dealt with. You’ll find these buttons below the issue’s title and on the Issues overview page. Use Resolved once you’re confident that an issue has been fixed. Ignored is for cases where you don’t intend to address the root cause. In React sites, this might be the case for errors caused by old browser versions.

Error Boundaries

React error boundaries let you render a fallback UI when an error is thrown within a component. Sentry provides its own error boundary wrapper. This renders a fallback UI and logs the caught error to Sentry.

import * as Sentry from "sentry";  export default () => { const data = null; return ( <Sentry.ErrorBoundary fallback={<h2>Something went wrong.</h2>}> { data.map((val, key) => { <h2 key={key}>{val}</h2>; }); } </Sentry.ErrorBoundary> ); };

Now, you can display a warning to users when an error occurs. You’ll still receive the error report in your Sentry project.

Adding GitLab Integration

There are two sides to integrating GitLab and Sentry. First, GitLab projects have an “Error Tracking” feature that displays your Sentry error list. You can mark errors as Resolved or Ignored from within GitLab. The second part involves connecting Sentry to GitLab. This lets Sentry automatically create GitLab issues when a new error is logged. image of creating an API key in Sentry Let’s look at GitLab’s Error Tracking screen first. You’ll need to create a Sentry API key. Click your username in the top left of your Sentry UI, and then the API Keys in the menu. Click “Create New Token” in the top-right corner. Add the following token scopes:

  • alerts:read
  • alerts:write
  • event:admin
  • event:read
  • event:write
  • project:read

This allows GitLab to read and update your Sentry errors. image of Sentry API token scopes Next, head to your GitLab project. Click Settings in the side menu, and then Operations. Expand the “Error tracking” section. Paste your Sentry authentication token into the “Auth Token” field and press “Connect.” If you’re using a self-hosted Sentry instance, you’ll also need to adjust the “Sentry API URI” field to match your server’s URI. image of GitLab's error tracking settings The “Project” dropdown will populate with a list of your Sentry projects. Select the correct project and press “Save changes.” You’re now ready to use Error Tracking in GitLab. Click Operations > Error Tracking in the left sidebar. You’ll see your Sentry error list. It’s filtered to Unresolved issues by default. This can be changed using the dropdowns in the top-right corner. Click an error to see its detailed stack trace without leaving GitLab. There are buttons to ignore, resolve, and convert to a GitLab issue. Once you’ve opened a GitLab issue, you can assign that item to a team member so that the bug gets resolved. image of GitLab's Error Tracking screen Now, you can add the second integration component—a link from Sentry back to GitLab. Click Settings in your Sentry sidebar, and then Integrations. Find GitLab in the list and click the purple “Add Installation” button in the top-right corner. Click “Next” to see the setup information. image of adding the GitLab Sentry integration Back on GitLab, click your user icon in the top-right corner, followed by “Preferences.” Click “Applications” in the left side menu and add a new application. Use the details shown by Sentry in the installation setup pop-up. image of creating a new GitLab application integration GitLab will display an Application ID and Secret Key. Return to the Sentry pop-up and enter these values. Add your GitLab server URL (gitlab.com for GitLab SaaS) and enter the relative URL path to your GitLab group (e.g. my-group). The integration doesn’t work with personal projects. image of adding the GitLab Sentry integration Click the purple Submit button to create the integration. Sentry will now be able to display GitLab information next to your errors. This includes the commit that introduced the error, and stack traces that link back to GitLab files. Sentry users on paid plans can associate GitLab and Sentry issues with each other.

Disabling Sentry in Development

You won’t necessarily want to use Sentry when running your app locally in development. Don’t call Sentry.init() if you want to run with Sentry disabled. You can check for the presence of a local environment variable and disable Sentry if it’s set.

if (process.env.NODE_ENV === "production") { Sentry.init({ dsn: "my-dsn" }); }

NODE_ENV is set automatically by create-react-app. Production builds hardcode the variable to production. You can use this to selectively enable Sentry.

Enabling Performance Profiling

Sentry can also profile your app’s browser performance. Although this isn’t the main focus of this article, you can set up tracing with a few extra lines in your Sentry library initialization:

npm install @sentry/tracing
import {Integrations} from "@sentry/tracing";  Sentry.init({ dsn: "my-dsn", integrations: [new Integrations.BrowserTracing()], tracesSampleRate: 1.0 });

Now, you’ll be able to see performance data in your Sentry project. This can help you identify slow-running code in production.

Conclusion

Sentry lets you find and fix errors before users report them. You can get real-time alerts as problems arise in production. Stack traces and browser data are displayed inline in each issue, giving you an immediate starting point for resolution. Combining Sentry with GitLab provides even tighter integration with the software development process. If you’re already using GitLab for project management, adding the Sentry integration lets you manage alerts within GitLab and create GitLab issues for new Sentry errors. READ NEXT

  • › AMD’s New RX 7000 GPUs Are Really Good and Really Cheap
  • › How to Sign Out of Google on All Your Devices
  • › How to Use Microsoft Excel Templates for Event Planning
  • › Astronomers Discover Closest Black Hole to Earth (Which is Still Far)
  • › How to Remove Followers on Instagram
  • › Get Ready to See Popup Tips on Your Windows 11 Taskbar


Leave a comment

Your email address will not be published. Required fields are marked *