如何解决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")
>>>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。