Всем привет.
Столкнулся со следующей проблемой и никак не могу ее решить.
Проблема в том что некоторые пользователи, а именно пользователи Сафари испытывают проблемы с доступом к сайту, им вываливается ошибка вида
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>
)
Куда копать и как можно понят в чем проблема? Может быть еще можно как то отловить данную ошибку?
Средний
