Tips for minimizing distraction by utilizing Sentry v5 to globally discount errors

Previously, with the deprecated client Raven, you could easily ignore troublesome errors like this: 

Raven.config('your-dsn', {
    ignoreErrors: [
        'Can\'t execute code from freed script',
        /SecurityError\: DOM Exception 18$/
    ]
}).install();

Now, with the new client, the only way I discovered to achieve a similar effect is through the before-send hook: 

import * as Sentry from '@sentry/browser';

init({
  beforeSend(event, hint) {
    const { message } = hint.originalException;
    if (message && message.match(/database unavailable/i)) {
      return null;
    }
    return event;
  }
});

Despite searching extensively through the documentation, I couldn't find a universal method to ignore errors.

javascriptvue.jssentry

Answer №2

Here is a simple configuration I'm using for my Nuxt.js app in the nuxt.config.js file:

  sentry: {
    disabled: process.env.APP_ENV === 'development',
    dsn: 'xxxx',
    maxBreadcrumbs: 50,
    config: {
      environment: process.env.APP_ENV,
      debug: process.env.APP_ENV === 'development',
      release: '1.0.0',

      beforeSend: (event, hint) => {
        // Display all errors that you want to see
        // You can log the original exception using console.log(hint.originalException)

        // For example, do not send an error if it's a 404 status when using axios
        const { response } = hint.originalException;
        if (response && response.status && response.status === 404) {
          return null;
        }
        return event;
      }
    }
  },

Answer №3

Vanilla JavaScript:


process.on('unhandledRejection', (reason, promise) => {
  //console.log('(Custom message) Unhandled Rejection detected at:', reason.stack, reason.captureStackTrace);
  console.log('Unhandled Rejection at: Promise', promise, 'reason:', reason, reason.constructor.name);
});

If your regex is not matching, consider using: 

/SecurityError\\: DOM Exception 18$/
instead of 
/SecurityError\: DOM Exception 18$/
, make sure to include the double backslash \\

Answer №4

I need to follow these instructions as per the provided documentation.

let ignoreError = false;

Sentry.init({
    Vue,
    dsn: getEnv("SENTRY_DSN"),
    beforeBreadcrumb: (response) => {
        if (response && 
            response.category && 
            response.category === "xhr" &&
            response.data &&
            response.data.status_code &&
            response.data.status_code == 401 || 404
        ) {
            ignoreError = true;
        } else {
            ignoreError = false;
        }
    },
    beforeSend: (event, hint) => {
        if (ignoreError) {
            return null;
        }
        return event;
    },
    environment: getEnv("NODE_ENV"),
    sampleRate: parseFloat(getEnv("SENTRY_SAMPLE_RATE")),
    integrations: [
        new BrowserTracing({
            routingInstrumentation: Sentry.vueRouterInstrumentation(router),
            tracingOrigins: [getEnv("SENTRY_TRACING_ORIGINS")],
        }),
    ],
    trackComponents: true,
    logError: true,
    debug: false,
    tracesSampler: samplingContext => {
        if (samplingContext?.transactionContext?.name === 'GET /health') {
            return 0.0;
        } else {
            return parseFloat(getEnv("SENTRY_TRACES_SAMPLE_RATE"));
        }
    },
});

export default Sentry

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking to add a form within another form using AJAX? Just keep in mind that the initial form should also be inserted using AJAX

I have incorporated a form using AJAX on a Php page. Now, I am trying to add another form within that existing form which is also created using AJAX, but unfortunately, it is not functioning as expected. This serves as the parent page. <div class=" ...

javascriptphpjqueryajaxforms

ways to access ng-model value within a directive

I recently developed a custom directive in AngularJS that utilizes the input type number with min-max and ng-model attributes. I made sure to use an isolated scope for the directive. However, despite setting up a blur event within the directive, I am encou ...

javascriptangularjsangularjs-directiveangular-ngmodelisolated-scope

Mastering the Art of Scrolling Down Content with Button Click in Ionic 3

I'm currently developing an Ionic chat application and I need the content to automatically scroll down when the user clicks on the send text button. You can see a visual representation of this in the images linked below. https://i.stack.imgur.com/gwR ...

javascriptangularjsionic-frameworkionic3

The passing of React parent component props to the child component is not functioning as expected

