Ошибка пузыря от компонента React к emberjs
В моем приложении ember я могу визуализировать компонент React с помощью библиотеки ember-react-components. Это может выглядеть так
// This is ember component with jsx in stored in ember app in components/my-react-component/component.js
// it can be used in template.hbs like {{my-react-component dateFromat=dateFormat url=url}}
import React from "react";
import WithEmberSupport from "ember-react-components";
import { MyReactComponent } from "my-react-component";
function Component(props) {
return (
<MyReactComponent
dateFormat={props.dateFormat}
urlToBackend={props.url}
/>
);
export default WithEmberSupport(Component);
Я хочу вызвать Ember.onerror (где у меня много логики, обрабатывающей неавторизованные ошибки и прочее), поэтому в MyReactComponent у меня есть провайдер ошибок, который улавливает ошибки из реакции и пытается их выбросить
export function ErrorProvider(props: Props) {
const [state, setState] = React.useState(defaultState);
React.useEffect(() => {
const last =
state.errors.length === 0 ? null : state.errors[state.errors.length - 1];
if (last) {
throw new Error('some error');
}
}, [state.errors]);
return (
<ErrorContext.Provider
value={{
errors: state.errors,
addError: (e) => {
//this works, errors are correctly collected in state
setState({ ...state, errors: state.errors.concat(e) });
},
}}
>
{props.children}
</ErrorContext.Provider>
);
}
Это простой Context.Provider, который будет собирать ошибки, и если обнаружится какая-то ошибка, я сделаю throw new Error('some error')
в крючок.
Короче говоря MyReactComponent
выглядит примерно так:
export function MyReactComponent() {
//Somewhere here i will pass error to ErrorProvider
return (
<ErrorProvider>My whole compoponent</ErrorProvider>
)
}
и я хочу, чтобы эта ошибка всплывала в приложении Ember без передачи каких-либо дополнительных свойств моему компоненту. Это возможно?
заранее спасибо