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:readalerts:writeevent:admin
event:readevent:writeproject: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 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. 
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. 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. 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. 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:readalerts:writeevent:adminevent:readevent:writeproject:read
This allows GitLab to read and update your Sentry errors. 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. 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. 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. 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. 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. 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
- How to make a pearl necklace
- How to take notes on ipad
- How to summarize a journal article
- How to tell if your best friend loves you
- How to diagnose ulcers caused by mast cell tumors in dogs