ms-dred
@ms-dred
Вечно что то не то и что то не так...

Как в next.js отловить ошибку?

Всем привет.
Столкнулся со следующей проблемой и никак не могу ее решить.
Проблема в том что некоторые пользователи, а именно пользователи Сафари испытывают проблемы с доступом к сайту, им вываливается ошибка вида
Application error: a client-side exception has occurred (see the browser console for more information

Вижу это по метрике, и не у всех девайсов она проявляется, iOS 16 и ниже и только в браузере Сафари. Таких ошибок крайне мало, но все же хочется понять в чем проблема, где именно я накосячил, ну и поправить все это добро.
Сам проект очень большой и найти методом тыка данную ошибку просто нереально.

После компиляции код ошибки находится в папке .next
//.next/static/chunks/main.js

//./node_modules/next/dist/pages/_error.js
children: [\n                                    this.props.title || statusCode ? title : /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {\n                                        children: \"Application error: a client-side exception has occurred (see the browser console for more information)\"\n                                    }),\n


У меня есть ErrorBoundary, который должен регистрировать все ошибки и делать запись в базу данных, он успешно вроде бы с этим справляется, удалось решить все проблемы, однако с текущей ошибкой, это как черная дыра.
class ErrorBoundary extends React.Component<Props, State> {
    constructor(props: any) {
        super(props)
        this.state = { hasError: false }
    }
    static getDerivedStateFromError(error: any) {
       return { hasError: true }
    }
    async componentDidCatch(error: any, errorInfo: any) {

        try {
            const { message, stack } = error
            const width = window?.innerWidth || (document?.documentElement || {})?.clientWidth
            const height = window?.innerHeight || (document?.documentElement || {})?.clientHeight

            console.log(errorInfo)

            await ErrorService.save({
                pageTitle: document?.title,
                pageUrl: document?.URL
                userAgent: navigator?.userAgent,
                pageReferrer: document?.referrer,
                language: navigator?.language
                windowWidth: width,
                windowHeight: height,
                message,
                stack
            })

        } catch (e) {
            console.log(e)
        }

    }
    render() {

        const { t, lang } = this.props.i18n

        const {
            message,
            status,
            href,
            name
        } = this.props

        if (this.state.hasError || status) {
            return (
                <div>
                    <div className={stylesErrorBoundary.container}>
                        <h2 className={stylesErrorBoundary.message}>{message}</h2>
                        <div>
                            <button
                                type="button"
                                onClick={() => this.setState({ hasError: false })}
                            >
                                <span>{t("again")}</span>
                            </button>
                            <button
                                type="button"
                                onClick={() => {
                                    this.setState({ hasError: false })
                                    return window.location.href = href || "/"
                                }}
                            >
                                <span>{name || t("main")}</span>
                            </button>
                        </div>
                    </div>
                </div>
            )
        }
        return this.props.children
    }
}

export default withTranslation(ErrorBoundary, "errors")

Но ErrorBoundary не регистрирует данную ошибку, возможно все происходит до ErrorBoundary, или после того как все уже отработает.
//.app.tsx

return (
 <ErrorBoundary>
     // тут все что нужно
</ErrorBoundary>
)


Куда копать и как можно понят в чем проблема? Может быть еще можно как то отловить данную ошибку?
  • Вопрос задан
  • 40 просмотров
Решения вопроса 1
ms-dred
@ms-dred Автор вопроса
Вечно что то не то и что то не так...
Помог сервис app.lambdatest.com, зашел с нужного девайса и с нужно браузера на сайт, открыл консоль и увидел где косяк =)
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы