Skip to content

Commit f376cf4

Browse files
mydeamydea
committed
feat(js): Add SDK Options page
1 parent 75f3ac3 commit f376cf4

File tree

12 files changed

+714
-474
lines changed

12 files changed

+714
-474
lines changed

‎docs/platforms/javascript/common/configuration/environments.mdx‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎docs/platforms/javascript/common/configuration/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Configuration
33
description: "Learn about additional configuration options for the Javascript SDKs."
4-
sidebar_order: 2
4+
sidebar_order: 3
55
---
66

77
<PageGrid />

‎docs/platforms/javascript/common/configuration/options.mdx‎

Lines changed: 0 additions & 448 deletions
This file was deleted.

‎docs/platforms/javascript/common/options.mdx‎

Lines changed: 452 additions & 0 deletions
Large diffs are not rendered by default.

‎platform-includes/configuration/config-intro/javascript.mdx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
Options are passed to the `init()` function as object:
22

3-
43
```javascript
54
Sentry.init({
65
dsn: "___PUBLIC_DSN___",
7-
maxBreadcrumbs: 50,
86
debug: true,
97
});
108
```

‎src/components/docPage/type.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,8 @@
9191
font-size: 1rem;
9292
}
9393

94-
p code {
94+
p code,
95+
table code {
9596
color: var(--codeColor);
9697
margin: 0 2px;
9798
}
@@ -198,6 +199,10 @@
198199
[data-onboarding-option].animate-content {
199200
animation: slideDown 0.2s ease-out forwards;
200201
}
202+
203+
.w-auto {
204+
width: auto;
205+
}
201206
}
202207

