React / Sentry for Error Reporting-如何不从dev / localhost发送错误

问题描述

通过在我们的主要index.js和App.js文件中添加以下内容，我们在React项目中使用了Sentry：

index.js

// Import Stuff
import * as Sentry from '@sentry/react';
import { Integrations } from '@sentry/tracing';
... import other important react stuff...

// https://sentry.io/onboarding/cbb-analytics/get-started/ (not my real dsn)
Sentry.init({
    dsn: 'https://asdkfa930209jcdzkljaasdfasdf@o123456.ingest.sentry.io/3293942',integrations: [
        new Integrations.browserTracing()
    ],tracesSampleRate: 1.0
});

ReactDOM.render(
    <browserRouter>
        <App />
    </browserRouter>,document.getElementById('root'));

App.js

import * as Sentry from '@sentry/react';
... other imports for app.js ...

// And Create The App
function App() {
    // check logged in...
    // check global state...
    // fetch some global data...

    return (
        <GlobalContext.Provider value={globalStateObj}>
            <AppNavbar />
            <LoginModal />
            <Sentry.ErrorBoundary fallback={ErrorBoundaryFallback}>
                <Switch>
                    <Route exact path='/' render={(props) => <HomePage {...props} />}
                    <Route exact path='/about-us' component={AboutUs} />
                    <Route exact path='/reports' component={Reports} />
                    <Route component={NoMatch} />
                </Switch>
            </Sentry.ErrorBoundary>

            <AppFooter />
        </GlobalContext.Provider>
    );
}

export default App;

我们当然可以更详细地了解我们的错误边界，但就目前而言，将包含我们应用程序中99％的代码的整个switch包装起来可以为我们完成工作。每当用户在网站上遇到任何问题时，我们都会在Sentry中将其视为问题。

但是，如果错误是来自dev / localhost的，那么如果不是在Sentry中创建问题，我们会更喜欢它。在编写新代码并将这些问题作为问题发送到Sentry只会使Sentry混乱，并使跟踪生产中发生的那些重要错误变得更加困难。

我们可以使用process.env.NODE_ENV来确定dev vs prod，并在index.js或App.js中的某个地方使用它来防止将问题发送给本地主机吗？还是哨兵有一种方法可以明确地忽略来自IP的问题，例如localhost:3000？

解决方法

我让它工作的最简单的方法是在 Sentry.init 中设置 beforeSend 方法，如果位置是本地主机则返回 null。

Sentry.init({
  dsn:
    'your dsn here',integrations: [new Integrations.BrowserTracing()],tracesSampleRate: 1.0

  beforeSend: (event) => {
    if (window.location.hostname === 'localhost') {
      return null;
    }
    return event;
  },});

编写一个函数以使用位置或一些dev-env或process.env或.env文件来知道您正在开发中...

function displayResult() {
  var result = calculator();
  document.getElementById('total').innerHTML =Math.round(result);
  return false;
}


function calculator() {
  var grade1 = parseFloat(document.getElementById('assign1').value * 1);
  var grade2 = parseFloat(document.getElementById('assign2').value * 1);
  var grade3 = parseFloat(document.getElementById('assign3').value * 1);
  var grade4 = parseFloat(document.getElementById('assign4').value * 1);
  var grade5 = parseFloat(document.getElementById('assign5').value * 1);
  var grade6 = document.getElementById("SelectPaint").value;;
    }
  var total = ((2*((grade1 * grade3)+(grade2 * grade3)))+(grade1 * grade2)-(grade4*1.5*1.5)-(grade5*1*2.0))/grade6 ;
  return total;
}




</script>
</div>
</body>

然后创建一个类似的包装器

function onDev() {
  return window.location.href.startsWith('http://localhost');
}

在 Create-React-App 中

>>> re.match(r"(\d)(?(1)a|b)","5a")
<re.Match object; span=(0,2),match='5a'>
>>> re.match(r"(\d)(?(1)a|b)","b")
>>>

javascript reactjs reactjs sentry