New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Best way to integrate Sentry #2334
Comments
Server side you may want to create a custom server, using the express connection will make it easier to integrate. Client side you can load the JS lib in a custom |
Thanks @sergiodxa for answering. |
This still does not work because of #1852, which really needs to be addressed. |
@sergiodxa I've tried creating a HOC wrapping the import React from 'react'
import Raven from 'raven-js'
import config from '../config/app'
let logException = (ex, context) => { window.console && console.error && console.error(ex) } // eslint-disable-line no-console
if (config.sentry) {
Raven.config(config.sentry).install()
logException = (ex, context) => {
Raven.captureException(ex, {
extra: context
})
window.console && console.error && console.error(ex) // eslint-disable-line no-console
}
}
export default function withSentry(wrappedComponent) {
return class SentryComponent extends React.Component {
render() {
try {
return <wrappedComponent {...this.props} />
} catch (ex) {
logException(ex)
}
}
}
} And then in the // ...
render() {
const Content = withSentry(Main)
return ( // ...
<Content />
// ...
)
}
// ... |
Finally resolved it by adding the withSentry HOC to each page instead of the _document.js. Not sure if it's the best way but works. |
The problemI confirm the issue, next.js is swallowing the errors thrown during the render of React. window.onerror = function() {
console.log('onerror')
}; The errors are catch on the server and the client, also using this hook A possible solutionI ended up performing the following changes:
resolve: Object.assign({}, config.resolve, {
alias: Object.assign({}, config.resolve.alias, {
// raven for the server
// raven-js for the client
raven: 'raven-js',
}),
}),
|
+1 for being able to track the errors in the way we need! |
@oliviertassinari should we re-open the issue? I think the errors should be propagated to the client/server. Many tools may be affected by this (Sentry, Rollbar, New Relic, etc) |
@lardissone I would rather see next.js forwarding errors after handling them internally if possible. I'm doing the opposite right now, catching errors then forwarding them to next.js, that's more work on user space. |
One last thing, I had to remove the production aliasing to the minified version of React in order to get the alias: Object.assign({}, config.resolve.alias, {
// raven for the server
// raven-js for the client
raven: 'raven-js',
// Fix for hijacking react-dom/lib/ReactReconciler
react: 'react',
'react-dom': 'react-dom',
}), @lardissone Back to your question. Yes, I think that we should be reopening this issue in order to expose a clean API. I believe that the amount of introspection needed into next.js to make it work is too high. More specifically, having to hook into |
This seems to be working well: // pages/_error.js
import NextError from 'next/error'
import { logException } from '../src/utils/analytics'
export default class MyError extends NextError {
static getInitialProps({ res, err }) {
if (!(err instanceof Error)) {
err = new Error(err && err.message)
}
res ? Raven.captureException(err) : logException(err)
return NextError.getInitialProps({ res, err })
}
} Some notes:
Thoughts? |
@mattfysh How can I reach inside of I add When client side error thrown, Sentry get the error. But I think this is not related with |
@pueue how are you navigating to the page? If you're doing full page refresh/load of the page, you'll get the server side error. To trigger the client-side error, you need to navigate from another page, to the page with the error, using a |
@mattfysh This is a example. // pages/page1.js
export default Page1 extends React.Component {
...
throwError() {
throw new Error('client side eventHandling error');
}
render() {
return (
<div>
<Link href='/page2'>Link</Link><br />
<TextField onChange={this.throwError}/>
</div>
)
}
}
// pages/page2.js
export default Page2 extends React.Component {
...
render() {
eval("throw new Error('client side rendering error')");
return (
<div>
</div>
);
}
} When I change something in Can I see your sample code using what you suggest? I need a help. |
What's the best way to integrate Sentry to a next project?
The text was updated successfully, but these errors were encountered: