Oops, something went wrong!

Hello,
There is an issue.
I have developed a service using VPS, which has been working well until now.
Recently, when I checked it, a problem occurred.
When I run it for the first time and recognize the VPS, the message β€œOops, something went wrong!” appears on the screen.
However, if I refresh and re-recognize it, it works normally.
What could be causing this issue?
Thx.
The error message that appeared in the console is as follows:
On iOS

[RuntimeError] XR caught an error; stopping. native code called abort()
    at onException xrextras.js
    at forEach [native code]
    at K xr-simd-27.2.5.427.js
    at t xr-simd-27.2.5.427.js
    at SA slam.js
    at wI slam.js
    at <?>.wasm-function[320] [wasm code]
    at <?>.wasm-function[1244] [wasm code]
    at <?>.wasm-function[660] [wasm code]
    at <?>.wasm-function[334] [wasm code]
    at 334 [native code]
    at UA slam.js
    at (anonymous) xr-simd-27.2.5.427.js
    at (anonymous) xr-simd-27.2.5.427.js
    at reduce [native code]
    at Z xr-simd-27.2.5.427.js
    at (anonymous) xr-simd-27.2.5.427.js
    at (anonymous) xr-simd-27.2.5.427.js
    at (anonymous) xr-simd-27.2.5.427.js
    at (anonymous) xr-simd-27.2.5.427.js
    at IA xr-simd-27.2.5.427.js
    at (anonymous) xr-simd-27.2.5.427.js
    at I xr-simd-27.2.5.427.js

On Android

[RuntimeError] XR caught an error; stopping. native code called abort()
    at onException xrextras.js?s=1
    at cb xr-simd-27.2.5.427.js
    at (anonymous) xr-simd-27.2.5.427.js
    at O xr-simd-27.2.5.427.js
    at Object.K [as onError] xr-simd-27.2.5.427.js
    at Object.t xr-simd-27.2.5.427.js
    at SA slam.js
    at wI slam.js

Can you provide more details on the project? I’m guessing it’s a Cloud Editor project since I see xrextras in the stack trace.

Thank you for your interest.
I’m not sure where to start explaining.
Our project is quite extensive.
Yes, it was developed using the 8th Wall Cloud Editor.
The project was created with React and Three.js.

What information would help explain this situation better?

To explain the situation in more detail:
First of all, VPS seems to be working properly.
When the target registered as a VPS point is recognized by the camera, it appears to be recognized well.
However, the error occurs at the moment when something that should be triggered after recognition begins to play.
After the error occurs, if the URL is refreshed and recognition is attempted again, the error does not occur, and it works normally.

Below is the source code for the part where XR mainly operates.

import '../camerafeed.css'
import Layout from '../../../components/Layout'
import ContentsHeader from '../../../components/ContentsHeader'
import CameraFeed from '../../../components/camrafeed/CameraFeed'

import {mainSceneInit, removeAllContentElements, vpsPoints} from './threejs/mainSceneInit'

import {useAdjustViewport} from '../../../hooks/useAdjustViewport'
const {adjustViewport} = useAdjustViewport()

declare let React: any
declare let ReactRouterDOM: any
declare let XR8: any
declare let window: any
declare let XRExtras: any
let isXR8Run: boolean = false
let contentTitle: string = ''

export const pauseVpsXR8 = () => {
  console.log('vps xr pause')
  if (isXR8Run) {
    XR8.pause()
  }
}

export const resumeVpsXR8 = () => {
  console.log('vps xr resume')
  if (isXR8Run) {
    XR8.resume()
  }
}

export const removeVpsContent = () => {
  isXR8Run = false
  vpsPoints.length = 0

  const displayElement = document.getElementById('locationTitleDisplay')
  if (displayElement) {
    displayElement.remove()
  }
  const displayImgElement = document.getElementById('locationImgDisplay')
  if (displayImgElement) {
    displayImgElement.remove()
  }
  removeAllContentElements()
}

function getMobileOperatingSystem() {
  const userAgent = navigator.userAgent || navigator.vendor || window.opera

  if (/windows phone/i.test(userAgent)) {
    return 'Windows Phone'
  }

  if (/android/i.test(userAgent)) {
    return 'Android'
  }


  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
    return 'iOS'
  }

  return 'unknown'
}

const {withRouter, useHistory} = ReactRouterDOM
const {useRef} = React

const VpsArApp = withRouter(({location}) => {
  const history = useHistory()
  const canvasRef = useRef(null)

  React.useLayoutEffect(() => {
    // checkPermissions()
    adjustViewport()

    let inDom = false
    const observer = new MutationObserver(() => {
      if (document.querySelector('.prompt-box-8w')) {
        if (!inDom) {
          document.querySelector('.prompt-box-8w p').innerHTML = '<strong>AR μ²΄ν—˜μ„ μœ„ν•΄μ„œ<br>λ™μž‘ 및 λ°©ν–₯ μ„Όμ„œ κΆŒν•œμ΄ ν•„μš”ν•©λ‹ˆλ‹€.</strong>'
          document.querySelector('.prompt-button-8w').innerHTML = 'κ±°λΆ€ν•˜κΈ°'
          document.querySelector('.button-primary-8w').innerHTML = 'ν—ˆμš©ν•˜κΈ°'
        }
        inDom = true
      } else if (inDom) {
        inDom = false
        observer.disconnect()
      }
    })
    observer.observe(document.body, {childList: true})

    const queryString = window.location.search

    const urlParams = new URLSearchParams(queryString)

    if (urlParams.get('title')) {
      contentTitle = urlParams.get('title')
    }

    const onxrloaded = () => {
      // document.body.insertAdjacentHTML('beforeend', '<canvas id="camerafeed"></canvas>')
      // document.body.insertAdjacentHTML('beforeend', '<div class="contents-ui"></div>')
      // const _canvas = document.getElementById('camerafeed')
      XR8.addCameraPipelineModule({
        name: 'request-camera',
        requiredPermissions: () => ([XR8.XrPermissions.permissions().CAMERA]),
      })

      XR8.addCameraPipelineModule({
        name: 'request-gps-location',
        requiredPermissions: () => ([XR8.XrPermissions.permissions().DEVICE_GPS]),
      })

      XR8.addCameraPipelineModule({
        name: 'request-gyro',
        requiredPermissions: () => ([XR8.XrPermissions.permissions().DEVICE_ORIENTATION]),
      })
      setTimeout(() => {
        XR8.addCameraPipelineModules([             // Add camera pipeline modules.
          XR8.GlTextureRenderer.pipelineModule(),  // Draws the camera feed.
          XR8.Threejs.pipelineModule(),            // Creates a ThreeJS AR Scene.
          XR8.XrController.pipelineModule(),       // Enables SLAM tracking.
          // window.LandingPage.pipelineModule(),         // Detects unsupported browsers and gives hints.
          window.VpsCoachingOverlay.pipelineModule(),  // Shows the Lightship VPS coaching overlay.
          XRExtras.FullWindowCanvas.pipelineModule(),  // Modifies the canvas to fill the window.
          // XRExtras.Loading.pipelineModule(),           // Manages the loading screen on startup.
          XRExtras.RuntimeError.pipelineModule(),  // Shows an error image on runtime error.
          mainSceneInit(contentTitle),
        ])
        const _canvas = canvasRef.current
        if (!_canvas) {
          console.error('Canvas reference is null.')
          return
        }
        if (!isXR8Run) {
          XR8.XrController.configure({enableVps: true})
        }

        XR8.run({
          canvas: _canvas,
          allowedDevices: XR8.XrConfig.device().ANY,
        })
        isXR8Run = true

        XR8.Vps.projectWayspots().then((projectWayspots) => {
          projectWayspots.forEach((projectWayspot) => {
            // console.log('projectWayspot: ', projectWayspot)
            vpsPoints.push(projectWayspot)
          })
        })
      }, 1000)
      window.VpsCoachingOverlay.configure({
        disablePrompt: true,

      })
    }

    window.XR8 ? onxrloaded() : window.addEventListener('xrloaded', onxrloaded)
    return () => {
      XR8.stop()
      XR8.clearCameraPipelineModules()
      const canvas = canvasRef.current
      if (canvas) canvas.remove()
      const contentUi = document.querySelectorAll('.contents-ui')
      contentUi.forEach((item) => {
        item.remove()
      })
      removeVpsContent()
      console.log('Clean up!')
    }
  }, [history])

  return (
    <Layout>
      <ContentsHeader title={''} />
      <CameraFeed ref={canvasRef}></CameraFeed>
      <div class='contents-ui'></div>
    </Layout>
  )
})

export {VpsArApp}