Site is not loading

[Skellingtor]

Self-explanatory, the Notion page is not loading through my custom domain via Fruition. I'm not familiar with coding so I can't pinpoint the problem myself, but all I see is a white screen with an infinitely looping loading circle.

This is my domain: https://skellingtor.online/ This is the page it's supposed to point towards: https://skellingtor.notion.site/Hello-I-m-Matheus-Carneiro-d2e6bccc20e644bdacded2fa276f3b9c?pvs=4

[09rd193]

I could not discover where the “endless loop” was occurring.

Temporarily, I replaced the worker code to redirect from my domain to “notion.site/” url. Reference: "Redirect all requests to one URL ": https://developers.cloudflare.com/workers/examples/redirect/

My hypothesis is that it is related to the fact that Notion has started a service that allows users to set up their own domain name...

I will look into this a little more. Hopefully someone with more knowledge will chime in.

[Skellingtor]

I could not discover where the “endless loop” was occurring.

Temporarily, I replaced the worker code to redirect from my domain to “notion.site/” url. Reference: "Redirect all requests to one URL ": https://developers.cloudflare.com/workers/examples/redirect/

My hypothesis is that it is related to the fact that Notion has started a service that allows users to set up their own domain name...

I will look into this a little more. Hopefully someone with more knowledge will chime in.

Thank you, I'll use your solution as well until someone can figure this out

[timf34]

Yep I've encountered this problem since just yesterday as well, and have set up URL forwarding in the meantime. I'm also guessing Notion blocked this workaround to get people to use their paid custom domain hosting service. If anybody finds a way to make this work again, would appreciate it!

[09rd193]

I finished fix worker.js by resolved bugs observed one by one.

I wish I could share it with PR, but I don't think it's the right way to fix it... (since the past fixes also seemed to be one of the bugs...)

I can't PR(sorry), but I'll disclose the temp version if it's OK. How about this way?

[09rd193]

I will share my temp-fix code, use it if you like. (Hope an expert will emerge...)

▼ATTNTION: This code is unfinish fix provisional.▼

temp-fix code

