{"id":265051,"date":"2021-06-02T21:00:00","date_gmt":"2021-06-02T18:00:00","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/how-to-use-sentry-and-gitlab-to-capture-react-errors-cloudsavvy-it\/"},"modified":"2021-06-02T21:00:00","modified_gmt":"2021-06-02T18:00:00","slug":"how-to-use-sentry-and-gitlab-to-capture-react-errors-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/how-to-use-sentry-and-gitlab-to-capture-react-errors-cloudsavvy-it\/","title":{"rendered":"#How to Use Sentry and GitLab to Capture React Errors \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a3879d414e7f\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a3879d414e7f\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-sentry-and-gitlab-to-capture-react-errors-cloudsavvy-it\/#Getting_Set_up\" >Getting Set up<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-sentry-and-gitlab-to-capture-react-errors-cloudsavvy-it\/#Adding_Sentry_to_Your_Codebase\" >Adding Sentry to Your Codebase<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-sentry-and-gitlab-to-capture-react-errors-cloudsavvy-it\/#Capturing_Errors\" >Capturing Errors<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-sentry-and-gitlab-to-capture-react-errors-cloudsavvy-it\/#Error_Boundaries\" >Error Boundaries<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-sentry-and-gitlab-to-capture-react-errors-cloudsavvy-it\/#Adding_GitLab_Integration\" >Adding GitLab Integration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-sentry-and-gitlab-to-capture-react-errors-cloudsavvy-it\/#Disabling_Sentry_in_Development\" >Disabling Sentry in Development<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-sentry-and-gitlab-to-capture-react-errors-cloudsavvy-it\/#Enabling_Performance_Profiling\" >Enabling Performance Profiling<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-sentry-and-gitlab-to-capture-react-errors-cloudsavvy-it\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#How to Use Sentry and GitLab to Capture React Errors \u2013 CloudSavvy IT&#8221;<\/strong><\/p>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage aligncenter size-full wp-image-11268\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/05\/c64ced0e.jpeg?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Graphic showing the GitLab and Sentry logos\" width=\"1602\" height=\"902\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Sentry is an error-tracking platform that lets you monitor issues in your production deployments. It supports most popular programming languages and frameworks.<\/p>\n<p>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\u2019ll use the two services to stay ahead of issues in a React <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>lication.<\/p>\n<h2 id=\"getting-setup\"><span class=\"ez-toc-section\" id=\"Getting_Set_up\"><\/span>Getting Set up<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/about.gitlab.com\/pricing\">GitLab<\/a> and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/develop.sentry.dev\/self-hosted\">Sentry<\/a> both have self-hosted and SaaS options. The steps in this guide apply to both variants. We\u2019ll assume that you\u2019ve already got a React project ready to use in your GitLab instance.<\/p>\n<p>Log in to Sentry and click the \u201cCreate Project\u201d button in the top-right corner. Click \u201cReact\u201d under the \u201cChoose a platform\u201d heading. This lets Sentry tailor example code snippets to your project.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-11270\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/05\/4783ec21.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"1153\" height=\"1096\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Choose when to receive alerts using the options beneath \u201cSet your default alert settings.\u201d Select \u201cAlert me on every new issue\u201d to get an email each time an error is logged. The \u201cWhen there are more than\u201d option filters out noise created by duplicate events in a given time window.<\/p>\n<p>Give your project a name in the \u201cProject name\u201d field. Click \u201cCreate Project\u201d to finish your setup.<\/p>\n<h2 id=\"adding-sentry-to-your-codebase\"><span class=\"ez-toc-section\" id=\"Adding_Sentry_to_Your_Codebase\"><\/span>Adding Sentry to Your Codebase<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now, you need to integrate Sentry with your React code. Add the Sentry library to your project\u2019s dependencies using npm:<\/p>\n<pre>npm install @sentry\/react<\/pre>\n<p>You\u2019ll need to initialize Sentry as soon as possible in your app\u2019s JavaScript. This gives Sentry visibility into errors that occur early in the React lifecycle. Add Sentry\u2019s bootstrap script before your first <code>ReactDOM.render()<\/code> call. This is typically in <code>index.js<\/code>:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> App from <span class=\"st0\">\".\/App.js\"<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw5\">import<\/span> React from <span class=\"st0\">\"react\"<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw5\">import<\/span> ReactDOM from <span class=\"st0\">\"react-dom\"<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw5\">import<\/span> <span class=\"sy0\">*<\/span> as Sentry from <span class=\"st0\">\"@sentry\/react\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\nSentry.<span class=\"me1\">init<\/span><span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>\n    dsn<span class=\"sy0\">:<\/span> <span class=\"st0\">\"my-dsn\"<\/span>\n<span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\nReactDOM.<span class=\"me1\">render<\/span><span class=\"br0\">(<\/span><span class=\"sy0\">&lt;<\/span>App <span class=\"sy0\">\/&gt;,<\/span> document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"react\"<\/span><span class=\"br0\">)<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Replace <code>my-dsn<\/code> 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.<\/p>\n<h2 id=\"capturing-errors\"><span class=\"ez-toc-section\" id=\"Capturing_Errors\"><\/span>Capturing Errors<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Sentry will automatically capture and report unhandled JavaScript errors. Although it can\u2019t <em>prevent<\/em> the crash, it lets you know that something\u2019s gone wrong before the user report arrives.<\/p>\n<p>Here\u2019s an example <code>App.js<\/code>:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> React from <span class=\"st0\">\"react\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw5\">export<\/span> <span class=\"kw1\">default<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n    <span class=\"kw1\">const<\/span> data <span class=\"sy0\">=<\/span> <span class=\"kw2\">null<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">return<\/span> data.<span class=\"me1\">map<\/span><span class=\"br0\">(<\/span><span class=\"br0\">(<\/span>val<span class=\"sy0\">,<\/span> key<span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"sy0\">&lt;<\/span>h1 key<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span>key<span class=\"br0\">}<\/span><span class=\"sy0\">&gt;<\/span><span class=\"br0\">{<\/span>val<span class=\"br0\">}<\/span><span class=\"sy0\">&lt;\/<\/span>h1<span class=\"sy0\">&gt;;<\/span>\n    <span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>This code is broken\u2014<code>data<\/code> is set to <code>null<\/code>, so the <code>map<\/code> property will be <code>undefined<\/code>. We try to call <code>data.map()<\/code> regardless so that the app will crash. You should see an issue show up in Sentry.<\/p>\n<p>Sentry issues include as much data about the error as possible. You can see the page URL as well as information about the user\u2019s device. Sentry will automatically combine duplicate issues together. This helps you see whether an event was a one-off or a regular occurrence that\u2019s impacting multiple users.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-11275\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/05\/bd6f9e1c.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"1268\" height=\"658\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Sentry automatically fetches JavaScript source maps when they\u2019re available. If you\u2019re using <code>create-react-app<\/code>, source maps are automatically generated by <code>npm run build<\/code>. Make sure that you copy them to your web server so that Sentry can find them. You\u2019ll see pretty stack traces from the original source code instead of the obfuscated stack produced by the minified build output.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-11276\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/05\/61a1d8a8.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"1252\" height=\"652\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>You can mark Sentry errors as Resolved or Ignored once they\u2019ve been dealt with. You\u2019ll find these buttons below the issue\u2019s title and on the Issues overview page. Use Resolved once you\u2019re confident that an issue has been fixed. Ignored is for cases where you don\u2019t intend to address the root cause. In React sites, this might be the case for errors caused by old browser versions.<\/p>\n<h2 id=\"error-boundaries\"><span class=\"ez-toc-section\" id=\"Error_Boundaries\"><\/span>Error Boundaries<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>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.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> <span class=\"sy0\">*<\/span> as Sentry from <span class=\"st0\">\"sentry\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw5\">export<\/span> <span class=\"kw1\">default<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n    <span class=\"kw1\">const<\/span> data <span class=\"sy0\">=<\/span> <span class=\"kw2\">null<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">return<\/span> <span class=\"br0\">(<\/span>\n        <span class=\"sy0\">&lt;<\/span>Sentry.<span class=\"me1\">ErrorBoundary<\/span> fallback<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span><span class=\"sy0\">&lt;<\/span>h1<span class=\"sy0\">&gt;<\/span>Something went wrong.<span class=\"sy0\">&lt;\/<\/span>h1<span class=\"sy0\">&gt;<\/span><span class=\"br0\">}<\/span><span class=\"sy0\">&gt;<\/span>\n            <span class=\"br0\">{<\/span>\n                data.<span class=\"me1\">map<\/span><span class=\"br0\">(<\/span><span class=\"br0\">(<\/span>val<span class=\"sy0\">,<\/span> key<span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n                    <span class=\"sy0\">&lt;<\/span>h1 key<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span>key<span class=\"br0\">}<\/span><span class=\"sy0\">&gt;<\/span><span class=\"br0\">{<\/span>val<span class=\"br0\">}<\/span><span class=\"sy0\">&lt;\/<\/span>h1<span class=\"sy0\">&gt;;<\/span>\n                <span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n            <span class=\"br0\">}<\/span>\n        <span class=\"sy0\">&lt;\/<\/span>Sentry.<span class=\"me1\">ErrorBoundary<\/span><span class=\"sy0\">&gt;<\/span>\n    <span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Now, you can display a warning to users when an error occurs. You\u2019ll still receive the error report in your Sentry project.<\/p>\n<h2 id=\"adding-gitlab-integration\"><span class=\"ez-toc-section\" id=\"Adding_GitLab_Integration\"><\/span>Adding GitLab Integration<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>There are two sides to integrating GitLab and Sentry. First, GitLab projects have an \u201cError Tracking\u201d 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 <em>GitLab<\/em> issues when a new error is logged.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-11278\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/05\/d63072ab.jpeg?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"1268\" height=\"658\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Let\u2019s look at GitLab\u2019s Error Tracking screen first. You\u2019ll 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 \u201cCreate New Token\u201d in the top-right corner.<\/p>\n<p>Add the following token scopes:<\/p>\n<ul>\n<li><code>alerts:read<\/code><\/li>\n<li><code>alerts:write<\/code><\/li>\n<li><code>event:admin<\/code><\/li>\n<li><code>event:read<\/code><\/li>\n<li><code>event:write<\/code><\/li>\n<li><code>project:read<\/code><\/li>\n<\/ul>\n<p>This allows GitLab to read and update your Sentry errors.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-11280\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/05\/3c6ee602.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"1266\" height=\"656\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Next, head to your GitLab project. Click Settings in the side menu, and then Operations. Expand the \u201cError tracking\u201d section. Paste your Sentry authentication token into the \u201cAuth Token\u201d field and press \u201cConnect.\u201d If you\u2019re using a self-hosted Sentry instance, you\u2019ll also need to adjust the \u201cSentry API URI\u201d field to match your server\u2019s URI.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-11279\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/05\/24412986.jpeg?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"1260\" height=\"656\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>The \u201cProject\u201d dropdown will populate with a list of your Sentry projects. Select the correct project and press \u201cSave changes.\u201d You\u2019re now ready to use Error Tracking in GitLab.<\/p>\n<p>Click Operations &gt; Error Tracking in the left sidebar. You\u2019ll see your Sentry error list. It\u2019s 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\u2019ve opened a GitLab issue, you can assign that item to a team member so that the bug gets resolved.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-11281\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/05\/26b130dc.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"1266\" height=\"656\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Now, you can add the second integration component\u2014a link from Sentry back to GitLab. Click Settings in your Sentry sidebar, and then Integrations. Find GitLab in the list and click the purple \u201cAdd Installation\u201d button in the top-right corner. Click \u201cNext\u201d to see the setup information.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-11285\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/05\/156005c5.jpg?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"1266\" height=\"656\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Back on GitLab, click your user icon in the top-right corner, followed by \u201cPreferences.\u201d Click \u201cApplications\u201d in the left side menu and add a new application. Use the details shown by Sentry in the installation setup pop-up.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-11283\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/05\/d0096ec6.jpg?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"1266\" height=\"586\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>GitLab will display an Application ID and Secret Key. Return to the Sentry pop-up and enter these values. Add your GitLab server URL (<code>gitlab.com<\/code> for GitLab SaaS) and enter the relative URL path to your GitLab group (e.g.\u00a0<code>my-group<\/code>). The integration doesn\u2019t work with personal projects.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-11284\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/05\/10fb15c7-1.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"638\" height=\"755\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>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.<\/p>\n<h2 id=\"disabling-sentry-in-development\"><span class=\"ez-toc-section\" id=\"Disabling_Sentry_in_Development\"><\/span>Disabling Sentry in Development<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You won\u2019t necessarily want to use Sentry when running your app locally in development. Don\u2019t call <code>Sentry.init()<\/code> if you want to run with Sentry disabled. You can check for the presence of a local environment variable and disable Sentry if it\u2019s set.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">if<\/span> <span class=\"br0\">(<\/span>process.<span class=\"me1\">env<\/span>.<span class=\"me1\">NODE_ENV<\/span> <span class=\"sy0\">===<\/span> <span class=\"st0\">\"production\"<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n    Sentry.<span class=\"me1\">init<\/span><span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>\n        dsn<span class=\"sy0\">:<\/span> <span class=\"st0\">\"my-dsn\"<\/span>\n    <span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><code>NODE_ENV<\/code> is set automatically by <code>create-react-app<\/code>. Production builds hardcode the variable to <code>production<\/code>. You can use this to selectively enable Sentry.<\/p>\n<h2 id=\"enabling-performance-profiling\"><span class=\"ez-toc-section\" id=\"Enabling_Performance_Profiling\"><\/span>Enabling Performance Profiling<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Sentry can also profile your app\u2019s browser performance. Although this isn\u2019t the main focus of this article, you can set up tracing with a few extra lines in your Sentry library initialization:<\/p>\n<pre>npm install @sentry\/tracing<\/pre>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> <span class=\"br0\">{<\/span>Integrations<span class=\"br0\">}<\/span> from <span class=\"st0\">\"@sentry\/tracing\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\nSentry.<span class=\"me1\">init<\/span><span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>\n    dsn<span class=\"sy0\">:<\/span> <span class=\"st0\">\"my-dsn\"<\/span><span class=\"sy0\">,<\/span>\n    integrations<span class=\"sy0\">:<\/span> <span class=\"br0\">[<\/span><span class=\"kw1\">new<\/span> Integrations.<span class=\"me1\">BrowserTracing<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"br0\">]<\/span><span class=\"sy0\">,<\/span>\n    tracesSampleRate<span class=\"sy0\">:<\/span> <span class=\"nu0\">1.0<\/span>\n<span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Now, you\u2019ll be able to see performance data in your Sentry project. This can help you identify slow-running code in production.<\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>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 im<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/social-mediaa\/\" data-internallinksmanager029f6b8e52c=\"1\" title=\"Social Media\" target=\"_blank\" rel=\"noopener\">media<\/a>te starting point for resolution.<\/p>\n<p>Combining Sentry with GitLab provides even tighter integration with the software development process. If you\u2019re already using GitLab for project management, adding the Sentry integration lets you manage alerts within GitLab and create GitLab issues for new Sentry errors.\n<\/p><\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/11267\/how-to-use-sentry-and-gitlab-to-capture-react-errors\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#How to Use Sentry and GitLab to Capture React Errors \u2013 CloudSavvy IT&#8221; 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&#8230;<\/p>\n","protected":false},"author":1,"featured_media":265052,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/05\/c64ced0e.jpeg","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-265051","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/265051","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=265051"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/265051\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/265052"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=265051"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=265051"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=265051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}