#1 Uncaught TypeError: obj.backgroundimage is null

Closed

opened 1 year ago by senooken · 4 comments

一部のユーザーがアバター画像類を変更すると、ユーザー画面を開くと、以下のJavaScriptエラーが出ていて、表示できない。

Uncaught TypeError: obj.backgroundimage is null
    changeDesign https://gnusocial.jp/plugins/Qvitter/js/misc-functions.js?changed=20221015073538:1884
    addProfileCardToDOM https://gnusocial.jp/plugins/Qvitter/js/dom-functions.js?changed=20221118084815:625
    setNewCurrentStream https://gnusocial.jp/plugins/Qvitter/js/dom-functions.js?changed=20221118084815:1042
    success https://gnusocial.jp/plugins/Qvitter/js/ajax-functions.js?changed=20221015073536:185
    jQuery 4
misc-functions.js:1884:11

何らかの理由で obj.backgroundimage is null になっていて、後続処理が失敗しているようだ。

報告元 https://gnusocial.jp/notice/1136099。検証環境で再現できないので、このエラーから原因を推測して対応するしかなさそう。

2022-11-29T15:38:59.000Z
優しい写真|nsfw1086@gnusocial.jp
replying to ぐぬ管 (GNU social JP管理人)|gnusocialjp@gnusocial.jp
@gnusocialjp 遅くなってしまいごめんなさい、前回アバター画像を変更したときの手順はこうです。 Classic UI を使用している状態から、 settings/qvitter にて [Disable Qvitter] のチェックを外したあと、[Save]。メニューの [HOME] で Qvitter のホーム画面に遷移する。ホーム画面の [プロフィールを編集する] の文字をクリックするとアバター画像に重なってカメラマークが表示されるので、カメラマークをクリックして手元にある jpeg ファイルをアップロードしました。そのときのファイル名は jr2uj0fp_400x400 - コピー.jpg でした。

一部のユーザーがアバター画像類を変更すると、ユーザー画面を開くと、以下のJavaScriptエラーが出ていて、表示できない。 ``` Uncaught TypeError: obj.backgroundimage is null changeDesign https://gnusocial.jp/plugins/Qvitter/js/misc-functions.js?changed=20221015073538:1884 addProfileCardToDOM https://gnusocial.jp/plugins/Qvitter/js/dom-functions.js?changed=20221118084815:625 setNewCurrentStream https://gnusocial.jp/plugins/Qvitter/js/dom-functions.js?changed=20221118084815:1042 success https://gnusocial.jp/plugins/Qvitter/js/ajax-functions.js?changed=20221015073536:185 jQuery 4 misc-functions.js:1884:11 ``` 何らかの理由で `obj.backgroundimage is null` になっていて、後続処理が失敗しているようだ。報告元 <https://gnusocial.jp/notice/1136099>。検証環境で再現できないので、このエラーから原因を推測して対応するしかなさそう。 <blockquote style="background:rgb(29,155,240);background-image:linear-gradient(hsla(0,0%,100%,0.5),hsla(0,0%,100%,0.5))"><article><header style="display:flex;line-height:1.5"><img referrerpolicy="no-referrer" alt="avatar" src="//gnusocial.jp/avatar/23508-48-20221124141048.webp" style="height:4.5em"><div><div><a href="https://gnusocial.jp/notice/1136099">2022-11-29T15:38:59.000Z</a></div><div>優しい写真|<a href="https://gnusocial.jp/nsfw1086">nsfw1086@gnusocial.jp</a></div><div><a href="https://gnusocial.jp/notice/1049775">replying to</a> ぐぬ管 (GNU social JP管理人)|<a href="https://gnusocial.jp/gnusocialjp">gnusocialjp@gnusocial.jp</a></div></div></header><main><span style="white-space:pre-wrap">@gnusocialjp 遅くなってしまいごめんなさい、前回アバター画像を変更したときの手順はこうです。 Classic UI を使用している状態から、 settings/qvitter にて [Disable Qvitter] のチェックを外したあと、[Save]。メニューの [HOME] で Qvitter のホーム画面に遷移する。ホーム画面の [プロフィールを編集する] の文字をクリックするとアバター画像に重なってカメラマークが表示されるので、カメラマークをクリックして手元にある jpeg ファイルをアップロードしました。そのときのファイル名は jr2uj0fp_400x400 - コピー.jpg でした。</span></main></article></blockquote>

問題になっているbackgroundimageを設定しているのは以下の3箇所。

// ajax-functions.js
function postNewBackgroundColor(newBackgroundColor) {
	$.ajax({ url: window.apiRoot + 'qvitter/update_background_color.json',
		cache: false,
		type: "POST",
		data: {
			backgroundcolor: newBackgroundColor
			},
		dataType:"json",
		error: function(data){ console.log(data); },
		success: function(data) {
			// unset background image and set new color
			window.loggedIn.background_image = false;
			changeDesign({backgroundimage:false,backgroundcolor:newBackgroundColor});
			}
		});

/// dom-function.js
function addProfileCardToDOM(data) {
	// change design
	changeDesign({
		backgroundimage: data.userArray.background_image,
		backgroundcolor: data.userArray.backgroundcolor,
		linkcolor: data.userArray.linkcolor});
	// remove any old profile card and show profile card
	$('#feed').siblings('.profile-card').remove();
	$('#feed').before(data.profileCardHtml);
}

// dom-functions.js
function setNewCurrentStream(streamObject,setLocation,fallbackId,actionOnSuccess) {
...
		// (3) change design immediately to either cached design or logged in user's
		if(typeof window.oldStreamsDesigns[window.currentStreamObject.nickname] != 'undefined') {
			changeDesign(window.oldStreamsDesigns[window.currentStreamObject.nickname]);
			}
		else {
			changeDesign({backgroundimage:window.loggedIn.background_image, backgroundcolor:window.loggedIn.backgroundcolor, linkcolor:window.loggedIn.linkcolor});
			}
		}

このuserArrayがなんか変か。backgroundimageは基本的に背景画像のURL。中途半端にfalseが入って型がごちゃまぜになっているのがまずい。

コールスタックで例外の発生場所とその時のobjの内容。

/// misc-functions.js
function changeDesign(obj) {
...
    // change design elements
    if(typeof obj.backgroundimage != 'undefined') {
        if(obj.backgroundimage === false || obj.backgroundimage == '') {
            $('body').css('background-image','url(\'\')');
            }
        else if(obj.backgroundimage.length > 4) {
            $('body').css('background-image','url(\'' + obj.backgroundimage + '\')');
            }
        window.oldStreamsDesigns[window.currentStreamObject.nickname].backgroundimage = obj.backgroundimage;
        }

obj: {…}
backgroundcolor: "a47cb3"
backgroundimage: null
linkcolor: "8386de"

if文がまずい気がする。

変数類がnullの場合を考慮できていなくて、nullアクセスで例外が発生していた。使用するオブジェクトのnullガードを入れて解決した。

Add null guard · 57b4e728cf - NotABug.org: Free code hosting

senooken closed 1 year ago

APIがbackgroud-image=falseを返すことがあり、falseのURLを参照しにいってしまっていたので、falseの場合は空になるように修正した。

Consider API returning false background-image value · d630b65e52 - NotABug.org: Free code hosting

bug

No Milestone

senooken

1 Participants