203208
@keyframes slideDown {

‎src/components/platformCategorySection.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,26 @@
11
import {getCurrentPlatformOrGuide} from 'sentry-docs/docTree';
22
import {serverContext} from 'sentry-docs/serverContext';
3-
import {Platform, PlatformGuide} from 'sentry-docs/types';
3+
import {Platform, PlatformCategory, PlatformGuide} from 'sentry-docs/types';
44

55
type Props = {
66
children?: React.ReactNode;
77
noGuides?: boolean;
8-
notSupported?: string[];
8+
notSupported?: `${PlatformCategory}`[];
99
platform?: string;
10-
supported?: string[];
10+
supported?: `${PlatformCategory}`[];
1111
};
1212

1313
const isSupported = (
1414
platformOrGuide: Platform | PlatformGuide,
15-
supported: string[],
16-
notSupported: string[]
15+
supported: `${PlatformCategory}`[],
16+
notSupported: `${PlatformCategory}`[]
1717
): boolean => {
1818
if (platformOrGuide.categories === null) {
1919
return false;
2020
}
2121

22-
const categories = (platformOrGuide.categories || []) as string[];
22+
const categories = (platformOrGuide.categories ||
23+
[]) as unknown as `${PlatformCategory}`;
2324

2425
if (supported.length && !supported.some(v => categories.includes(v))) {
2526
return false;

‎src/components/sdkOption.tsx‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
import {getCurrentPlatformOrGuide} from 'sentry-docs/docTree';
2+
import {serverContext} from 'sentry-docs/serverContext';
3+
import {PlatformCategory} from 'sentry-docs/types';
4+
5+
import {PlatformCategorySection} from './platformCategorySection';
6+
import {PlatformSection} from './platformSection';
7+
8+
type Props = {
9+
name: string;
10+
type: string;
11+
categorySupported?: `${PlatformCategory}`[];
12+
children?: React.ReactNode;
13+
defaultValue?: string;
14+
envVar?: string;
15+
group?: string;
16+
};
17+
18+
export function SdkOption({
19+
name,
20+
children,
21+
type,
22+
defaultValue,
23+
envVar,
24+
categorySupported = [],
25+
}: Props) {
26+
// This is a literal copypaste of the HTML Gatsby outputs for regular
27+
// Markdown headings because we can't figure out how to make Gatsby
28+
// render component content like regular markdown/MDX content. We tried
29+
// MDXRenderer but that one needs "compiled MDX" which we are unable to
30+
// obtain. We might get one if we inserted a graphql node somewhere but
31+
// who knows at this point.
32+
33+
const {showBrowserOnly, showServerLikeOnly} = getPlatformHints(categorySupported);
34+
35+
return (
36+
<PlatformCategorySection supported={categorySupported}>
37+
<div>
38+
<h3 id={name} aria-label={name} data-sdk-option>
39+
<a href={`#${name}`}>
40+
<svg
41+
className="anchorlink before"
42+
viewBox="0 0 24 24"
43+
xmlns="http://www.w3.org/2000/svg"
44+
width="16"
45+
height="16"
46+
>
47+
<path
48+
d="M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z"
49+
fill="currentColor"
50+
/>
51+
</svg>
52+
{name}
53+
</a>
54+
</h3>
55+
56+
<table className="w-auto">
57+
<tbody>
58+
{type && (
59+
<tr>
60+
<th>Type</th>
61+
<td>
62+
<code>{type}</code>
63+
</td>
64+
</tr>
65+
)}
66+
{defaultValue && (
67+
<tr>
68+
<th>Default</th>
69+
<td>
70+
<code>{defaultValue}</code>
71+
</td>
72+
</tr>
73+
)}
74+
<PlatformCategorySection supported={['server', 'serverless']}>
75+
<PlatformSection notSupported={['javascript.nextjs']}>
76+
{envVar && (
77+
<tr>
78+
<th>ENV Variable</th>
79+
<td>
80+
<code>{envVar}</code>
81+
</td>
82+
</tr>
83+
)}
84+
</PlatformSection>
85+
</PlatformCategorySection>
86+
87+
{showBrowserOnly && (
88+
<tr>
89+
<th>Only available in</th>
90+
<td>Client</td>
91+
</tr>
92+
)}
93+
94+
{showServerLikeOnly && (
95+
<tr>
96+
<th>Only available in</th>
97+
<td>Server</td>
98+
</tr>
99+
)}
100+
</tbody>
101+
</table>
102+
103+
{children}
104+
</div>
105+
</PlatformCategorySection>
106+
);
107+
}
108+
109+
function getPlatformHints(categorySupported: `${PlatformCategory}`[]) {
110+
const {rootNode, path} = serverContext();
111+
const currentPlatformOrGuide = getCurrentPlatformOrGuide(rootNode, path);
112+
const currentCategories = currentPlatformOrGuide?.categories || [];
113+
114+
// We only handle browser, server & serverless here for now
115+
const currentIsBrowser = currentCategories.includes('browser');
116+
const currentIsServer = currentCategories.includes('server');
117+
const currentIsServerless = currentCategories.includes('serverless');
118+
const currentIsServerLike = currentIsServer || currentIsServerless;
119+
120+
const hasCategorySupported = categorySupported.length > 0;
121+
const supportedBrowserOnly =
122+
categorySupported.includes('browser') &&
123+
!categorySupported.includes('server') &&
124+
!categorySupported.includes('serverless');
125+
const supportedServerLikeOnly =
126+
!categorySupported.includes('browser') &&
127+
(categorySupported.includes('server') || categorySupported.includes('serverless'));
128+
129+
const showBrowserOnly =
130+
hasCategorySupported && supportedBrowserOnly && currentIsServerLike;
131+
const showServerLikeOnly =
132+
hasCategorySupported && supportedServerLikeOnly && currentIsBrowser;
133+
134+
return {showBrowserOnly, showServerLikeOnly};
135+
}

‎src/components/sdkOptionOverview.tsx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
'use client';
2+
3+
import {useEffect, useState} from 'react';
4+
5+
type TreeItem = {
6+
children: TreeItem[];
7+
id: string;
8+
name: string;
9+
};
10+
11+
type TreeNode = {
12+
element: HTMLElement;
13+
id: string;
14+
level: number;
15+
name: string;
16+
};
17+
18+
export function SdkOptionsOverview() {
19+
const [treeItems, setTreeItems] = useState<TreeItem[]>([]);
20+
21+
// gather the sdk option items on mount
22+
useEffect(() => {
23+
if (typeof document === 'undefined') {
24+
return;
25+
}
26+
const main = document.getElementById('main');
27+
if (!main) {
28+
throw new Error('#main element not found');
29+
}
30+
const nodes = Array.from(main.querySelectorAll('h2, h3'))
31+
.map(el => {
32+
const name = el.textContent?.trim() ?? '';
33+
const id = el.id;
34+
if (!id || !name) {
35+
return null;
36+
}
37+
return {
38+
id,
39+
name,
40+
element: el,
41+
level: el.tagName === 'H2' ? 1 : 2,
42+
};
43+
})
44+
.filter(Boolean) as TreeNode[];
45+
46+
// Now group them together
47+
// We only support 2 levels of nesting,
48+
// where the first level is assumed to be headings, and the second one is assumed to be options
49+
const _tocItems: TreeItem[] = [];
50+
let currentItem: TreeItem | undefined;
51+
for (let node of nodes) {
52+
if (!currentItem || node.level === 1) {
53+
currentItem = {
54+
id: node.id,
55+
name: node.name,
56+
children: [],
57+
};
58+
_tocItems.push(currentItem);
59+
} else if (node.element.hasAttribute('data-sdk-option')) {
60+
currentItem.children.push({
61+
id: node.id,
62+
name: node.name,
63+
children: [],
64+
});
65+
}
66+
}
67+
68+
// Remove groups without children
69+
setTreeItems(_tocItems.filter(item => item.children.length > 0));
70+
}, []);
71+
72+
return (
73+
<ul>
74+
{treeItems.map(item => {
75+
return (
76+
<li key={item.id}>
77+
<a href={`#${item.id}`}>{item.name}</a>
78+
<ul>
79+
{item.children.map(child => {
80+
return (
81+
<li key={child.id}>
82+
<a href={`#${child.id}`}>{child.name}</a>
83+
</li>
84+
);
85+
})}
86+
</ul>
87+
</li>
88+
);
89+
})}
90+
</ul>
91+
);
92+
}

‎src/mdxComponents.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ import {PlatformSdkPackageName} from './components/platformSdkPackageName';
3131
import {PlatformSection} from './components/platformSection';
3232
import {RelayMetrics} from './components/relayMetrics';
3333
import {SandboxLink} from './components/sandboxLink';
34+
import {SdkOption} from './components/sdkOption';
35+
import {SdkOptionsOverview} from './components/sdkOptionOverview';
3436
import {SignInNote} from './components/signInNote';
3537
import {SmartLink} from './components/smartLink';
3638
import {VimeoEmbed} from './components/video';
@@ -49,6 +51,8 @@ export function mdxComponents(
4951
CodeBlock,
5052
CodeTabs,
5153
ConfigKey,
54+
SdkOption,
55+
SdkOptionsOverview,
5256
CreateGitHubAppForm,
5357
ConfigValue,
5458
DefinitionList,

0 commit comments

Comments
 (0)