React-native-windows: RN 0.63 Migration: Throw error to React via context

[Mamckay]

Currently we have some functionality in an 0.59 RNW(C#) application that can throw an error through the ReactContext.
``` C#
public void ThrowToReact(Exception error, Image i)
{
i.GetReactContext()
.GetNativeModule()
.EventDispatcher
.DispatchEvent(
new ReactUnderlyingErrorEvent(error, i.GetTag()));
}

The goal is to have this functionality in 0.63(C#) RNW. Here is what we have attempted to use to dispatch events so far.
``` C#
public void ThrowToReact(Exception error, Image i)
    {
      JSCustomWriter example = new JSCustomWriter();
      this.ReactContext.DispatchEvent(i, "renderError", new JSValueArgWriter(example.WriteValue));
    }

However this is not working as intended and we get an error when testing this code.

Can you provide any insight, examples, or documentation on what the proper implementation might look like?

Thanks!

[dannyvv]

Hi @Mamckay, I apologize that I can't look at the issue at the moment, but will have a look at this tomorrow.
It sounds like you upgraded from 0.59 to 0.63.
In the mean time, could you share the following:

• Did you update to the new csharp code gen or if you maintained the old reflection style pattern?
• If you use reflection, can you share the registration logic in App.xaml.cs? i.e. the line(s) that start with PackageProviders.Add(

[Mamckay]

Hey @dannyvv, yeah we are in the middle of upgrading our application to 0.63 from 0.59. We started with a fresh RNW(0.63) project and have started porting functionality as we get it working. We are using the new code gen method.

[dannyvv]

I completely forgot about it, looking now...

[dannyvv]

Hi @Mamckay: Could you share a bit more details?

I.e. the implementaiton of WriteValue in your custom JsValueWriter. The JSValueArgWriter is a delegate, so in C# you don't even need to new it explicitly. If the signare of the lamba you pass matches the delegate you could just use only example.WriteValue

I tried the following code to match your in [CustomUserControlViewManagerCS.cs](https://github.com/microsoft/react-native-windows/blob/master/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCS/CustomUserControlViewManagerCS.cs) in method CustomCommand

            ReactContext.DispatchEvent(view, "renderError", writer =>
            {
                writer.WriteObjectBegin();
                writer.WritePropertyName("X");
                writer.WriteString("hei");
                writer.WriteObjectEnd();
            });

And also this using the helper struct:

            new ReactContext(this.ReactContext).DispatchEvent(view, "renderError", new Point(10, 20));
        }

        public struct Point
        {
            public Point(int x, int y)
            {
                X = x;
                Y = y;
            }
            public int X;
            public int Y;
        }

And these worked fine, they failed on JS-side because I didn't hookup event listeners.

The recommended way would be to rely on the codegen to emit the event like this,

        [ViewManagerExportedDirectEventTypeConstant]
        public ViewManagerEvent<CustomUserControlCS, string> RenderError = null;

To fire this event you'd write:

    RenderError(yourControl, "Value")

of if your code can run before things are initialized or asynchroneous as things are shutting down, I'd recommend using:

    RenderError?.Invoke(yourControl, "Value");

to deal wit the event being null.

[msftbot[bot]]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 14 days of this comment.

[Mamckay]

Hey @dannyvv, the info you gave us was enough to get it working. We switched to use the ViewManagerExportedDirectEventTypeConstant and we are able to receive the render error event on the JS side now. Thanks for the help!

Native Component
```C#
[ViewManagerExportedDirectEventTypeConstant]
public ViewManagerEvent RenderError = null;

JS Component
```javascript
<RCTNativeView onRenderError= {(evt) => *CODE BLOCK*} />

[dannyvv]

Thanks for letting us know. Happy we could help.