Sticker panel renders blank, console shows a creatorUserID error #35

ghost · 2023-03-08T19:48:03Z

Steps to reproduce

I didn't have Stickers enabled yet so this assumes you're starting from the same point.

Click on the ... button to the left of the message composer box
Click on the Sticker item
Click to add some stickers
Follow the prompts to enable the integration and add some stickers
Close out of the panel and click the ... button again to view stickers to add

Outcome

What did you expect?

I expected to be able to add stickers to my message

What happened instead?

In some instances the UI thinks I haven't added stickers yet and prompts me to add some.

In other instances the panel renders completely empty (no text, images, buttons or links) and the following error shows in the Console:

Uncaught Error: creatorUserId is required
    assertPresent utils.js:25
    e Widget.js:28
    Un StopGapWidget.ts:87
    vs AppTile.tsx:168
    getNewState AppTile.tsx:233
    vs AppTile.tsx:149
    React 8
        Eo
        ja
        $s
        kl
        Cl
        xl
        El
        i
    unstable_runWithPriority scheduler.production.min.js:18
    React 5
        Vi
        $i
        Wi
        Ne
        Kt
utils.js:25:10
    assertPresent utils.js:25
    e Widget.js:28
    Un StopGapWidget.ts:87
    vs AppTile.tsx:168
    getNewState AppTile.tsx:233
    vs AppTile.tsx:149
    React 7
    El self-hosted:1409
    i React
    unstable_runWithPriority scheduler.production.min.js:18
    React 5
    bind_applyFunctionN self-hosted:1686
    Kt self-hosted:1643

Operating system

OpenSUSE Micro OS

Browser information

Firefox 110.0.1 (Flatpak edition)

URL for webapp

Happens with both develop.element.io and a private instance

Application version

Element version: v1.11.25-rc.1-r2.2 Olm version: 3.2.12

Homeserver

matrix.org and element.io

Will you send logs?

No

The text was updated successfully, but these errors were encountered:

daniellekirkwood · 2023-03-22T13:58:06Z

@andybalaam can you link the PR we think caused this please

andybalaam · 2023-03-22T15:00:16Z

We think it was broken by:

Implement MSC3973: Search users in the user directory with the Widget API matrix-org/matrix-widget-api#79 and
Implement MSC3973: Search users in the user directory with the Widget API matrix-org/matrix-react-sdk#10269

And it is hopefully going to be fixed by:

Fix creatorUserId is required error when opening sticker picker matrix-org/matrix-react-sdk#10423

andybalaam · 2023-03-23T17:26:14Z

I believe this is fixed by matrix-org/matrix-react-sdk#10423 - please re-open if not.

ghost · 2023-03-31T11:20:08Z

Testing this again to verify if it's fixed.

Element.io

I am seeing just a white square, there are no errors or warnings showing up in Firefox dev tools anymore though. This is using element.io as the matrix host server.

This is actually in some respects this is worse now because I no longer see the UI saying I don't have any sticker packs enabled, I just get the blank panel. Click on the ... button in the top right allows me to Edit or Remove, but unless I know to click on Edit I have no way of knowing what to do here. I am not sure if element.io supports sticker packs, but if it doesn't we should improve the UX/UI here to communicate that in some way.

Matrix.org

Using matrix.org as the host server, I get the normal panel asking me to add sticker packs, but after I follow the steps to add them the panel still thinks I don't have any enabled. But at least it's not just showing me a black panel anymore.

Here is what shows in the integrations manager (see enabled sticker packs):

And here is what the sticker panel shows after closing the integrations manager:

Please advise if you'd like me to open a new issue or reopen this issue.

andybalaam · 2023-04-03T08:52:10Z

Thanks @ashughes1 - re-opening.

andybalaam · 2023-04-03T08:52:51Z

@justinbot any idea what's going on here?

Half-Shot · 2023-04-03T10:03:37Z

N.B. Opening the sticker picker for me doesn't show any errors in the console or any attempts to open an iframe from the network logs. I don't think this is a integration manager issue?

justinbot · 2023-04-03T13:29:45Z

@ashughes1 Can you confirm what version of Element Web you're seeing this issue on?
~~It's fixed for me on v1.11.28.~~ (Nevermind I see it now)

As far as the second issue where stickers don't appear right after adding, this is unrelated to the original issue but due to the sticker picker not refreshing (element-hq/element-web#23295). Usually if you navigate rooms or refresh the page they will appear.

justinbot · 2023-04-03T21:00:07Z