```js /* CONFIGURATION STARTS HERE */ /* Step 1: enter your domain name like fruitionsite.com */ const MY_DOMAIN = 'YOUR_DOMAIN'; /* * Step 2: enter your URL slug to page ID mapping * The key on the left is the slug (without the slash) * The value on the right is the Notion page ID */ const SLUG_TO_PAGE = { '': 'YOUR_SLUG_TO_PAGE', }; /* Step 3: enter your page title and description for SEO purposes */ const PAGE_TITLE = ''; const PAGE_DESCRIPTION = ''; /* Step 4: enter a Google Font name, you can choose from https://fonts.google.com */ const GOOGLE_FONT = ''; /* Step 5: enter any custom scripts you'd like */ const CUSTOM_SCRIPT = ``; /* CONFIGURATION ENDS HERE */ const PAGE_TO_SLUG = {}; const slugs = []; const pages = []; Object.keys(SLUG_TO_PAGE).forEach(slug => { const page = SLUG_TO_PAGE[slug]; slugs.push(slug); pages.push(page); PAGE_TO_SLUG[page] = slug; }); addEventListener('fetch', event => { event.respondWith(fetchAndApply(event.request)); }); function generateSitemap() { let sitemap = ''; slugs.forEach( (slug) => (sitemap += 'https://' + MY_DOMAIN + '/' + slug + '') ); sitemap += ''; return sitemap; } const corsHeaders = { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET, HEAD, POST, PUT, OPTIONS', 'Access-Control-Allow-Headers': 'Content-Type', }; function handleOptions(request) { if (request.headers.get('Origin') !== null && request.headers.get('Access-Control-Request-Method') !== null && request.headers.get('Access-Control-Request-Headers') !== null) { // Handle CORS pre-flight request. return new Response(null, { headers: corsHeaders }); } else { // Handle standard OPTIONS request. return new Response(null, { headers: { 'Allow': 'GET, HEAD, POST, PUT, OPTIONS', } }); } } async function fetchAndApply(request) { if (request.method === 'OPTIONS') { return handleOptions(request); } let url = new URL(request.url); url.hostname = 'www.notion.so'; if (url.pathname === '/robots.txt') { return new Response('Sitemap: https://' + MY_DOMAIN + '/sitemap.xml'); } if (url.pathname === '/sitemap.xml') { let response = new Response(generateSitemap()); response.headers.set('content-type', 'application/xml'); return response; } let response; if (url.pathname.startsWith('/app') && url.pathname.endsWith('js')) { response = await fetch(url.toString()); let body = await response.text(); response = new Response(body.replace(/www.notion.so/g, MY_DOMAIN).replace(/notion.so/g, MY_DOMAIN), response); response.headers.set('Content-Type', 'application/x-javascript'); return response; } else if (url.pathname.startsWith('/api')) { // Forward API response = await fetch(url.toString(), { body: url.pathname.startsWith('/api/v3/getPublicPageData') ? null : request.body, headers: { 'content-type': 'application/json;charset=UTF-8', 'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36' }, method: 'POST', }); response = new Response(response.body, response); response.headers.set('Access-Control-Allow-Origin', '*'); return response; } else if (slugs.indexOf(url.pathname.slice(1)) > -1) { const pageId = SLUG_TO_PAGE[url.pathname.slice(1)]; const redirectUrl = 'https://' + MY_DOMAIN + '/' + pageId return Response.redirect(redirectUrl, 301); } else { response = await fetch(url.toString(), { body: request.body, headers: request.headers, method: request.method, }); response = new Response(response.body, response); response.headers.delete('Content-Security-Policy'); response.headers.delete('X-Content-Security-Policy'); } return appendJavascript(response, SLUG_TO_PAGE); } class MetaRewriter { element(element) { if (PAGE_TITLE !== '') { if (element.getAttribute('property') === 'og:title' || element.getAttribute('name') === 'twitter:title') { element.setAttribute('content', PAGE_TITLE); } if (element.tagName === 'title') { element.setInnerContent(PAGE_TITLE); } } if (PAGE_DESCRIPTION !== '') { if (element.getAttribute('name') === 'description' || element.getAttribute('property') === 'og:description' || element.getAttribute('name') === 'twitter:description') { element.setAttribute('content', PAGE_DESCRIPTION); } } if (element.getAttribute('property') === 'og:url' || element.getAttribute('name') === 'twitter:url') { element.setAttribute('content', MY_DOMAIN); } if (element.getAttribute('name') === 'apple-itunes-app') { element.remove(); } } } class HeadRewriter { element(element) { /* if (GOOGLE_FONT !== '') { element.append(` `, { html: true }); } */ const el = ``.replace(/\r?\n/g, ''); element.append( el, { html: true } ); } } class BodyRewriter { constructor(SLUG_TO_PAGE) { this.SLUG_TO_PAGE = SLUG_TO_PAGE; } element(element) { const el = `${CUSTOM_SCRIPT}`.replace(/\r?\n/g, ''); element.append( el, {html: true} ); } } async function appendJavascript(res, SLUG_TO_PAGE) { return new HTMLRewriter() .on('title', new MetaRewriter()) .on('meta', new MetaRewriter()) .on('head', new HeadRewriter()) .on('body', new BodyRewriter(SLUG_TO_PAGE)) .transform(res); } ```

P.S. Please modify the YOUR_DOMAIN and YOUR_SLUG_TO_PAGE parts to your own settings.

[kanayankee]

@09rd193 Hello! I encountered the same issue starting yesterday. I really appreciate you providing the updated code! If the pull request isn’t active, perhaps it might be worthwhile for someone in the community to create a new repository, like fruition-sync (given that the original code is under the MIT license…).

[kanayankee]

@09rd193 Additionally, you might need to remove this part:

if (element.tagName === 'title') {
  element.setInnerContent(PAGE_TITLE);
}

When previewing on an iPhone (or possibly all mobile devices?), it causes an error with Notion.

I’d really like to work alongside current Fruition users to help revive the Fruition service! Looking forward to collaborating with everyone. Thanks again for your support!

[09rd193]

@kanayankee コメントありがとうございます！ I really really really think you are right. I wish I could submit a PR or Fork in the correct procedure, but the reality is that I'm too busy...

When previewing on an iPhone (or possibly all mobile devices?), it causes an error with Notion.

OMG... and Very nice pointed! I checked in browser & iPhone. I proceeded from the LOOP screen, satisfy, and stoped my hand.

[raznostoronniy]

I will share my temp-fix code, use it if you like. (Hope an expert will emerge...)

▼ATTNTION: This code is unfinish fix provisional.▼

temp-fix code P.S. Please modify the YOUR_DOMAIN and YOUR_SLUG_TO_PAGE parts to your own settings.

Hi! Thanks for you attention to the issue! Is it work for you well? I tried making the changes with your temp-fix, but the deploy fails with class HeadRewriter error.

[09rd193]

@raznostoronniy Hello! Very very thanks for trying to deploy.

Deploy is successful on my site. I have only changed MY_DOMAIN and SLUG_TO_PAGE from temp-fix.

Maybe my site is simple too far... I will show though the online diff command results.

[zhaotianjing]

Hi @09rd193 , I am unfamiliar with the worker code. To be better understood, in your case, you change "MY_DOMAIN" from skellingtor.online to skellingtor.notion.site, and change "SLUG_TO_PAGE" from d2e6bccc20e644bdacded2fa276f3b9c?pvs=4 to Hello-I-m-Matheus-Carneiro-d2e6bccc20e644bdacded2fa276f3b9c?pvs=4?

Am I understanding your solution correctly? Thanks!

[TianHongZXY]

Thanks @09rd193 for your solution, after applying it my homepage works fine now. I have a question that the url displayed in the url bar is not MY_DOMAIN only, but with some suffix, e.g., my notion username and the notion page id, it looks like https://MY_DOMAIN/tianhongzxy/Xinyu-Zhu-2ab23fc3f366490ca6cefda66f4e61c8 , can we get the url displayed as MY_DOMAIN only?

[09rd193]

@zhaotianjing Hi. In my case setting use step 2 in site of https://stephenou.notion.site/Fruition-Free-Open-Source-Toolkit-for-Building-Websites-with-Notion-771ef38657244c27b9389734a9cbff44 .

Maybe your case...

