aralroca
commented
3 years ago @thanhtoan1196 we will have to investigate, apparently next-translate allows another plugin to overwrite the webpack configuration. Thanks to report it
Open thanhtoan1196 opened 3 years ago
aralroca
commented
3 years ago @thanhtoan1196 we will have to investigate, apparently next-translate allows another plugin to overwrite the webpack configuration. Thanks to report it
MatthieuVeillon
commented
3 years ago out of curiosity @thanhtoan1196 - how did you end up implementing sentry in _error.tsx ?
All the implementation I see (i.e on the next example repo ) make use of getInitialProps but it leads to this issue https://github.com/vercel/next.js/discussions/18396
Btw @aralroca your library is very nice to play with. Thanks for having thought about the logging part - it makes translation management much easier
thanhtoan1196
commented
3 years ago @MatthieuVeillon my _error.tsx
import NextErrorComponent from 'next/error';
import * as Sentry from '@sentry/node';
import * as React from "react";
import dynamic from "next/dynamic";
const MyImage = dynamic(import('components/MyImage'));
const BackButton = dynamic(import('components/BackButton'));
const MyError = ({ statusCode, hasGetInitialPropsRun, err }) => {
if (!hasGetInitialPropsRun && err) {
// getInitialProps is not called in case of
// https://github.com/vercel/next.js/issues/8592. As a workaround, we pass
// err via _app.js so it can be captured
Sentry.captureException(err);
}
return <section className="py-8 text-center h-screen bg-white">
<div className="mx-auto h-full flex items-center justify-center flex-col pb-16">
<MyImage
width="300"
height="250,46"
className="mb-8 mx-auto"
src={require('res/svg/error.svg')}
alt="Không hoạt động" />
<h2 className="text-3xl mb-2 font-heading mb-4">Không hoạt động</h2>
<p className="mb-8 text-gray-500 text-xl px-6">
Trang này hiện tại không truy cập được, <br className="inline sm:hidden"/>vui lòng thử lại sau
</p>
<BackButton />
</div>
</section>;
};
MyError.getInitialProps = async ({ res, err, asPath }) => {
const errorInitialProps = await NextErrorComponent.getInitialProps({
res,
err
});
// Workaround for https://github.com/vercel/next.js/issues/8592, mark when
// getInitialProps has run
errorInitialProps.hasGetInitialPropsRun = true;
// Running on the server, the response object (`res`) is available.
//
// Next.js will pass an err on the server if a page's data fetching methods
// threw or returned a Promise that rejected
//
// Running on the client (browser), Next.js will provide an err if:
//
// - a page's `getInitialProps` threw or returned a Promise that rejected
// - an exception was thrown somewhere in the React lifecycle (render,
// componentDidMount, etc) that was caught by Next.js's React Error
// Boundary. Read more about what types of exceptions are caught by Error
// Boundaries: https://reactjs.org/docs/error-boundaries.html
if (res?.statusCode === 404) {
// Opinionated: do not record an exception in Sentry for 404
return { statusCode: 404 };
}
if (err) {
Sentry.captureException(err);
await Sentry.flush(2000);
return errorInitialProps;
}
// If this point is reached, getInitialProps was called without any
// information about what the error might be. This is unexpected and may
// indicate a bug introduced in Next.js, so record it in Sentry
Sentry.captureException(new Error(`_error.js getInitialProps missing data at path: ${asPath}`));
await Sentry.flush(2000);
return errorInitialProps;
};
export default MyError;we move it to 1.0.3 to avoid blocking 1.0.2
next.config.js
More information on package.json