Retrieving data through an ajax call and saving it to the state of the component _fetchDataFromServer(){ reqwest({ url: 'http://127.0.0.1:8000/api/example/' , type: 'json' , method: 'get' , contentType: &ap ...

javascriptreactjsreactive-programming

Expanding beyond the maximum width in a two-column layout (using TAILWIND CSS)

Before I pose my question, let me quickly go over the relevant code: The Homepage Component const Home = () => { return ( <div> <div> {questions.map((question) => ( <div key={question.id} className=" ...

javascriptcssreactjslayouttailwind-css

Tips for enhancing the width of the extrude shape in the x and z axes using Three.js

After creating a shape using extrude geometry, I found that I needed to increase the thickness along the x and z axes. Although I used bevelThickness to increase the thickness along the y axis, I still need to adjust it further. For reference, please see ...

javascriptjquerythree.js

What is the best way to position my Jchartfx area graph below my gridview?

When my page loads, the graph appears like this. It consistently shows up in the top left corner even though it should be positioned underneath the grid view as intended. var chart1; function createGraph(mpy) { if (mpy == undefined) mpy = 12.00; ch ...

javascriptjqueryhtmlcssjchartfx

Display one of two divs after clicking a button depending on the input from a form field

My apologies for my limited knowledge in JavaScript and jQuery. I'm attempting to show one of two divs based on input from a form. Specifically, there's a button next to a form field that asks users to enter their zip code to check if they are wi ...

javascriptjqueryhtml

Looking to reduce the size of a logo image within a container as you scroll down a webpage?

I've been working on creating a logo section for my website, but I'm struggling to make it shrink as users scroll down and expand back to its original size when they scroll up. I've tried various JavaScript and jQuery functions without succe ...

javascriptjqueryhtmlcssimage-resizing

Is it possible to conceal the source code within the dist js file using Vue JS?

I am looking to create a detailed logging page that showcases the logs without revealing the specific type of logging. I want to prevent users from accessing the minified vue JS script and easily reading the logged information. Is there a way to implemen ...

javascriptvue.jsauthenticationobs

Is it possible for HTML, AJAX, and PHP to work together seamlessly in synchronous harmony? Or could

After extensive research, I have managed to find a more efficient way to connect JavaScript to PHP using Ajax. My main goal was to reduce the amount of code while maintaining maximum speed. One breakthrough I made was passing AJAX a value by Object, allowi ...

phpjavascripthtmlajaxsynchronous

Adding an element within an ngFor iteration loop

I'm currently working on a code snippet that displays items in a list format: <ul> <li *ngFor="#item of items">{{item}}</li> </ul> These items are fetched from an API through an HTTP call. Here's the code snippet for tha ...

javascriptangularangular2-directives

Ways to conceal a primary page section upon clicking a different tab

I am currently implementing the w3schools HOW TO - tabs feature on my website to create tabbed navigation. However, I'm running into an issue where clicking on tabs other than 'Home' still displays the 'Home' content along with the ...

javascripthtmlcsstabs

Is it possible to use the POST method with NODE JS and JavaScript?

Struggling to set up a login screen, I keep running into a "cannot get post" error after hours of trying everything. Feeling defeated, I decided to seek help. Here's the code I have so far: const express = require('express'); const router = ...

javascriptnode.jsmongodbexpressejs

Deliver JSON from Node.js to the client

I am a beginner in the world of Node.js and JavaScript, facing a challenge that I can't seem to overcome. Currently, I have a Node application set up with Express. The issue at hand involves a script that sends JSON data to my server, which is then s ...

javascriptjsonnode.jsexpress

ReactJS not updating when multiple checkboxes are selected

Struggling to resolve an issue with this component. I encounter an error when trying to select multiple items using checkboxes. Oddly enough, another one of my components with the same code has no error. Please take a look at my code below, any help is gre ...

javascriptreactjs

Leveraging various routes to access data with a shared VueJS 3 component

Could you please review this code snippet: It displays two routes that utilize the same component to fetch content from an API. Main.js const router = createRouter({ history: createWebHistory(), routes: [ { path: "/route1& ...

javascriptvue.jsvue-routervuejs3

Tips for keeping Fancybox from deleting the selected thumbnail

New to using fancybox and running into some issues.. starting to regret adding it. I have a row of thumbnails, all good, but when I click one it opens the THUMBNAIL instead of the actual link and on top of that, it DELETES the thumbnail from the DOM. I tr ...

javascriptjqueryfancybox

JQueryUI draggable multiple select containment

Hey everyone, I've managed to implement Jqueryui drag and drop along with Jqueryui selectable. One issue I'm facing is that when I select and move multiple objects, only the clicked element is contained within the parent while the others can move ...

javascriptjqueryjquery-ui

Incorporate Illustrator SVG 1.0 or 1.1 into your projects with the help of three.js and d

I have come across several resources that discuss using an SVG exported from Illustrator for WebGl with three.js and d3. Extrude, or, make 2d SVG path into 3d https://github.com/josdirksen/learning-threejs/blob/master/chapter-06/05-extrude-svg.html Illu ...

javascriptsvgd3.jsthree.js