Foreman 3.3 (Webhooks Plugin 3.0.4) Minified React Error on Webhooks Page Load

bnerickson · September 1, 2022, 8:30pm

Problem:

When opening the Webhooks page in Foreman, I’m getting an error message and the page does not load the Webhooks contents.

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=null&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.,
    in p
    in Button
    in d
    in div
    in ToolbarItem
    in div
    in u
    in ForwardRef
    in div
    in div
    in ToolbarContent
    in div
    in GenerateId
    in Toolbar
    in section
    in PageSection
    in div
    in w
    in b
    in t
    in t
    in u
    in f
    in d
    in div
    in c
    in p
    in y
    in t
    in n
    in a
    in C
    in s
    in div
    in b
    in IntlProvider
    in I18nProviderWrapper(b)
    in d
    in StoreProvider(I18nProviderWrapper(b))
    in DataProvider(StoreProvider(I18nProviderWrapper(b)))

Expected outcome:

Webhooks page loads correctly.

Foreman and Proxy versions:

foreman 3.3.0-1
foreman-proxy 3.3.0-1

Foreman and Proxy plugin versions:

foreman-tasks 6.0.2
foreman_ansible 7.1.2
foreman_host_reports 1.0.2
foreman_puppet 4.0.1
foreman_remote_execution 7.1.1
foreman_webhooks 3.0.4
foreman_xen 1.0.1
katello 4.5.0

Distribution and version:

CentOS Stream 8

Other relevant data:
Foreman production.log looks good to me when loading the page:

2022-09-01T13:21:01 [I|app|4f369e5f] Started GET "/webhooks" for fd00::ffff:c0a8:e5 at 2022-09-01 13:21:01 -0700
2022-09-01T13:21:01 [I|app|4f369e5f] Processing by ReactController#index as HTML
2022-09-01T13:21:01 [I|app|4f369e5f]   Rendering react/index.html.erb within layouts/react_application
2022-09-01T13:21:01 [I|app|4f369e5f]   Rendered react/index.html.erb within layouts/react_application (Duration: 3.6ms | Allocations: 5657)
2022-09-01T13:21:01 [I|app|4f369e5f]   Rendering layouts/base.html.erb
2022-09-01T13:21:01 [I|app|4f369e5f]   Rendered layouts/base.html.erb (Duration: 21.6ms | Allocations: 26030)
2022-09-01T13:21:01 [I|app|4f369e5f] Completed 200 OK in 37ms (Views: 27.6ms | ActiveRecord: 2.2ms | Allocations: 40336)
2022-09-01T13:21:02 [I|app|d25aba13] Started GET "/notification_recipients" for fd00::ffff:c0a8:e5 at 2022-09-01 13:21:02 -0700
2022-09-01T13:21:02 [I|app|d25aba13] Processing by NotificationRecipientsController#index as JSON
2022-09-01T13:21:02 [I|app|d25aba13] Completed 200 OK in 7ms (Views: 0.1ms | ActiveRecord: 1.5ms | Allocations: 2245)
2022-09-01T13:21:03 [I|app|c70ce32e] Started GET "/api/v2/webhooks?include_permissions=true" for fd00::ffff:c0a8:e5 at 2022-09-01 13:21:03 -0700
2022-09-01T13:21:03 [I|app|7e4c2a39] Started GET "/api/v2/webhooks?include_permissions=true" for fd00::ffff:c0a8:e5 at 2022-09-01 13:21:03 -0700
2022-09-01T13:21:03 [I|app|c70ce32e] Processing by Api::V2::WebhooksController#index as JSON
2022-09-01T13:21:03 [I|app|c70ce32e]   Parameters: {"include_permissions"=>"true", "apiv"=>"v2"}
2022-09-01T13:21:03 [I|app|7e4c2a39] Processing by Api::V2::WebhooksController#index as JSON
2022-09-01T13:21:03 [I|app|7e4c2a39]   Parameters: {"include_permissions"=>"true", "apiv"=>"v2"}
2022-09-01T13:21:03 [I|app|c70ce32e]   Rendering /usr/share/gems/gems/foreman_webhooks-3.0.4/app/views/api/v2/webhooks/index.json.rabl within api/v2/layouts/index_layout
2022-09-01T13:21:03 [I|app|7e4c2a39]   Rendering /usr/share/gems/gems/foreman_webhooks-3.0.4/app/views/api/v2/webhooks/index.json.rabl within api/v2/layouts/index_layout
2022-09-01T13:21:03 [I|app|c70ce32e]   Rendered /usr/share/gems/gems/foreman_webhooks-3.0.4/app/views/api/v2/webhooks/index.json.rabl within api/v2/layouts/index_layout (Duration: 17.1ms | Allocations: 14448)
2022-09-01T13:21:03 [I|app|7e4c2a39]   Rendered /usr/share/gems/gems/foreman_webhooks-3.0.4/app/views/api/v2/webhooks/index.json.rabl within api/v2/layouts/index_layout (Duration: 17.2ms | Allocations: 14452)
2022-09-01T13:21:03 [I|app|c70ce32e] Completed 200 OK in 31ms (Views: 22.2ms | ActiveRecord: 1.8ms | Allocations: 23423)
2022-09-01T13:21:03 [I|app|7e4c2a39] Completed 200 OK in 30ms (Views: 21.7ms | ActiveRecord: 1.8ms | Allocations: 23440)
2022-09-01T13:21:04 [I|app|0dc84bfc] Started GET "/api/v2/webhooks?include_permissions=true" for fd00::ffff:c0a8:e5 at 2022-09-01 13:21:04 -0700
2022-09-01T13:21:04 [I|app|0dc84bfc] Processing by Api::V2::WebhooksController#index as JSON
2022-09-01T13:21:04 [I|app|0dc84bfc]   Parameters: {"include_permissions"=>"true", "apiv"=>"v2"}
2022-09-01T13:21:04 [I|app|0dc84bfc]   Rendering /usr/share/gems/gems/foreman_webhooks-3.0.4/app/views/api/v2/webhooks/index.json.rabl within api/v2/layouts/index_layout
2022-09-01T13:21:04 [I|app|0dc84bfc]   Rendered /usr/share/gems/gems/foreman_webhooks-3.0.4/app/views/api/v2/webhooks/index.json.rabl within api/v2/layouts/index_layout (Duration: 17.4ms | Allocations: 14448)
2022-09-01T13:21:04 [I|app|0dc84bfc] Completed 200 OK in 31ms (Views: 22.0ms | ActiveRecord: 2.5ms | Allocations: 23423)