@andybalaam did matrix-org/matrix-react-sdk#10423 actually make it to an Element Web release yet? It hasn't appeared in any changelogs...

I tested this again and I do see the issue with v1.11.28 (might have had a development build cached last time).
When I build Element Web with matrix-react-sdk on develop it's fixed -- but still broken on the latest release.

andybalaam · 2023-04-04T11:45:56Z

@justinbot the fix is included in today's release candidate v1.11.29-rc.1 and will be released in the next release on 11th April 2023, v1.11.29.

andybalaam · 2023-04-04T11:46:36Z

@ashughes1 which version were you testing?

ghost · 2023-05-08T19:32:19Z

Sorry for the delay. I am not seeing this on develop but I am on production with Element 1.11.30, Olm 3.2.12.

andybalaam · 2023-05-09T12:41:27Z

@Half-Shot I don't think this needs design. It's a normal bug...

andybalaam · 2023-05-09T12:42:34Z

Sorry for the delay. I am not seeing this on develop but I am on production with Element 1.11.30, Olm 3.2.12.

OK, in that case let's say it's closed in today's release 1.11.31 (coming soon), and if you see it again there, please re-open again. Thank you!

ghost · 2023-06-28T13:21:06Z

I think I have figured out what is going on here, please advise if I should reopen.

On app.element.io with Enhanced Tracking Protection enabled (or in a Private Browsing window) the sticker panel loads blank and shows the errors below in the Web Console. If I disable Enhanced Tracking Protection the panel loads.

However, on dev.element.io the panel loads perfectly fine with ETP enabled. I'm not sure what is different in this case.

Errors in web console with ETP enabled on app.element.io

Error when enabling the integration:

XHR POST https://integrations.element.io/api/widgets/request

POST https://integrations.element.io/api/widgets/request
Status: 409 Conflict
Version: HTTP/2
Transferred: 918 B (206 B size)
Referrer Policy: strict-origin-when-cross-origin
Request Priority: Highest

Response Headers (712 B)
HTTP/2 409 Conflict
date: Wed, 28 Jun 2023 13:00:54 GMT
content-type: application/json; charset=utf-8
content-length: 206
x-frame-options: DENY
content-security-policy: frame-ancestors 'none';default-src 'self';base-uri 'self';block-all-mixed-content;font-src 'self' https: data:;form-action 'self';img-src 'self' data:;object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests
strict-transport-security: max-age=15724800; includeSubDomains
x-content-type-options: nosniff
access-control-allow-origin: *
ratelimit-limit: 256
ratelimit-remaining: 254
ratelimit-reset: 3
etag: W/"ce-ed4QmHtt8D7rAYTNampbg5TB3jo"
X-Firefox-Spdy: h2

Request Headers (506 B)
POST /api/widgets/request HTTP/2
Host: integrations.element.io
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/113.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://scalar.vector.im/
Content-Type: application/json
Authorization: Bearer RX0kG3z3322mmxKg-mqx
Content-Length: 26
Origin: https://scalar.vector.im
DNT: 1
Connection: keep-alive
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
TE: trailers

Errors when opening the sticker panel

HTTP GET error:

GET https://scalar.vector.im/api/widgets/id/8951c925-4936-470d-a8e7-49fc9bdb4201/stickers-5578c29784babbc68f4d.bundle.js

Status: 403 Forbidden
Version: HTTP/2
Transferred: 365 B (0 B size)
Referrer Policy: strict-origin-when-cross-origin

Response Headers
HTTP/2 403 Forbidden
date: Wed, 28 Jun 2023 13:01:31 GMT
content-type: text/html; charset=utf-8
content-length: 1080
strict-transport-security: max-age=15724800; includeSubDomains
x-content-type-options: nosniff
access-control-allow-origin: *
referrer-policy: strict-origin-when-cross-origin
etag: W/"438-Lf8g2cIJp0H0wiLwcpvUu2KDx9k"
X-Firefox-Spdy: h2

Request Headers
GET /api/widgets/id/8951c925-4936-470d-a8e7-49fc9bdb4201/stickers-5578c29784babbc68f4d.bundle.js HTTP/2
Host: scalar.vector.im
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/113.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://scalar.vector.im/api/widgets/id/8951c925-4936-470d-a8e7-49fc9bdb4201/stickers.html?widgetId=8951c925-4936-470d-a8e7-49fc9bdb4201&parentUrl=https%3A%2F%2Fapp.element.io%2F&scalar_token=RX0kG3z3322mmxKg-mqx
DNT: 1
Connection: keep-alive
Sec-Fetch-Dest: script
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: same-origin
TE: trailers

