custom element for embedding Bluesky posts and feeds
mary-ext.github.io/bluesky-embed
typescript
npm
bluesky
atcute
fix: add error handling to web components
add try-catch blocks around fetchPost and fetchProfileCard calls
to gracefully handle errors and preserve fallback content.
closes https://github.com/mary-ext/bluesky-embed/pull/2
+60
-4
+15
-1
packages/bluesky-post-embed/lib/wc.ts
+15
-1
packages/bluesky-post-embed/lib/wc.ts
···
18
18
const serviceUri = this.getAttribute('service-uri') || undefined;
19
19
const contextless = this.getAttribute('contextless') !== null;
20
20
const allowUnauthenticated = this.getAttribute('allow-unauthenticated') !== null;
21
+
const silent = this.getAttribute('silent') !== null;
21
22
22
-
const data = await fetchPost({ uri: src, contextless, allowUnauthenticated, serviceUri });
23
+
const data = await fetchPost({ uri: src, contextless, allowUnauthenticated, serviceUri }).catch(
24
+
(error) => {
25
+
if (silent) {
26
+
console.warn('Failed to fetch post:', error);
27
+
return null;
28
+
}
29
+
throw error;
30
+
},
31
+
);
32
+
33
+
if (data === null) {
34
+
return;
35
+
}
36
+
23
37
const html = renderPost(data);
24
38
25
39
const root = this.shadowRoot;
+13
-1
packages/bluesky-profile-card-embed/lib/wc.ts
+13
-1
packages/bluesky-profile-card-embed/lib/wc.ts
···
17
17
const actor = this.getAttribute('actor')!;
18
18
const serviceUri = this.getAttribute('service-uri') || undefined;
19
19
const allowUnauthenticated = this.getAttribute('allow-unauthenticated') !== null;
20
+
const silent = this.getAttribute('silent') !== null;
20
21
21
-
const data = await fetchProfileCard({ actor, allowUnauthenticated, serviceUri });
22
+
const data = await fetchProfileCard({ actor, allowUnauthenticated, serviceUri }).catch((error) => {
23
+
if (silent) {
24
+
console.warn('Failed to fetch profile card:', error);
25
+
return null;
26
+
}
27
+
throw error;
28
+
});
29
+
30
+
if (data === null) {
31
+
return;
32
+
}
33
+
22
34
const html = renderProfileCard(data);
23
35
24
36
const root = this.shadowRoot;
+32
-2
packages/bluesky-profile-feed-embed/lib/wc.ts
+32
-2
packages/bluesky-profile-feed-embed/lib/wc.ts
···
18
18
const serviceUri = this.getAttribute('service-uri') || undefined;
19
19
const allowUnauthenticated = this.getAttribute('allow-unauthenticated') !== null;
20
20
const includePins = this.getAttribute('include-pins') !== null;
21
+
const silent = this.getAttribute('silent') !== null;
21
22
22
-
const data = await fetchProfileFeed({ actor, allowUnauthenticated, includePins, serviceUri });
23
+
const data = await fetchProfileFeed({ actor, allowUnauthenticated, includePins, serviceUri }).catch(
24
+
(error) => {
25
+
if (silent) {
26
+
console.warn('Failed to fetch profile feed:', error);
27
+
return null;
28
+
}
29
+
throw error;
30
+
},
31
+
);
32
+
33
+
if (data === null) {
34
+
return;
35
+
}
36
+
23
37
const html = renderProfileFeed(data);
24
38
25
-
this.innerHTML = html;
39
+
const root = this.shadowRoot;
40
+
41
+
if (!root) {
42
+
this.innerHTML = html;
43
+
} else {
44
+
const template = document.createElement('template');
45
+
template.innerHTML = html;
46
+
47
+
const fragment = template.content;
48
+
const slot = root.querySelector('slot');
49
+
50
+
if (slot) {
51
+
slot.replaceWith(fragment);
52
+
} else {
53
+
root.appendChild(fragment);
54
+
}
55
+
}
26
56
}
27
57
}
28
58