0. Open ↑ page & find step 2 part
1. Input you own domain in "Your Domain" form.
2. Input your Notion site full url (ex: h/ttps://sample.notion.site/sample12345) in "Notion url ~" form
3. See code part under the "COPY THE CODE" button.
4. Copy & paest from Step 1 & Step2 part in code.

My announce be enough? If insufficient explanation sorry may bad.

[Skellingtor]

This should go without saying but please don't use my domain for your sites, especially as you don't own it!

[09rd193]

@TianHongZXY Thank you too. Me too it was the same situation I had encountered.

To be honest, it is unresolved. Sorry!

The way I reproduce it is,

1. Open domain only url, it becomes a long URL.
2. Go to any page under the domain.
3. Click / Tap top left button in page, it becomes a domain-only URL

(Why step 1 & 3 different URL...mystery now...)

Sorry I can't completely fix, as this is just a quick fix to get the screen to show up.

[zhaotianjing]

Hi @09rd193

Thanks for your suggestion. I followed your instructions, and I found the worker code is exactly the same as my current worker code in Cloudflare. However, with the current worker code, my site is not loading. To use your code posted above, should I keep MY_DOMAIN and SLUG_TO_PAGE the same as before?

Thanks,

[09rd193]

@Skellingtor I'm so sorry. I quoted it because it was written in the comment. I erase it soon.

[09rd193]

Hi @zhaotianjing I think fine using previous MY_DOMAIN and SLUG_TO_PAGE.

And cross one's mind now... Is it possible that it is working only in my worker and not in everyone?

[facundopadilla]

I have the same issue

[facundopadilla]

I will share my temp-fix code, use it if you like. (Hope an expert will emerge...)

▼ATTNTION: This code is unfinish fix provisional.▼ ...

P.S. Please modify the YOUR_DOMAIN and YOUR_SLUG_TO_PAGE parts to your own settings.

It´s works for me! thank you, in my PC with Opera and Chrome browser is ok, in my Samsung S24 Ultra working too

[facundopadilla]

In iPhone 15 Pro and 12 works too

[maracujamix]

It is not working here too..

[09rd193]

I'll think about whether to do "PR" or "fork" seriously...

[Mehul20]

Is anyone actively looking into this?

[zhaotianjing]

Hi @zhaotianjing I think fine using previous MY_DOMAIN and SLUG_TO_PAGE.

And cross one's mind now... Is it possible that it is working only in my worker and not in everyone?

works for me for Chrome, Safari, iPhone, iPad. Thank you so much!

[bflack]

Ugh... unfortunately the fix here doesn't seem to work for my site. https://bestmadearchive.com if anyone cares to have a look.

I used the new code, and when it didn't work I also tried modifying the notion.so URLs to my personal notion URL (thiswholecity.notion.site), and also tried modifying the slug from just the 'code' bit to the full page name. Still not loading, still getting errors in the console but I'm not savvy enough to understand them or try to track them down.

[tdamsma]

After updating the code in this thread, which initially didn't resolve the issue, I proceeded to set:

const PAGE_TITLE = '';
const PAGE_DESCRIPTION = '';

Now, my site is functioning again.

[bflack]

After updating the code in this thread, which initially didn't resolve the issue, I proceeded to set:

const PAGE_TITLE = '';
const PAGE_DESCRIPTION = '';

Now, my site is functioning again.

That seemed to make the difference for me too.

[Mehul20]

After updating the code in this thread, which initially didn't resolve the issue, I proceeded to set:

const PAGE_TITLE = '';
const PAGE_DESCRIPTION = '';

Now, my site is functioning again.

This fixed for me too!

[Mehul20]

It's not working for me on Iphone 16 though - Safari

[zhaotianjing]

@09rd193 Additionally, you might need to remove this part:

if (element.tagName === 'title') {
  element.setInnerContent(PAGE_TITLE);
}

When previewing on an iPhone (or possibly all mobile devices?), it causes an error with Notion.

I’d really like to work alongside current Fruition users to help revive the Fruition service! Looking forward to collaborating with everyone. Thanks again for your support!

this makes the code work on my iPhone.

[disachantel]

I will share my temp-fix code, use it if you like. (Hope an expert will emerge...)

▼ATTNTION: This code is unfinish fix provisional.▼

temp-fix code P.S. Please modify the YOUR_DOMAIN and YOUR_SLUG_TO_PAGE parts to your own settings.

@09rd193 Additionally, you might need to remove this part:

if (element.tagName === 'title') {
  element.setInnerContent(PAGE_TITLE);
}

When previewing on an iPhone (or possibly all mobile devices?), it causes an error with Notion.

I’d really like to work alongside current Fruition users to help revive the Fruition service! Looking forward to collaborating with everyone. Thanks again for your support!

After updating the code in this thread, which initially didn't resolve the issue, I proceeded to set:

const PAGE_TITLE = '';
const PAGE_DESCRIPTION = '';

Now, my site is functioning again.

just did all of the above and it's working for me again, BUT, the "pretty URLs" aren't rendering.

instead, I see [mydomain.com/mynotionusername/longstringofcharactershere] like @09rd193 and @TianHongZXY have already noted.

has anyone found a fix for this?