MIME type error:

The resource from “https://scalar.vector.im/api/widgets/id/8951c925-4936-470d-a8e7-49fc9bdb4201/stickers-5578c29784babbc68f4d.bundle.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

Request timeout error in PostmessageTransport.js:

Uncaught (in promise) Error: Request timed out
o PostmessageTransport.js:134
    setTimeout handler*value/g< PostmessageTransport.js:133
    value PostmessageTransport.js:122
    value PostmessageTransport.js:103
    value ClientWidgetApi.js:164
    value ClientWidgetApi.js:202
    I ClientWidgetApi.js:104
    startMessaging StopGapWidget.ts:286
    startMessaging AppTile.tsx:372
    ir AppTile.tsx:382
    React 12
    setState event-context.ts:76
    startWidget AppTile.tsx:366
    promise callback*startWidget AppTile.tsx:364
    componentDidMount AppTile.tsx:291
    React (13)

justinbot · 2023-06-28T14:00:40Z

@ashughes1 That looks similar to #28 where tracking prevention is blocking cookies in cross-origin iframes which breaks authentication. Do other widgets work with Enhanced Tracking Protection enabled?

ghost · 2023-06-28T14:46:56Z

@justinbot Jitsi Meet seems to work but the others do not with ETP turned on.

justinbot · 2023-06-28T18:27:00Z

Thanks. Unfortunately this is a difficult restriction we don't have a solution for at the moment, but you may be able to add an exception to ETP.

ghost added the T-Defect label Mar 8, 2023

t3chguy transferred this issue from element-hq/element-web Mar 9, 2023

t3chguy mentioned this issue Mar 22, 2023

Stickerpicker is broken element-hq/element-web#24887

Closed

andybalaam assigned justinbot Mar 22, 2023

andybalaam added the X-Regression label Mar 22, 2023

andybalaam closed this as completed Mar 23, 2023

andybalaam reopened this Apr 3, 2023

Half-Shot added the X-Needs-Design label Apr 12, 2023

andybalaam closed this as completed May 9, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sticker panel renders blank, console shows a creatorUserID error #35

Sticker panel renders blank, console shows a creatorUserID error #35

ghost commented Mar 8, 2023

daniellekirkwood commented Mar 22, 2023

andybalaam commented Mar 22, 2023

andybalaam commented Mar 23, 2023

ghost commented Mar 31, 2023 •

edited by ghost

Loading

andybalaam commented Apr 3, 2023

andybalaam commented Apr 3, 2023

Half-Shot commented Apr 3, 2023

justinbot commented Apr 3, 2023 •

edited

Loading

justinbot commented Apr 3, 2023

andybalaam commented Apr 4, 2023

andybalaam commented Apr 4, 2023

ghost commented May 8, 2023

andybalaam commented May 9, 2023

andybalaam commented May 9, 2023

ghost commented Jun 28, 2023

justinbot commented Jun 28, 2023

ghost commented Jun 28, 2023

justinbot commented Jun 28, 2023

Sticker panel renders blank, console shows a creatorUserID error #35

Sticker panel renders blank, console shows a creatorUserID error #35

Comments

ghost commented Mar 8, 2023

Steps to reproduce

Outcome

What did you expect?

What happened instead?

Operating system

Browser information

URL for webapp

Application version

Homeserver

Will you send logs?

daniellekirkwood commented Mar 22, 2023

andybalaam commented Mar 22, 2023

andybalaam commented Mar 23, 2023

ghost commented Mar 31, 2023 • edited by ghost Loading

Element.io

Matrix.org

andybalaam commented Apr 3, 2023

andybalaam commented Apr 3, 2023

Half-Shot commented Apr 3, 2023

justinbot commented Apr 3, 2023 • edited Loading

justinbot commented Apr 3, 2023

andybalaam commented Apr 4, 2023

andybalaam commented Apr 4, 2023

ghost commented May 8, 2023

andybalaam commented May 9, 2023

andybalaam commented May 9, 2023

ghost commented Jun 28, 2023

Errors in web console with ETP enabled on app.element.io

Error when enabling the integration:

Errors when opening the sticker panel

justinbot commented Jun 28, 2023

ghost commented Jun 28, 2023

justinbot commented Jun 28, 2023

ghost commented Mar 31, 2023 •

edited by ghost

Loading

justinbot commented Apr 3, 2023 •

edited

Loading