Nothing in ausearch to indicate an SELinux permissions issue.

bnerickson · September 1, 2022, 8:41pm

Uploaded error screenshot. No errors noted in /var/log/httpd/foreman*. I rebooted to no avail. Tried Microsoft Edge as-well-as Firefox to no avail.

bnerickson · September 2, 2022, 6:46pm

Here’s the error that’s thrown in the javascript console:

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=null&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    React 8
        Sc
        Ca
        Ti
        hl
        sc
        lc
        Jl
        Gr
react-dom.production.min.js:209:194
    React 5
        el
        callback
        pa
        al
        fc
    unstable_runWithPriority scheduler.production.min.js:19
    React 4
        Hr
        pc
        Jl
        Gr
    unstable_runWithPriority scheduler.production.min.js:19
    React 4
        Hr
        Gr
        Ur
        ec
    Redux 4
        notify
        notifyNestedSubs
        handleChangeWrapper
        h
    E middleware.js:22
    Redux 5
        APIMiddleware
        l
        o
        dispatch
        e
    s runtime.js:63
    _invoke runtime.js:293
    v runtime.js:118
    Redux 10
        f
        s
        (Async: promise callback)
    f
        s
        m
        t
        m
        APIMiddleware
        l
        o
    useAPI APIHooks.js:30
    React 2
        rl
        hc
    unstable_runWithPriority scheduler.production.min.js:19
    React 4
        Hr
        _c
        Jl
        Gr
    unstable_runWithPriority scheduler.production.min.js:19
    React 15
        Hr
        Gr
        Ur
        E
        Zt
        Kt
        Gt
        mt
        cn
        Yi
        dc
        sc
        lc
        Jl
        Gr
    unstable_runWithPriority scheduler.production.min.js:19
    React 6
        Hr
        Gr
        Ur
        Kl
        enqueueSetState
        setState
    c i18nProviderWrapperFactory.js:19
    (Async: promise callback)
    m i18nProviderWrapperFactory.js:18
    React 12
        va
        $i
        hl
        sc
        lc
        Jl
        Kl
        Ac
        Wc
        tc
        Wc
        render
    h MountingService.js:22
    value MountingService.js:86
    value MountingService.js:69
    (Async: LifecycleConnectedCallback)
    js MountingService.js:98
    Webpack 5
        a
        js
        a
        webpackJsonp
        <anonymous>

Ron_Lavi · September 4, 2022, 11:01am

Foreman develop and foreman_webhooks v3.0.4 works well,
but foreman v3.3 and foreman_webhooks v3.0.4 fails on my env as well with the error:

react.development.js:315 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: null.

Check the render method of `ButtonBase`.
    in ButtonBase (created by Button)
    in Button (created by ActionButtons)
    in ActionButtons (created by TableIndexPage)

@MariaAga, @ofedoren could you investigate more into it?

MariaAga · September 5, 2022, 8:30am

This was fixed here:

github.com/theforeman/foreman

Fixes #34987 - Force 1 call on first load for TableIndexPage

theforeman:develop ← ofedoren:bug-34987-table-index-page-bug

opened 10:39AM - 31 May 22 UTC

ofedoren

+11 -8

There are two bugs: - a really small one, so I've included the fix here. Acti…on buttons in new TableIndexPage template didn't allow to pass a function as action instead of href. - TableIndexPage did 3 same API calls instead of 1 on first load. The current behaviour can be tested on /models page. I've tried to use the new template in foreman_webhooks, so this fix was mostly tested on https://github.com/theforeman/foreman_webhooks/pull/51. The bugs are also present in 3.3.

so foreman version 3.4.0-rc1 and later should work

MariaAga · September 5, 2022, 8:40am

Specifically here:

component={firstButton.action?.href ? 'a' : undefined}

Ron_Lavi · September 5, 2022, 9:58am

Thanks @MariaAga,
so it looks like a cherry-pick was missing,
added CP to foreman 3.3: https://github.com/theforeman/foreman/pull/9404

bnerickson · September 5, 2022, 4:41pm

Thanks, all.