Add sentry #981
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| /* eslint-env node */ | ||
|
|
||
| const withSourceMaps = require('@zeit/next-source-maps') | ||
|
|
||
| const settings = withSourceMaps({ | ||
| webpack(config) { | ||
| return config | ||
| }, | ||
| env: { | ||
| SENTRY_DSN: process.env.SENTRY_DSN | ||
| } | ||
| }) | ||
|
|
||
| module.exports = settings | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| /* global process */ | ||
|
|
||
| import React from 'react' | ||
| import App from 'next/app' | ||
| import * as Sentry from '@sentry/browser' | ||
|
|
||
| Sentry.init({ | ||
| dsn: process.env.SENTRY_DSN | ||
| }) | ||
|
|
||
| class MyApp extends App { | ||
|
jorgeorpinel marked this conversation as resolved.
|
||
| static async getInitialProps({ Component, ctx }) { | ||
| let pageProps = {} | ||
|
|
||
| if (Component.getInitialProps) { | ||
| pageProps = await Component.getInitialProps(ctx) | ||
| } | ||
|
|
||
| return { pageProps } | ||
| } | ||
|
|
||
| componentDidCatch(error, errorInfo) { | ||
| Sentry.withScope(scope => { | ||
| Object.keys(errorInfo).forEach(key => { | ||
| scope.setExtra(key, errorInfo[key]) | ||
| }) | ||
|
|
||
| Sentry.captureException(error) | ||
| }) | ||
|
|
||
| super.componentDidCatch(error, errorInfo) | ||
| } | ||
|
|
||
| render() { | ||
| const { Component, pageProps } = this.props | ||
|
|
||
| return <Component {...pageProps} /> | ||
| } | ||
| } | ||
|
|
||
| export default MyApp | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,17 @@ | ||
| /* eslint-env node */ | ||
|
|
||
| import React from 'react' | ||
| import Document, { Head, Main, NextScript } from 'next/document' | ||
| import { ServerStyleSheet } from 'styled-components' | ||
| import * as Sentry from '@sentry/browser' | ||
|
|
||
| process.on('unhandledRejection', err => { | ||
| Sentry.captureException(err) | ||
| }) | ||
|
|
||
| process.on('uncaughtException', err => { | ||
| Sentry.captureException(err) | ||
| }) | ||
|
Comment on lines
+8
to
+14
Contributor
There was a problem hiding this comment. Why are these needed if Sentry supposedly has automated handling of uncaught exceptions and unhandled rejections? See https://docs.sentry.io/platforms/javascript/#automatically-capturing-errors
Contributor
Author
There was a problem hiding this comment. It's for server side errors in node.js, Sentry will automatically log errors in browser, but not unhandled errors in SSR.
Contributor
There was a problem hiding this comment. Got it, thanks. Would these also be needed separately for server.js or other build-time code? e.g. sidebar.js
Contributor
Author
There was a problem hiding this comment. This catches all code in the actual pages including
Contributor
There was a problem hiding this comment. Yes some server code runs before the Next app and partially includes sidebar.js code I think. That's what I was wondering about. But it's probably not a big deal? Only runs when the server is being initialized, probably only when new versions are deployed to Heroku (or when they restart it automatically for whatever reason).
Contributor
Author
There was a problem hiding this comment. That's pretty much my thoughts as well. And also the fact that we are planning to migrate to Gatsby and it didn't have a server. So I decided to leave it as is for now. |
||
|
|
||
| import { | ||
| META_BASE_TITLE, | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see
@zeit/next-source-mapswas also added here. Is this specifically just a nice addition for Sentry logs/traces?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Source maps is a mechanism to map bundled and minified code with the original source files. If we just run sentry as it is, it will show errors like:
You nave an error on line 1, symbol 3454560 in the gX method.Source maps will ideally show us original file, line and method name. (But right now it's looks like it didn't work correctly)It's not strictly related to Sentry and is used for example by browser Dev Tools, but it make using Sentry more convenient.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Right, I did read about source maps and it seems like a great feature. I was just wondering if this was added specifically for Sentry traces or whether it can also be used on the Browser now.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Well, we should be, because I leave them enabled (there is also an option to send them directly to sentry through API and not publish on site). But in practice from that I see, I misconfigured them somehow and didn't see them anywhere.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
OK cool please let us know when you figure it out 🙂